echarts关于鼠标hover图标显示不正确的问题及解决

Posted 2021-09-11 忘忘碎斌bin

问题描述：鼠标悬停的位置和图标上显示的位置不一致！

如图：

问题原因： 在写这些东西的时候，加了zoom属性。

body{
  zoom:0.85;
}

这就导致了，整个页面的内容缩小了0.85，但是echarts内的坐标轴的标注却没有跟着一起减小。

解决办法：
对包裹echarts图形的元素，放大到缩放前的比例，也就是 1/zoom的值。

.echart-box {
  zoom:1.176471
}

就可以正常显示了。