今天要分享的是前两天在项目中遇到一个问题:页面中有金额比例图表,前端用的是Echarts实现的,测试同学在饼图中鼠标悬停时没有显示tooltip信息窗。如下图所示:
但是我在自己的电脑上的本地环境和测试环境均测试没有问题。后来沟通后发现测试同学的电脑缩放比例不是100%,而是125%。然后我将我的浏览器在右上角的三个点对应的下拉框中设置缩放为125%
,发现如上图,确实存在鼠标悬浮时无法展示弹窗。
后来我在其他的前端工程中通过Echarts画了一个饼图,然后调整浏览器的缩放比例125%,惊奇地发现没有问题!如下图所示:
很神奇,这是为什么呢?后来就自己去查资料,最终找到了原因所在:不展示是因为前端工程中通过zoom
做了自适应,当我们调整浏览器缩放时,body
元素会被添加一个zoom
属性,如下图:
缩放比例为125%
*
缩放比例为150%
不同的缩放比例,zoom的值也不同。当body元素style中加上zoom
后,鼠标滑过Echarts
图表时,触发位置发生了变化,导致无法展示tooltip
。
解决方案
为Echarts图表容器再加上 zoom
、transform:scale
、transform-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之后会出现图表被放大失真的情况,所以需要给图表设置百分比的宽高。