如何检测柱状图已触发的datazoom事件状态？

如果是基于ECharts实现的柱状图，有两种直接的方式检测datazoom事件是否触发（即当前是否处于缩放状态）：

1. 监听datazoom事件，实时记录状态 #

在初始化图表时绑定datazoom事件，用变量标记缩放状态或保存缩放参数：

const myChart = echarts.init(document.getElementById('chart-container'));
// 标记是否触发过缩放
let isZoomed = false;
// 保存当前缩放范围
let currentZoomRange = null;

// 监听datazoom事件
myChart.on('datazoom', (params) => {
  isZoomed = true;
  // 记录x轴的缩放区间（如果是y轴缩放，对应yAxisIndex）
  currentZoomRange = {
    start: params.start,
    end: params.end,
    axisIndex: params.axisIndex
  };
});

之后只需判断isZoomed的布尔值，就能知道是否触发过datazoom事件；currentZoomRange还能保存具体的缩放参数，方便后续精准恢复。

2. 通过ECharts API主动获取当前缩放状态 #

调用getOption()方法获取图表当前配置，检查datazoom组件的start和end值（默认初始状态为0和100）：

function hasDataZoomTriggered() {
  const chartOption = myChart.getOption();
  // 假设使用单个datazoom组件，取第一个实例
  const dataZoomOpt = chartOption.dataZoom?.[0];
  if (!dataZoomOpt) return false;
  // 初始状态start=0、end=100，偏离则说明触发过缩放
  return dataZoomOpt.start !== 0 || dataZoomOpt.end !== 100;
}

// 调用函数检测状态
const zoomStatus = hasDataZoomTriggered();

恢复缩放状态的方法 #

如果需要恢复到初始无缩放状态，可通过dispatchAction触发重置：

myChart.dispatchAction({
  type: 'dataZoom',
  start: 0,
  end: 100,
  // 对应目标轴索引，默认0为x轴
  axisIndex: 0
});
// 同步重置标记变量
isZoomed = false;
currentZoomRange = null;

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