全局zomm縮放后echarts鼠標偏移的問題(鼠標觸發提示框位置有偏差)

全局zomm縮放后echarts鼠標偏移的問題

最近項目里需要做很多圖表，但所有的圖表都有一個問題，就是鼠標hover觸發位置與鼠標實際位置有偏差

舉個例子：

​ 柱狀圖鼠標移動到第二個柱子的時候卻觸發第一個柱子的tooltip提示框

最后發現問題所在是項目在main.vue里為適配不同分辨率的設備設置了全局的zoom縮放，具體看圖

解決辦法：全局縮放影響到了echarts容器，通過dom為echarts容器還原縮放 根據圖表位置合理設置 transform-origin:0 0

1.  <div :id="chartsCode" :style="`width: ${width}px; height:300px;zoom:${zoom};transform:scale(${1/zoom});transform-origin:0 0`"></div>
   

2. data() {
   	return {
   		zoom:1
   	}
   }
   

3. mounted() {
   	 this.zoom = 1 / document.body.style.zoom
        window.addEventListener("resize", () => {
         this.zoom = 1 / document.body.style.zoom
       })
   }