Apache Echarts：缩放时隐藏无数据的垂直Y轴类目

核心思路是通过监听图表的datazoom事件，在缩放时筛选出可视范围内有数据的Y轴类目，再动态更新图表的Y轴配置和系列数据，实现无数据类目的自动隐藏与恢复。

步骤与实现代码 #

1. 监听缩放事件
   通过ECharts的on方法监听datazoom事件，每次缩放触发时执行数据筛选与图表更新逻辑。

2. 筛选可视范围内的有效类目
   计算当前缩放区间对应的X轴数据索引，遍历每个Y轴类目，检查该类目在可视区间内是否存在有效数据，收集符合条件的类目及对应数据。

3. 动态更新图表配置
   将筛选后的类目列表赋值给Y轴的data属性，同时更新系列数据，调用setOption完成图表更新。

// 初始化图表实例
const myChart = echarts.init(document.getElementById('main'));

// 原始基础数据
const originalYCategories = ['A', 'B', 'C'];
const originalSeriesData = [
  [120, 132, 101, 134, 90, 230, 210], // 类目A的数据
  [220, 182, 191, 234, 290, 330, 310], // 类目B的数据
  [0, 0, 0, 0, 0, 0, 0] // 类目C的示例无数据
];

// 初始图表配置
let chartOption = {
  dataZoom: [{
    type: 'inside',
    xAxisIndex: 0,
    start: 0,
    end: 100
  }],
  yAxis: {
    type: 'category',
    data: originalYCategories
  },
  xAxis: {
    type: 'value'
  },
  series: originalYCategories.map((cat, idx) => ({
    type: 'bar',
    data: originalSeriesData[idx]
  }))
};

myChart.setOption(chartOption);

// 监听缩放事件
myChart.on('datazoom', (params) => {
  const { start, end } = params.batch[0];
  const xDataLength = originalSeriesData[0].length;
  // 计算可视区间的起始、结束索引
  const startIdx = Math.floor((start / 100) * xDataLength);
  const endIdx = Math.ceil((end / 100) * xDataLength) - 1;

  const validCats = [];
  const validSeries = [];

  // 遍历每个类目，检查可视区间内是否有有效数据
  originalYCategories.forEach((cat, idx) => {
    const catData = originalSeriesData[idx];
    let hasValidData = false;
    // 自定义"无数据"判断逻辑，这里以非0且非空为例
    for (let i = startIdx; i <= endIdx; i++) {
      if (catData[i] !== 0 && catData[i] != null) {
        hasValidData = true;
        break;
      }
    }
    if (hasValidData) {
      validCats.push(cat);
      validSeries.push(catData);
    }
  });

  // 更新图表配置
  myChart.setOption({
    yAxis: {
      data: validCats
    },
    series: validCats.map((cat, idx) => ({
      type: 'bar',
      data: validSeries[idx]
    }))
  });
});

注意事项 #

• 数据判断逻辑：需根据实际业务定义"无数据"的判断标准，比如null、undefined或特定阈值，调整代码中的判断条件即可。
• 外部缩放组件兼容：如果使用的是外部dataZoom组件（而非inside类型），监听事件的逻辑完全一致，参数获取方式相同。
• 自动恢复显示：当缩放回退到包含所有数据的区间时，datazoom事件会再次触发，代码会自动重新加载所有Y轴类目。

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