Skip to content

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

@jianqi-jin

Description

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

Activity

added
enThis issue is in English
pendingWe are not sure about whether this is a bug/new feature.
on Sep 9, 2022
jianqi-jin

jianqi-jin commented on Sep 9, 2022

@jianqi-jin
Author

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

Ovilia

Ovilia commented on Sep 9, 2022

@Ovilia
Contributor

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

jianqi-jin

jianqi-jin commented on Sep 10, 2022

@jianqi-jin
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

jianqi-jin commented on Sep 10, 2022

@jianqi-jin
Author

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

Ovilia

Ovilia commented on Sep 16, 2022

@Ovilia
Contributor

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

echarts-bot commented on Sep 16, 2022

@echarts-bot

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

jianqi-jin

jianqi-jin commented on Sep 20, 2022

@jianqi-jin
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

Ovilia commented on Sep 21, 2022

@Ovilia
Contributor

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

jianqi-jin

jianqi-jin commented on Sep 21, 2022

@jianqi-jin
Author

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

github-actions

github-actions commented on Sep 20, 2024

@github-actions
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.

added
staleInactive for a long time. Will be closed in 7 days.
on Sep 20, 2024
github-actions

github-actions commented on Sep 28, 2024

@github-actions
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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enThis issue is in Englishnew-featurependingWe are not sure about whether this is a bug/new feature.staleInactive for a long time. Will be closed in 7 days.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @Ovilia@jianqi-jin

      Issue actions

        [Feature] How can I dispatch a wheel event programmatically? · Issue #17638 · apache/echarts