ECharts实现仅在datazoom滑块拖拽结束（左键释放）时触发事件

ECharts 的 datazoom 事件会在拖拽开始、拖拽过程中、拖拽结束三个阶段重复触发，要避免频繁执行耗时的筛选逻辑，只需在事件回调中通过参数的 eventType 属性 判断当前是否为拖拽结束状态即可。

实现代码 #

chart.on('datazoom', (params) => {
  // 仅在拖拽结束（鼠标释放）时执行筛选逻辑
  if (params.eventType === 'end') {
    // 获取当前缩放的范围数值
    const zoomInfo = params.batch[0];
    const start = zoomInfo.startValue; // 数值轴起点，索引轴用 zoomInfo.start
    const end = zoomInfo.endValue;     // 数值轴终点，索引轴用 zoomInfo.end
    
    // 执行你的筛选操作
    // yourFilterFunction(start, end);
  }
});

关键说明 #

• params.eventType 会在不同阶段返回对应值：拖拽开始为 'start'、拖拽中为 'process'、拖拽结束为 'end'
• params.batch 数组包含当前 DataZoom 组件的缩放详情，根据你的轴类型选择使用 startValue/endValue（数值轴）或 start/end（索引轴）
• 这种方式基于 ECharts 原生事件参数实现，无需额外监听鼠标事件，精准控制逻辑触发时机

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