echarts中宽度不同的柱子中线对齐

在使用echarts制图时，会遇到多个柱子的数值显示在同一坐标系的情况，默认情况下如果柱子类别多，会重叠显示在坐标轴之上，并以左边对齐，如果两根柱子宽度不一就是如下显示，之后柱子的显示状态通过属性barGap进行调整（如果想要两根柱子堆叠放置可以通过将stack值设置为相等的值即可实现）

默认左边对齐

如下是barGap:'-85%'的样式 —— 此时的柱子可以通过调整值实现柱子的中线对齐

为负数时候两根柱子还有重合部分

如下是值为20%的样式

大于等于0%脱离重叠

以上方式虽然可以实现柱子的中线对齐，但是如果柱子种类数量大于二，那么通过调整barGap实现柱子中线对齐却是不容易的，而且通过属性调整会出现柱子对齐指示器却还是偏的现象，对于这种情况我有两种解决手段

一、我们可以通过使用象形图，series的type值为‘pictorialBar’,这个类型的series不管柱子的宽度差的多离谱，都会自动中线对齐

之后设置symbol类型为'rect',是否平铺为不平铺symbolRepeat: false（会自动拉伸为柱状），之后设置样式即可

一定要记得改 代码展示

二、第二种也是通过象形图的方式，但是这次是需要将图片设置为symbol的值，类似于给柱子添加图片背景

类型 、yellow即为图片地址