关于echarts鼠标悬浮位置不准确的问题

当我们在为了适配一些小屏幕笔记本为了优化显示效果进行屏幕缩放后，会做一些适配性处理，比如使用transform的scale处理，亦或者使用devicePixelRatio处理自动化处理缩放，但是有时候会在项目中有echarts图表的时候会导致echarts图表上悬浮位置不准确

window.devicePixelRatio方案伪代码如下：

<template>
   <div class="xxx" :style="{zoom: 1/zoom}">
   </div>
</template>
 
<script>
export default {
  name: 'App',
  created () {
    const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    if (devicePixelRatio !== 1) {
    // 如果在笔记本中用IE浏览器打开 则弹出提示
      if (!! window.ActiveXObject || 'ActiveXObject' in window) {
        alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
      } else {
        const c = document.querySelector('body')
        c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
      }
    }
  }
}
</script>复制

如何解决这个问题呢，那是因为开发者直接放大了body，如果只在body添加zoom缩放页面，会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom，
在使用图表的父组件也同步放大即可。

utils等工具函数文件中写个获取body zoom属性的函数：

// 获取当前body下的zoom的值
export const zoom = () => {
  const zoom = document.getElementsByTagName('body')[0].style.zoom
  return zoom
}复制

组件页面：

import { zoom } from '@/utils/toolsFuncxxxx'
export default {
  components: { },
  data () {
    return {
      zoom: '1'
    }
  },
  mounted () {
    // 备注，如果只在body添加zoom缩放页面，会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom
    // 由于挂载之后，才会有dom节点，所以最好在此时调用zoom()
    this.$nextTick(() => {
      this.setZoom()
      window.addEventListener('resize', this.setZoom)
    })
  },
  methods: {
    setZoom () {
      this.zoom = zoom()
    }
  } //methods
}复制

这样使用addEventListener就可以动态监听window的resize事件然后自动适配大小了

2.根据调整页面的canvas元素进行调整

mounted () {
    // 备注，如果只在body添加zoom缩放页面，会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom
    // 由于挂载之后，才会有dom节点，所以最好在此时调用zoom()
    this.$nextTick(() => {
      this.setZoom()
      window.addEventListener('resize', this.setZoom)
    })
  },
 
  methods: {
    setZoom () {
      this.zoom = zoom()
      // 处理缩放导致canvas定位异常
      var size = window.screen.width / 1920
      document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / size + '}')
      document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + size + ')}')
      document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}')
    }
  }复制

现在流行使用‘postcss-px2rem’配合‘px2rem-loader’的方案来解决，px2rem顾名思义是将基础px转换为rem来显示视图内容。后面我会专门写一篇关于这种方案的使用

详见另一篇技术博客：关于Vue项目下页面自适应pc端不同分辨率尺寸的方法