ECharts柱状图barGap、barCategoryGap、barWidth属性同时设置不生效的原因

barGap用于设置不同系列的柱间距离,barCategoryGap用于设置同一系列的柱间距离,barWidth属性用于设置柱条的宽度,但把几个属性设置之后(如下代码设置),发现设置的值并没有生效。

series: [
	{
		name: "类型",
		type: "bar",
		barGap: "30%",
		barCategoryGap:'54%',
		barWidth: "28",
	},
]

原因:ECharts会根据barGapbarCategoryGapbarWidth三个属性其中的一个属性的值结合图表的高度进行平均分配,也就是说这三个属性不能同时使用,只能使用其中一个属性进行适配,解决方法是删除其中两个属性。

修改代码为:

series: [
	{
		name: "类型",
		type: "bar",
		barWidth: "28",
	},
]

把柱条的宽度设置为28,ECharts就会自动分配barGapbarCategoryGap进行适配,所以如果需要指定的柱条宽和柱间距,就要调速图表的高度来实现。