ECharts柱状图barGap、barCategoryGap、barWidth属性同时设置不生效的原因
barGap
用于设置不同系列的柱间距离,barCategoryGap
用于设置同一系列的柱间距离,barWidth
属性用于设置柱条的宽度,但把几个属性设置之后(如下代码设置),发现设置的值并没有生效。
series: [ { name: "类型", type: "bar", barGap: "30%", barCategoryGap:'54%', barWidth: "28", }, ]
原因:ECharts会根据barGap
、barCategoryGap
、barWidth
三个属性其中的一个属性的值结合图表的高度进行平均分配,也就是说这三个属性不能同时使用,只能使用其中一个属性进行适配,解决方法是删除其中两个属性。
修改代码为:
series: [ { name: "类型", type: "bar", barWidth: "28", }, ]
把柱条的宽度设置为28
,ECharts就会自动分配barGap
或barCategoryGap
进行适配,所以如果需要指定的柱条宽和柱间距,就要调速图表的高度来实现。