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即可。

    代码如下
    <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之后会出现图表被放大失真的情况,所以需要给图表设置百分比的宽高。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值