echart 柱形图数据过少时左偏

679 阅读1分钟

前端小白一个,做echart时别人提的需求,上网找过,没有什么回答,然后突然灵机一动想到的方法,大家可以根据自己的需求自行调整

这个就是效果图,原理也很简单,代码如下

	xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', '', '', '', '', ''],
			axisLine: {            // 坐标轴线
				show: true,        // 默认显示,属性show控制显示与否
				lineStyle: {       // 属性lineStyle控制线条样式
					color: '#405569',
					width: 1,
					type: 'solid',
				},
			},
			axisTick:{   //刻度
				show:false
			},
			axisLabel: {           // 坐标轴文本标签,详见axis.axisLabel
				show: true,
				interval: 'auto',
				rotate: 0,
				margin: 7,
			},	
		},
series: [{
				data: [120, 190, 0, 0, 0, 0, 0],
				type: 'bar',
				barWidth:25,
				z:10,
				barCategoryGap:'30%'
		}]

把两个data自己按需改一下就行