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

今天要分享的是前两天在项目中遇到一个问题:页面中有金额比例图表,前端用的是Echarts实现的,测试同学在饼图中鼠标悬停时没有显示tooltip信息窗。如下图所示:

但是我在自己的电脑上的本地环境和测试环境均测试没有问题。后来沟通后发现测试同学的电脑缩放比例不是100%,而是125%。然后我将我的浏览器在右上角的三个点对应的下拉框中设置缩放为125%,发现如上图,确实存在鼠标悬浮时无法展示弹窗。

后来我在其他的前端工程中通过Echarts画了一个饼图,然后调整浏览器的缩放比例125%,惊奇地发现没有问题!如下图所示:

很神奇,这是为什么呢?后来就自己去查资料,最终找到了原因所在:不展示是因为前端工程中通过zoom做了自适应,当我们调整浏览器缩放时,body元素会被添加一个zoom属性,如下图:

缩放比例为125%


*

缩放比例为150%

不同的缩放比例,zoom的值也不同。当body元素style中加上zoom后,鼠标滑过Echarts图表时,触发位置发生了变化,导致无法展示tooltip

解决方案

为Echarts图表容器再加上 zoomtransform:scaletransform-origin这三个属性即可。原理:body元素被缩放了,那么渲染echarts图表的容器我们需要再给他缩放回去就好了,这个问题类似之前项目中使用到了地图,然后地图中有点位,鼠标悬浮展示点位信息。当页面通过zoom缩放后,弹窗位置也是出现了错位,这两个问题的原因是一样的,同样的解决方案也是一样的。无论外层如何缩放,内部元素容器要缩放回1/zoom即可。

代码如下
vue 复制代码
<template>
	<div
		class="pie-chart"
		:style="{
			zoom: `${1 / zoomValue}`,
			transform: `scale${zoomValue}`,
			transformOrigin: '0,0',
		}"
		ref="pieChart"
	></div>
</template>

<script>
import * as echarts from "echarts";

export default {
	name: "pieChart",
	components: {},
	props: {
		chartOption: {
			type: Object,
			required: true,
		},
	},
	data() {
		const bodyZoomVal = document.body.style.zoom;
		return {
			zoomValue: bodyZoomVal,
		};
	},
	watch: {
		chartOption: {
			handler() {
				if (this.chartOption) this.initChart();
			},
			deep: true,
		},
	},
	computed: {},
	methods: {
		initChart() {
			const chartDom = this.$refs.pieChart;
			const myChart = echarts.init(chartDom);
			myChart.setOption(this.chartOption);
		},
		handleResize() {
			this.$nextTick(() => {
				const chartDom = this.$refs.pieChart;
				const myChart = echarts.getInstanceByDom(chartDom);
				myChart.resize();
			});
		},
	},
	created() {},
	mounted() {
		window.addEventListener("resize", this.handleResize);
		if (this.chartOption) this.initChart();
	},
};
</script>

<style lang="scss" scoped>
.pie-chart {
	height: 100%;
	width: 100%;
}
</style>
注意

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

相关推荐
恋猫de小郭21 分钟前
Flutter Web 正式移除 HTML renderer,只支持 CanvasKit 和 SkWasm
前端·flutter·html
杨荧1 小时前
【开源免费】基于Vue和SpringBoot的图书进销存管理系统(附论文)
前端·javascript·vue.js·spring boot·spring cloud·java-ee·开源
:mnong1 小时前
从EXCEL表格到WEB TABLE的实践
前端
○陈1 小时前
js面试题|[2024-12-10]
java·前端·javascript
易和安2 小时前
JS进阶DAY5|本地存储
开发语言·javascript·ecmascript
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_044】5.1 饼图和环形图的创建(四):数据标签的添加
前端·javascript·信息可视化·数据可视化·d3.js·d3环形图·d3饼图
Samson Bruce2 小时前
【创建模式-蓝本模式(Prototype Pattern)】
开发语言·javascript·原型模式
Eric_见嘉2 小时前
翻遍 Vite 文档,教你面试官都不会的 3 种前端部署方案
运维·前端·serverless
浪遏2 小时前
对比学习 apply, call, 和 bind 👀👀👀
前端·javascript·面试
常常不爱学习2 小时前
CSS元素宽高特点、类型转化、显式和隐藏(display)
前端·javascript·css