echarts鼠标移入焦点错位的问题

最新推荐文章于 2025-03-22 11:48:14 发布

原创最新推荐文章于 2025-03-22 11:48:14 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

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;
    }) ;
}