Echarts多图表缩放联动：鼠标滚轮缩放单个图表时其余同步缩放

要实现四个ECharts图表的滚轮缩放同步，核心思路是监听单个图表的缩放事件，然后将缩放状态同步到其余图表。以下是具体实现步骤：

1. 初始化图表实例并统一管理 #

先创建所有图表实例，并存入数组方便后续批量操作：

// 获取DOM元素并初始化ECharts实例
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));
const chart3 = echarts.init(document.getElementById('chart3'));
const chart4 = echarts.init(document.getElementById('chart4'));

// 存入数组统一管理
const charts = [chart1, chart2, chart3, chart4];

2. 配置基础图表选项 #

确保所有图表都启用了可缩放功能（比如通过dataZoom组件），示例配置如下：

// 基础配置（根据你的业务需求调整坐标轴、数据等）
const baseOption = {
  xAxis: {
    type: 'value',
    boundaryGap: false
  },
  yAxis: {
    type: 'value'
  },
  // 启用内部滚轮缩放（inside类型支持鼠标滚轮缩放）
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100
    }
  ],
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 200, 130, 190] // 示例数据
  }]
};

// 给所有图表应用配置
charts.forEach(chart => chart.setOption(baseOption));

3. 实现缩放同步逻辑 #

监听每个图表的datazoom事件，当某个图表被缩放时，将其缩放状态同步到其他图表：

// 同步缩放状态的函数
function syncZoom(targetChart) {
  // 获取当前触发缩放的图表的dataZoom状态
  const currentZoom = targetChart.getOption().dataZoom[0];
  if (!currentZoom) return;

  // 遍历所有图表，同步start和end值
  charts.forEach(chart => {
    if (chart !== targetChart) {
      chart.setOption({
        dataZoom: [{
          start: currentZoom.start,
          end: currentZoom.end
        }]
      });
    }
  });
}

// 给每个图表绑定datazoom事件
charts.forEach(chart => {
  chart.on('datazoom', () => syncZoom(chart));
});

4. 补充窗口resize同步（可选） #

为了保证窗口大小变化时所有图表尺寸一致，添加resize监听：

window.addEventListener('resize', () => {
  charts.forEach(chart => chart.resize());
});

注意事项 #

• 如果你的图表使用的是dataZoom的slider（滑块）类型，上述逻辑同样适用，因为datazoom事件会在滑块拖动或滚轮缩放时触发。
• 若你是通过手动设置坐标轴min/max实现缩放，可监听axiszoom事件，同步坐标轴的min和max值即可。
• 确保所有图表的坐标轴类型匹配（比如都是数值轴），否则同步缩放没有实际意义。

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