Apache ECharts 5.5.0：如何让鼠标滚轮事件向上传递至页面？

问题场景 #

多个垂直排列的ECharts图表超出一屏，页面需要滚动，但ECharts会消费鼠标滚轮事件——即使设置dataZoom.zoomOnMouseWheel='ctrl'，未按Ctrl时图表仍会拦截事件，导致页面无法滚动。需要实现：未按下Ctrl键时，滚轮事件传递给父元素实现页面滚动；按下Ctrl键时，保留图表缩放功能。

解决方法 #

1. 调整ECharts配置 #

先完全关闭默认的滚轮缩放触发，改为手动控制：

dataZoom: [
  {
    type: 'inside',
    zoomOnMouseWheel: false // 禁用默认滚轮缩放
  }
]

2. 绑定鼠标滚轮事件监听 #

给每个ECharts实例添加mousewheel事件监听，根据Ctrl键状态决定是否触发缩放或放行事件：

完整代码示例：

HTML部分

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<div id="main0" style="width: 600px;height:400px;"></div>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>

JavaScript部分

for (let i = 0; i < 3; ++i) {
  const chartDom = document.getElementById('main' + i);
  const myChart = echarts.init(chartDom);
  
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'inside',
        zoomOnMouseWheel: false // 关闭默认滚轮触发缩放
      }
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };

  myChart.setOption(option);

  // 绑定鼠标滚轮事件
  myChart.on('mousewheel', (params) => {
    const event = params.event;
    if (event.ctrlKey) {
      // 按下Ctrl键时，触发图表缩放
      const delta = event.deltaY > 0 ? 1 : -1; // 滚轮方向判断
      myChart.dispatchAction({
        type: 'dataZoom',
        zoom: 0.1 * delta, // 缩放比例，可根据需要调整
        origin: {x: event.offsetX, y: event.offsetY}
      });
      event.stopPropagation(); // 阻止事件冒泡，避免页面滚动
    } else {
      // 未按Ctrl时，取消ECharts默认的事件阻止，让页面处理滚动
      event.stopImmediatePropagation = () => {};
    }
  });
}

原理说明 #

• 关闭zoomOnMouseWheel后，ECharts不会自动处理滚轮缩放，但仍会默认阻止事件冒泡，因此需要在回调中重置stopImmediatePropagation，让事件能传递给页面。
• 按下Ctrl时，手动调用dispatchAction触发dataZoom动作，同时阻止事件冒泡，确保只执行图表缩放操作。

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