1、问题：
当页面body拥有zoom属性之后，鼠标划过echarts图表时，触发位置就不正常
2、原因分析：
这都是因为设置了zoom，如果你在你的项目中设置了zoom以达到缩放比例的适配，在使用echarts图表时就会出现错位的问题。
3、解决办法：
给echarts再加上 zoom、transform：scale、transform-origin，这三个属性，即：既然body缩放了，那么渲染echarts图表的div再给他放大回去就好了
|
1 2 3 4 5 6 7 8 9 10 |
<div id="columnChart" :style="{ width: '100%', height: '100%', zoom: `${1 / zoom}`,transform: `scale(${zoom})`,transformOrigin: '0 0', }" ></div> //获取zoom的方法： zoom.value = document.body.style.zoom; |
4、注意：
如果你的echarts图表容器设置的固定的宽高，那么在设置zoom之后会出现图表被放大失真的情况，所以需要给图表设置百分比的宽高。
原文链接：
