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

今天要分享的是前两天在项目中遇到一个问题：页面中有金额比例图表，前端用的是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即可。

  代码如下

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

原文地址：https://blog.csdn.net/dfc_dfc/article/details/144385420

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！