Apache ECharts 5.5.0：如何传播鼠标滚轮事件？

Question

ECharts 的默认行为是通过鼠标滚轮缩放图表。 我有几个垂直排列的 ECharts，无法在一个屏幕上显示。所以我有一个可滚动的页面。

我想要鼠标滚轮向上/向下滚动页面。 问题是 ECharts 缩放其内容并消耗事件，以便它不会传播到父级。

即使我关闭缩放功能，例如通过

DataZoom.zoomOnMouseWheel = 'ctrl'

，ECharts仍然会消耗该事件，从而页面不会滚动。

是否有可能只要不按下Ctrl使页面滚动，ECharts就会将事件传播到父级？

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

禁用图表上的鼠标滚轮

如果您只想始终禁用图表上的滚动，以便即使光标位于图表上方也可以滚动页面，请在 dataZoom 中添加

zoomLock: true

：

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

仅在按下按键时才在图表上启用鼠标滚轮

目前无法仅在按下某个键时在图表上启用 mouseWheel 事件（并在未按下该键时禁用它）。

选项

DataZoom.zoomOnMouseWheel = 'ctrl'

仅在未按下ctrl时禁用

缩放

，但图表仍然捕获mouseWheel事件（正如您在帖子中所说）。

这是 Echarts 上早已存在的问题，但仍未解决。 请参阅 Echarts github 上这个未解决的问题的答案，了解一些用户建议的有趣的解决方法。