browser zoom and dom zoom will cause mouse position fault in tooltip

[sheepzheng]

Version

5.1.1

Steps to reproduce

in script use document.body.style.zoom to adapt different size of screen. in echarts option add tooltip. use ctrl in browser to zoom your demo or use different size of screen to display your demo

What is expected?

use document.body.style.zoom and zoom browser will not effect mouse hover position in tooltip

What is actually happening?

you will find mouse hover event will trigger wrong part of this chart's tooltip.

[echarts-bot]

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 it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[plainheart]

Thanks for the report. Related to #14253, #13615, #13614, #13606, #12645, #11032, #9310, #8386, #8382, #8286, #6674, #6083, #3635, #3511 etc.
I drafted a solution for this issue before, but it may need some discussion. List it in the 5.x milestone.

[sheepzheng]

I fixed this problem by setting body transform.
In script add:

             var ratioX = window.innerWidth / 1920;//dev screensize echarts instance 
         document.body.style.width = '1920px';//dev screensize echarts instance 
         document.body.style.height = '1080px';//dev screensize echarts instance 
         document.body.style.transform = `scale(${ratioX},${ratioX})`;
         document.body.style.transformOrigin = `0 0`;

then tooltip works right with browser zoom and different sizes of screen

[yushouqing]

i have the same issue. browser zoom changed will cause mouse position fault.

[wmasfoe]

hello 有解决方案吗？

[hauserkristof]

+1

[lihaonanzs]

transform后鼠标移入正常,触摸屏移入还存在。

[hjmmc]

If you just fix the width, you can try this code, which is basically the same as the zoom effect

const app = document.getElementById('app')
const ratioX = window.innerWidth / 1920
app.style.width = '1920px'
app.style.height = `${window.innerHeight / ratioX}px`
app.style.transform = `scale(${ratioX},${ratioX})`
app.style.transformOrigin = `0 0`

[tarik56]

Okey so for anyone encountering this issue, here is how I fixxed it after a few hours of torture. I have noticed that echarts has an internal rerenderer that triggers on certain conditions. Though, it won't do that when your zoom has already been applied to parent DOM elements.

If your parent element, for example the html element has a predefined zoom of eg. 0.7 set by you, you will have to calculate the inverse and set the zoom on the echart parent div or the echart div itself to trigger a rerender with a valid zoom for it to handle it correctly.

Calculate the inverse with eg.: 1 / 0.7 = 1.42857

Sample:

const element = document.getElementsByTagName('html')[0];
const computedStyle = window.getComputedStyle(element);
const zoom = computedStyle.getPropertyValue('zoom');
this.setState({zoom_amount: 1 / zoom})

//if zoom = 0.7
//then zoom_amount = 1.42857
//then give the new zoom, depending on what library you use like below

<EchartDivOrParentDiv options={your_options} style={{zoom: this.state.zoom}} />

//If you give the zoom to the parent div too early without the echart being rendered
//then it might pose some scaling issues. I recommend giving the zoom directly the echart element.

Would be great to have this kind of logic naturally included in the echart code but that's one way to handle it. Hope it helps some of you.