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

风铃又响了

已于 2023-06-05 11:01:33 修改

阅读量1.5k

点赞数 1

文章标签： echarts 前端 javascript

于 2023-06-05 09:22:41 首次发布

本文链接：https://blog.csdn.net/zhj1329000/article/details/131041352

版权

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