zl程序教程

您现在的位置是:首页 >  前端

当前栏目

echarts柱形图后面的柱子遮住了前面的了

echarts 后面 前面 柱形图
2023-09-11 14:22:19 时间

今天发现通过echarts画柱形图时,如果分组很多,柱形图数量一多的话,就会出现下面的效果

 

 

后来发现有人设置了每个柱子的长度,即设置barWidth为一个固定值。。。

 

其实我觉得barWidth最好不要设置?因为不设置的话,默认就是自适应,会根据柱子的数量来调整每个柱子的宽度【我是这样理解的】,但是还有个问题,如果不设置barWidth的话,就会出现,当柱子的数量很少的时候,柱子的宽度会很宽很宽,

所以再结合barMaxWidth来限制柱子的最大宽度,同理,也可以通过barMinWidth来设置其最小宽度。。。

修改如下:

 // var myserie = {"name": "男", "type": "bar", "data": [0, 0, 0, 0, 0, 0, 0, 0, 6, 8], "barWidth":54,
    var myserie = {"name": "男", "type": "bar", "data": [0, 0, 0, 0, 0, 0, 0, 0, 6, 8],"barMaxWidth":100,

修改后,当柱子数量很多时的效果如下: