如何开启Echarts甘特图左侧区域的滚动功能？

Echarts甘特图的左侧类目区域默认没有滚动功能，需要通过配置dataZoom组件来实现，以下是具体操作方法：

• 配置dataZoom组件，针对甘特图的y轴（左侧类目轴）设置滚动规则：
  在图表的option中添加如下配置：

  option = {
    // 保留你原有甘特图的配置（如series、tooltip等）
    dataZoom: [
      // 内置滚动：支持鼠标滚轮/拖拽滚动左侧区域
      {
        type: 'inside',
        yAxisIndex: 0,
        start: 0,
        end: 50 // 初始显示前50%的类目，可根据需求调整
      },
      // 可选：显示可视化滚动条，方便手动拖拽调整
      {
        type: 'slider',
        yAxisIndex: 0,
        right: 10,
        top: 20,
        height: '80%',
        start: 0,
        end: 50
      }
    ],
    yAxis: {
      type: 'category',
      data: ['你的类目1', '你的类目2', ...], // 替换为实际类目数据
      // 原有y轴配置保持不变
    }
  };
  

• 关键参数说明：

  • yAxisIndex：指定滚动作用的y轴索引，甘特图通常只有一个y轴，设为0即可。
  • type: 'inside'：开启内部滚动交互，鼠标滚轮或拖拽左侧区域即可滚动类目。
  • type: 'slider'：额外显示一个滚动条控件，可手动拖动调整显示范围，按需选择是否添加。
  • start和end：控制初始显示的类目范围，百分比值，比如设置end: 30则初始只显示前30%的类目。

如果是基于官方航班甘特图示例修改，直接将上述dataZoom配置插入到原有option中即可生效。

内容的提问来源于stack exchange，提问作者Gregory Tomilin