解决办法:全局缩放影响到了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(); }; } },
复制