Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jianqi-jin opened this issue Sep 9, 2022 · 11 comments · May be fixed by ecomfe/zrender#949
Closed

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

jianqi-jin opened this issue Sep 9, 2022 · 11 comments · May be fixed by ecomfe/zrender#949
Labels
en This issue is in English new-feature pending We are not sure about whether this is a bug/new feature. stale Inactive for a long time. Will be closed in 7 days.

Comments

@jianqi-jin
Copy link

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.

@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. labels Sep 9, 2022
@jianqi-jin
Copy link
Author

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

@Ovilia
Copy link
Contributor

Ovilia commented Sep 9, 2022

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

@jianqi-jin
Copy link
Author

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?
image

@jianqi-jin
Copy link
Author

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

@Ovilia
Copy link
Contributor

Ovilia commented Sep 16, 2022

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?

@Ovilia Ovilia added the missing-demo The author should provide a demo. label Sep 16, 2022
@echarts-bot
Copy link

echarts-bot bot commented Sep 16, 2022

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

@jianqi-jin
Copy link
Author

@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:

image

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

@Ovilia
Copy link
Contributor

Ovilia commented Sep 21, 2022

Do you want to trigger ECharts' dataZoom event or what?

@Ovilia Ovilia added waiting-for: author and removed missing-demo The author should provide a demo. labels Sep 21, 2022
@jianqi-jin
Copy link
Author

jianqi-jin commented Sep 21, 2022

@Ovilia Yes, I want to :) I just want this fakeEvent work as a natural user action.

Copy link
Contributor

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

@github-actions github-actions bot added the stale Inactive for a long time. Will be closed in 7 days. label Sep 20, 2024
Copy link
Contributor

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
en This issue is in English new-feature pending We are not sure about whether this is a bug/new feature. stale Inactive for a long time. Will be closed in 7 days.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants