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

<template>
  <div ref="chart" class="echarts-con" :style="{'zoom': zoom}"></div>
</template>

<script>
import * as echarts from 'echarts'
// import { EleResize } from '@/utils/esresize'
export default {
  props: {
    chartData: {
      type: Object,
      required: true,
    },
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.initChart()
      },
    },
  },
  data() {
    return {
      chart: null,
      zoom: 1,
    }
  },

  methods: {
    initChart() {
      // let chartDom = document.getElementById('chart')
      let chartDom = this.$refs['chart']
      this.chart = echarts.init(chartDom)
      this.chartData && this.chart.setOption(this.chartData, true)

      this.chart.resize()
    },
  },
  mounted() {
    //这部分是解决问题的重点，其他都是常规的封装。
    this.zoom = 1 / document.body.style.zoom
    window.addEventListener('resize', () => {
      this.zoom = 1 / document.body.style.zoom
    })
    /* 图表初始化 */
    this.$nextTick(() => {
      this.initChart()
    })
  },
}
</script>

<style scoped>
.echarts-con {
  min-height: 320px;
  width: 100%;
}
</style>