echarts dataZoom 基本用法，给 yAxis 增加滚动条

最新推荐文章于 2024-08-12 14:23:08 发布

原创最新推荐文章于 2024-08-12 14:23:08 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

echarts相关专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在ECharts中设置Y轴滚动条，并保持X轴数据固定不变。通过dataZoom组件配置内外部滚动条，实现数据区间的精确控制。具体参数包括组件类型、位置、颜色等。

现有一个 echarts 图表，需要在 y 轴方向上设置一个滚动条，可以滚动数据，x 轴显现的数据固定不动不能跟随滚动条滚动，所以不能直接使用外层盒子的 overflow: auto。可以使用 echarts 的 dataZoom 组件来实现

  dataZoom: [
    {
      type: 'slider',
      show: true,
      // 设置组件控制的y轴
      yAxisIndex: 0,
      right: 40,    
      top: 60,
      // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
      // 也可以用 startValue设置起始值
      start: 29,
      end: 36,
      width: 12,
      height: 450,
      // 组件的背景颜色
      backgroundColor: 'rgba(0, 0, 0, 0.4)',
      // 选中范围的填充颜色
      fillerColor: '#00FFFF',
      // 边框颜色
      borderColor: '#0094E9',
      // 是否显示detail，即拖拽时候显示详细数值信息
      showDetail: false,
      // 控制手柄的尺寸
      handleSize: 16,
      // 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
      showDataShadow: false,
    },
    {
      type: 'inside',
      yAxisIndex: [0],
      start: 29,
      end: 36,
      // 不按任何功能键，鼠标滚轮能触发缩放
      zoomOnMouseWheel: false,
      // 不按任何功能键，鼠标移动能触发数据窗口平移
      moveOnMouseWheel: true
    }
  ],

样式：