C/C++教程

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

本文主要是介绍全局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
    })
}
这篇关于全局zomm缩放后echarts鼠标偏移的问题(鼠标触发提示框位置有偏差)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航