【echarts】关于body.style.zoom修改后鼠标悬停错位问题

关于body.style.zoom修改后鼠标悬停错位问题

主要是使用了body.style.zoom粗暴的来做兼容引起的后续问题 ：）

当然ui布局兼容的问题还有更好的解决办法，这里先简单说一下body.style.zoom

 mounted() {

    this.$nextTick(() => {

      var scale = document.documentElement.clientWidth / 1960; // 分母——设计稿的尺寸

      console.log(scale)

      document.body.style.zoom = scale;

    });

  },

1、绘制id的节点嵌套一个div

<div class="echart_box">
    <div id="pie1" class="pie"/>
</div>

2、假设整个浏览器zoom放大了2倍，

获取绘制图表的节点对样式zoom进行缩小0.5后

在transform放大2倍。

节点0.5的缩小是为了让鼠标悬停错位回归正常。

transform修改2倍是为了整体回归图形在当前浏览器zoom2倍情况下的大小。

this.$nextTick(() => {
    var scale = Number(100 / this.webZoom.detectZoom());
    var dom = document.