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

 时间:2026-02-17 02:18:41

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

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

2、这里是为了实现百分比,所以y轴的最大值是100

series中共有四组数据,前两组是具体的百分比数据,后两组是参考底图,并设置颜色为灰色

显示处理每组有四个柱子

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

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

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

4、增加dataZoom实现拖拽的放到和缩小

这里设置dataZoom的xAxisIndex只有[0]

从右侧查看,只有设置成xAxisIndex=0的数据进行了缩放

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

5、修改xAxisIndex为[0,1]后,背追三各景底图柱子也跟着变化

dataZoom中的start和end是初始缩放的百分比

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

6、使用百分比,数据量大或小显示都不太好

可胳始以使用startValue和endValue,分别是开始和结束数据的索引。不论数据量大或小,对显示的影响不大

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

  • LabVIEW怎么开启缩放新对象以匹配网格大小
  • 如何用origin拟合XPS峰谱
  • Origin中怎么通过File实现打印预览?
  • 如何将origin中的book数据设置为水平台阶图?
  • 如何使用matlab软件绘制gamma分布的q-q图
  • 热门搜索
    大众甲壳虫怎么样 路由器管理密码是什么 怎么看自己的网速 埃及旅游攻略 怎样修改路由器密码 口臭严重了是身体哪里出问题了 山东日照旅游 路由器论坛 如何开发右脑 羽绒服上的圆珠笔油怎么洗