echarts图表鼠标悬停时图例错位的解决方案

发布时间：2024-05-15 15:03:08 作者：佚名

我要评论

当页面body拥有zoom属性之后，鼠标划过echarts图表时，触发位置就不正常，这篇文章主要介绍了echarts图表鼠标悬停时图例错位的解决方案,需要的朋友可以参考下

1、问题：

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

2、原因分析：

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

3、解决办法：

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

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

4、注意：

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

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

Tag：ECharts 鼠标悬停图例错位

CSS3媒体查询简介与使用方法示例详解

CSS3媒体查询是一种用于根据设备的特性和特定条件来应用不同样式的CSS技术，媒体查询使用@media规则来定义，本文给大家介绍CSS3媒体查询简介与使用方法，感兴趣的朋友一起

2024-06-14

CSS3的常用样式属性和用法案例详解

CSS是一种强大的样式表语言，可以为网页添加各种各样的样式和效果,而CSS3作为CSS的第三个版本，引入了许多新的样式属性和用法，为我们提供了更多创意和自由度,本文将介绍一

2024-06-11

CSS3 max/min-content及fit-content、fill-available值的案例详解

在CSS3中对width的值多了几个值：fill-available,max-content,min-content, 以及fit-content，本文通过案例讲解CSS3 max/min-content及fit-content、fill-available值的相

2024-06-11
CSS3 grid 布局的简单使用示例详解

这篇文章主要介绍了CSS3 grid 布局的简单使用示例详解,可以选择使用 absolute 绝对定位为这些块元素定位，也可以使用多个盒子嵌套来实现,结合实例代码给大家介绍的非常详细

2024-06-04
CSS3媒体查询与页面自适应示例详解

媒体查询可以根据设备特性，如屏幕宽度、高度、设备方向（横向或纵向），为设备定义独立的CSS样式表，这篇文章主要介绍了CSS3媒体查询与页面自适应,需要的朋友可以参考下

2024-05-29
ElementUl 中时间线Timeline 的样式优化方案

这篇文章主要介绍了ElementUl 中时间线Timeline 的样式优化方案,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

2024-05-29
css3中的var()函数详解

在CSS3中，var()函数是一个用于插入CSS自定义属性（也称为CSS变量）的值的函数,它允许你在样式表中定义可重用的值，并在多个地方引用它们，从而使你的CSS更加灵活和可维护

2024-05-21