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

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

2025-03-11 15:03:03 前端知识 前端哥 963 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
标签
评论
发布的文章

面试题之强缓存协商缓存

2025-03-11 15:03:21

【C语言】数组篇

2025-03-11 15:03:19

正则表达式(复习)

2025-03-11 15:03:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!