1、问题：

echarts图表鼠标悬停时图例错位的解决方案(echarts地图鼠标移入颜色设置) 第1张

当页面body拥有zoom属性之后，鼠标划过echarts图表时，触发位置就不正常

2、原因分析：

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

3、解决办法：

给echarts再加上 zoom、transform：scale、transform-origin，这三个属性，即：既然body缩放了，那么渲染echarts图表的p再给他放大回去就好了

<p
  id="columnChart"
  :style="{
    width: '100%',
    height: '100%',
    zoom: `${1 / zoom}`,transform: `scale(${zoom})`,transformOrigin: '0 0',
  }"
></p>
//获取zoom的方法：
zoom.value = document.body.style.zoom;

4、注意：

如果你的echarts图表容器设置的固定的宽高，那么在设置zoom之后会出现图表被放大失真的情况，所以需要给图表设置百分比的宽高。

到此这篇关于echarts图表鼠标悬停时图例错位的解决方案的文章就介绍到这了,更多相关echarts鼠标悬停 图例错位内容请搜索酷瑞百科以前的文章或继续浏览下面的相关文章，希望大家以后多多支持酷瑞百科！

☆未收藏(0)