[echarts]echarts图表悬停时错位的原因以及解决方案

问题：比如扇形图，点击的明明是蓝色区域，触发的却是黄色区域；有时可能不明显，因为只有在划到扇形的最边边时才会出现这个问题。
再比如折线图，如果设置了显示指示线，会发现指示线显示位置和操控的箭头永远对不上去。

原因：这都是因为设置了zoom，如果你在你的项目中设置了zoom以达到缩放比例的适配，在使用echarts图表时就会出现错位的问题。

解决方法：给你的echarts图表容器也设置zoom：zoom: 1 / 给body设置的zoom
但是要注意，如果你的echarts图表容器设置的固定的宽高，那么在设置zoom之后会出现图表被放大失真的情况，所以需要给图表设置百分比的宽高。

代码如下：

<template>
  // 图标容器， zoom是我获取的body的zoom，因为每种分辨率下body的zoom都是不一样的，所以不能写死，必须动态获取
  <div :id="chart" :style="{ width: '100%', height: '100%', zoom: 1/zoom }"></div>
</template>
<script>
import { zoom } from './common.js'
export default {
  data() {
	return {
	  zoom: '1'
	}
  },
  mounted() {
	// 由于挂载之后，才会有dom节点，所以最好在此时调用zoom()
	this.zoom = zoom()
  }
}
</script>

这是vue2的获取zoom的方式，比如写个方法引入，不然会报错；

// 获取当前body下的zoom的值
export const zoom = () => {
  let zoom = document.getElementsByTagName('body')[0].style.zoom
  return zoom
}

这是vue3的，直接赋值，然后引入zoom即可

// 获取当前body下的zoom的值
export const zoom =  document.getElementsByTagName('body')[0].style.zoom