首页 前端知识 全局缩放后echarts鼠标偏移的问题(鼠标触发提示框位置有偏差,中心点偏移的问题)

全局缩放后echarts鼠标偏移的问题(鼠标触发提示框位置有偏差,中心点偏移的问题)

2025-03-11 15:03:03 前端知识 前端哥 971 572 我要收藏

解决办法:全局缩放影响到了echarts容器,通过dom为echarts容器还原缩放 根据图表位置合理设置 transform-origin:0 0

<div :id="chartsCode"
:style="`width:300px;
height:300px;
zoom:${zoom};
top:${100/zoom}px;
left:${100/zoom}px;
transform:scale(${1/zoom});
transform-origin:0 0`">
</div>
复制

在data中定义一个zoom值

data() {
return {
zoom:1
}
}
复制

1.在mounted中加入(动态获取zoom)

mounted() {
this.zoom = 1 / document.body.style.zoom
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom
})
}
复制

2.或者在mounted中加入(通过窗口自适应代码,动态获取zoom)

mounted() {
// 窗口自适应
let that = this;
if (window.screen.width > 1200) {
function bodyScale() {
let deviceWidth = document.documentElement.clientWidth;
let scale = deviceWidth / 1920;
document.body.style.zoom = scale;
// 地图适配缩放比例
that.zoom = 1 / document.body.style.zoom;
}
window.onload = window.onresize = function () {
bodyScale();
};
}
},
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23309.html
标签
评论
还可以输入200
共0条数据,当前/页
会员中心 联系我 留言建议 回顶部
复制成功!