You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/09/09 06:03:56 UTC

[GitHub] [echarts] JinJianQi opened a new issue, #17638: [Feature] How can I dispatch a wheel event programmatically?

JinJianQi opened a new issue, #17638:
URL: https://github.com/apache/echarts/issues/17638

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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] JinJianQi commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1242637445

   #949 fixed this.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] JinJianQi commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1242637932

   [#949](https://github.com/ecomfe/zrender/pull/949) fixed this ~. @Ovilia Could you help me review this. Thanks :)


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] Ovilia commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1249006483

   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?


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] JinJianQi commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1252562743

   @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:
   
   <img width="702" alt="image" src="https://user-images.githubusercontent.com/33452468/191306445-164d9582-137e-4da3-8460-9616e19fb34a.png">
   
   
   ```
   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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] Ovilia commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1241657546

   I'm not sure it works with [connect](https://echarts.apache.org/en/api.html#echarts.connect). You can have a try.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] Ovilia commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1253270657

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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] JinJianQi commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1241536050

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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1249006660

   @JinJianQi Please provide a demo for the issue either with [Official Editor](https://echarts.apache.org/examples/editor.html), [CodePen](https://codepen.io/Ovilia/pen/dyYWXWM), [CodeSandbox](https://codesandbox.io/s/echarts-basic-example-template-mpfz1s) or [JSFiddle](https://jsfiddle.net/plainheart/e46ozpqj/7/).


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] JinJianQi commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1253488485

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


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] JinJianQi commented on issue #17638: [Feature] How can I dispatch a wheel event programmatically?

Posted by GitBox <gi...@apache.org>.
JinJianQi commented on issue #17638:
URL: https://github.com/apache/echarts/issues/17638#issuecomment-1242593502

   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?
   <img width="472" alt="image" src="https://user-images.githubusercontent.com/33452468/189464595-7e3353eb-9ea2-45c2-8ca5-759dfbd49767.png">
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org