[Feature] How can I dispatch a wheel event programmatically?

[jianqi-jin]

What problem does this feature solve?

I just have two Echart instances, both of them have a dataZoom. How do I make them move synchronously when I scroll?

What does the proposed API look like?

Maybe just offer a dispatch function that I can pass a event that type is wheel.

[jianqi-jin]

I have to use two instances, because I need to set some styles on each one. Something like border style.

[Ovilia]

I'm not sure it works with connect. You can have a try.

[jianqi-jin]

Thanks, @Ovilia , but there are not only two instance, but also a div, How can I dispatch wheel event when I wheel on this div?

[jianqi-jin]

#949 fixed this ~. @Ovilia Could you help me review this. Thanks :)

[Ovilia]

Can you first make a demo (without zrender changes) to show what the problem is and then I can help check if this change is necessary?

[echarts-bot]

@JinJianQi Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

[jianqi-jin]

@Ovilia Hello~, Thanks for reply, there is a demo to show that, I just want fake the wheel event on another div.

this is a simple demo:

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false
});
var app = {};

var option;

option = {
  xAxis: {},
  yAxis: {},
  dataZoom: [
    {
      type: "slider"
    },
    {
      type: "inside"
    }
  ],
  series: [
    {
      type: "line",
      data: [
        [0, 0],
        [1, 1],
        [2, 2],
        [6, 10]
      ]
    }
  ]
};
let wrapper = document.createElement("div");
wrapper.innerText = "wheel on me";
wrapper.style.height = "300px";
wrapper.style.width = "300px";
wrapper.style.position = "fixed";
wrapper.style.backgroundColor = "rgba(0,0,0,.3)";
wrapper.style.top = "0px";
wrapper.style.left = "0px";
document.body.appendChild(wrapper);

const onWheel = (e) => {
  console.log("onWheel");
  const fakeWheel = new WheelEvent("wheel", e);
  fakeWheel.zrX = e.offsetX;
  fakeWheel.zrY = e.offsetY;
  console.log(fakeWheel);
  myChart.getZr().handler.proxy.dom.dispatchEvent(fakeWheel);
};

wrapper.addEventListener("wheel", onWheel);

if (option && typeof option === "object") {
  myChart.setOption(option);
}

window.addEventListener("resize", myChart.resize);

also, you can check this link to reproduce.

https://codesandbox.io/s/gantt-chart-of-airport-flights-forked-1hbsgx?file=/index.js