首页 前端知识 echarts鼠标移入焦点错位的问题

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

2024-05-25 09:05:51 前端知识 前端哥 874 789 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9412.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!