vue中Echarts的x轴增加横向滚动条

最新推荐文章于 2025-04-24 17:53:49 发布

转载最新推荐文章于 2025-04-24 17:53:49 发布 · 2.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/-flq/p/9639331.html;https://blog.csdn.net/hzxOnlineOk/article/details/89206692

收录于

vue

当前文章被收录于：

vue

45 篇文章 6 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了如何在ECharts图表中配置数据Zoom组件，实现x轴的滚动条功能，通过示例和官方文档说明了如何设置start、end位置、显示状态和轴索引，帮助开发者提升图表交互体验。

charts x轴增加滚动条

在option 配置项中添加【 dataZoom 中配置】设置x轴滚动条
效果图：动态拖动
以下参考代码

dataZoom配置

官网写法

option = {
   xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   dataZoom: [{
      type: 'slider',
      show: true, // flase直接隐藏图形
      xAxisIndex: [0],
      left: '9%', // 滚动条靠左侧的百分比
      bottom: -5,
      start: 10, // 滚动条的起始位置（10%）
      end: 90 // 滚动条的终止位置（90%）
  }],
   yAxis: {
       type: 'value'
   },
   series: [{
       data: [120, 200, 150, 80, 70, 110, 130],
       type: 'bar',
       barWidth:30,//设置柱状图宽度
   }]
};

这里写图片描述