Apache ECharts 5.5.0: How to propagate mouse wheel event?

Question

The default behavior of ECharts causes mouse wheel to zoom the chart. I have several vertically arranged ECharts that do not fit on one screen. So I have a scrollable page.

I want mouse wheel to scroll the page up/down. The problem is that ECharts zooms its content and consumes the event so that it is not propagated to the parent.

Even if I turn off the zooming e.g. via DataZoom.zoomOnMouseWheel = 'ctrl', ECharts still consumes the event so that the page is not scrolled.

Is there a possibility that ECharts propagates the event to the parent as long as Ctrl is not pressed so that the page is scrolled?

for (i = 0; i < 3; ++i) {
  var chartDom = document.getElementById('main' + i);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'inside',
        zoomOnMouseWheel: 'ctrl'
      }
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };

  option && myChart.setOption(option);

}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answer 1

Disable mouseWheel on the chart

If you just want to always disable scrolling on the chart so you can scroll the page even when the cursor is above the chart, add zoomLock: true in the dataZoom:

dataZoom: [
  {
    type: 'inside',
    zoomOnMouseWheel: 'ctrl',
    zoomLock: true
  }
],

Enable mouseWheel on the chart only when pressing a key

It is currently not possible to enable mouseWheel events on a chart only when a key is pressed (and disable it when that key isn't pressed).

The option DataZoom.zoomOnMouseWheel = 'ctrl' only disables zooming when the ctrl key isn't pressed, but the chart still catches the mouseWheel event (as you said in your post).

This is an issue known for a long time on Echarts but it's still not resolved. See the answers on this opened issue on Echarts github for interesting workarounds that some users suggested.