Open hhshii opened 5 years ago
Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.
Have a nice day! 🍵
It's a bad experience if the page will scroll when you do zooming on the chart. If you still want to, you can set http://echarts.apache.org/option.html#dataZoom-inside.preventDefaultMouseMove to false
@pissang I've set it in this instance
@pissang I've update the code codepen
even I set preventDefaultMouseMove
to false
,it still can 't scroll page
This problem still seems to exist on 4.2.1 (but works fine on 4.1.0), I can't scrll page when the mouse hover in grid, here is my DataZoom option:
{
type: 'inside',
zoomOnMouseWheel:'shift',
preventDefaultMouseWheel: false
}
It seems event is stopped by eventTool.stop(e.event)
@GFwer Has any solutions so far ?
@GFwer Has any solutions so far ?
No, I have to revert to the old version...
Is there any quick solution for this issue? It results in very very bad user experience!
I face also the same problem and preventDefaultMouseWheel: false
didn't help.
Any Update ?
I tried the latest version of echarts(4.5), and the problem is still exist
Any workarounds?
We are having the same issue.
+1
+1
Any update ?
+1
+1
+1
@pissang This appears to still be an issue in V5.
Preventing page scrolling, while having set a MODIFIER key for zoom - is a bad experience. At the very least this documented property should do as it describes.
Any chance we can get a fix in place?
Hi, Any luck? I also need the same functionality where, I disable mouse wheel on the chart so that the page scroll should happen. I tried preventDefaultMouseMove and various other combinations available under the dataZoom options, but none of them seem to allow page scroll.
Same here... :( http://iamferraz.com.br/gantt (click on toggle data zoom)
更新最新版本echarts应该也可以解决,但是基于现有开发内容我做了如下操作: 更新至echarts4.9.0 (https://raw.githubusercontent.com/apache/echarts/4.9.0/dist/echarts.js) 替换src/Echarts/tpl.html中script标签中内容为上面echarts.js内容即可升级完成 配置如下: dataZoom: [ { id: 'dataZoomX', xAxisIndex: [0], type:'inside', moveOnMouseMove: true,//zoom后横向滑动 preventDefaultMouseMove: false, } ]
any update? I meet the same problem
+1 Same problem!
Hello all,
I had the same problem but found the following work-around (or hack). The snipped is from Angular code; this.parentNativeElement
points to the parent element that needs to scroll.
this.chart.nativeElement.querySelector("canvas").onwheel = (event) => {
if (!event.ctrlKey) {
this.parentNativeElement.scrollBy(0, event.deltaY);
}
};
@Almar
Nice job
On a Vue.js app:
const canvas = this.$refs.nameOfTheComponent.$el.childNodes[0].children[0];
canvas.onwheel = (event) => {
if (!event.ctrlKey) {
window.scrollBy(0, event.deltaY);
}
};
@Almar @pooria-h Any similar workaround for html/javascript?
@Maazaowski, Yes, you can also solve the problem when using html/javascript. It is a workaround, so we're not solving the underlying problem. The mouse events are captured by the graph, which causes the problem. The workaround is basically a bypass – subscribing to the mouse events of the canvas element and then feeding them into the scroll container (the/a parent element of the graph).
To implement it yourself you’ll need to find a reference to the canvas element and the ‘scroll container’ (the parent element of the graph that needs to scroll). Your code should look something like the following (please mind that I did not test it).
Let scrollContainer = document.querySelector(“div#scrollcontainer”)
Let canvasElement = scrollContainer.querySelector(“canvas”);
canvasElement.onwheel = (event) => {
if (!event.ctrlKey) {
scrollContainer.scrollBy(0, event.deltaY);
}
};
Problem still there in v 5.3.1 !
Problem still there in v 5.3.1 !
+1 in 5.3.0
One way to solve it is to disable zoom entirely by setting zoomLock: true
.
For mobile devices you will also need to set preventDefaultMouseMove: false
for whatever reason.
I wanted to share my workaround for this issue.
zoomLock: true
window
for keyup
and keydown
zoomLock: false
while a specific key is pressedzoomLock: true
when the key is released againThis can be done with vanilla JS or any ui library.
Here you can see how it's done in Angular: https://stackblitz.com/edit/angular-ngx-echarts-qd5up4?file=src/app/app.component.ts
still not solve hh
Fix, please
Please fix orz
I used @Almar 's workaround (thanks BTW), with some modifications to adapt it to my case, but I really don't think we should be doing this.
Problem still there in v 5.3.4 !
setting an inside dataZoom AND expecting a page scroll when scrolling inside chart - doesn't make much sense. Got to choose one or the other, can't have both simultaneously.
When is the plan to fix this issue? Thanks.
It has been almost five years and still exists.
Version
4.2.1-rc.3
Reproduction link
https://codepen.io/gfwer/pen/maJGNz
Steps to reproduce
zoomOnMouseWheel:'shift'
)What is expected?
page scroll
What is actually happening?
scroll event may prevent , I can 't scroll page when I move mouse over the chart grid