echarts实现带参考底图的柱状图的放大与缩小

1、这里使用echarts的柱状图中的示例来测试

2、这里是为了实现百分比，所以y轴的最大值是100series中共有四组数据，前两组是具体的百分比数据，后两组是参考底图，并设置颜色为灰色显示处理每组有四个柱子

3、通过设置xAxisIndex来将数据和参考底图合并

4、增加dataZoom实现拖拽的放到和缩小这里设置dataZoom的xAxisIndex只有[0]从右侧查看，只有设置成xAxisIndex=0的数据进行了缩放

5、修改xAxisIndex为[0,1]后，背景底图柱子也跟着变化dataZoom中的start和end是初始缩放的百分比

6、使用百分比，数据量大或小显示都不太好可以使用startValue和endValue，分别是开始和结束数据的索引。不论数据量大或小，对显示的影响不大