1、在页面存在缩放的时候,echarts鼠标移入焦点错位的问题
当页面body拥有zoom属性之后,鼠标划过echarts图表时,触发位置就不正常
2、原因:
因为设置了zoom,如果你在你的项目中设置了zoom以达到缩放比例的适配,在使用echarts图表时就会出现错位的问题
3、解决:
给echarts再加上 zoom、transform:scale、transform-origin,这三个属性,即:既然body缩放了,那么渲染echarts图表的div再给他放大回去就好了
//html
<div id="echartsMain" ref="main" :style="`zoom:${zoom};transform:scale(${1/zoom});transform-origin:0 0`" ></div>
//js
mounted() {
//全局缩放影响echarts容器,焦点偏移
this.zoom = 1/document.body.style.zoom;
window.addEventListener("resize",() => {
this.zoom = 1/document.body.style.zoom;
}) ;
}