不同屏幕分辨率下解决echarts图鼠标焦点错位问题

你是打工人，领导优先

由于一些大局下的原因，现在很多国企客户或有国企背景的客户的领导基本都是用华为的笔记本，前端朋友们可能会遇到一个坑，就是华为的某些笔记本在2160*1440/150%分辨率下echarts图鼠标焦点错位的问题。

为了避免大家被项目经理或者产品经理刁难，给大伙分享一下我的解决方案。

首先是html，我默认大伙都是知道vue框架了，不解释我的写法了，这里核心要点是zoom这个css属性用来对echarts图的挂载元素进行缩放。

<div
    class="chart"
    ref="Chart"
    :style="{ zoom: 1 / $zoom }"
>
</div>

接下来上核心js代码，主要是两个方法：

function detectZoom (){
  // 初始化设备像素比
  let ratio = 0;
  // 获取设备屏幕参数
  let screen = window.screen;
  // 返回当前用户所使用的是什么浏览器
  let { indexOf } = navigator.userAgent.toLowerCase();

  // 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  }
  else if (~indexOf('msie')) {
  // ie的写法，虽然ie入土了，但是很多领导还是用ie，别问
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  }
  else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
  // 前两种方法都行不通的情况下就用这种朴实的写法吧！
    ratio = window.outerWidth / window.innerWidth;
  }

  // 获取的是比例是大于0小于1，所以要进行缩放，当然如果你下面的方法习惯是通过小数判断这里可以不写
  if (ratio){
    ratio = Math.round(ratio * 100);
  }

  return ratio;
}

// 需要缩放的比列
// 只在 2160* 1440的分辨率 ,并且屏幕缩放150%时，修改缩放为80%
export function setZoom (){
  // 默认缩放是1
  let value = 1;
  // 获取浏览器
  let userAgent = navigator.userAgent;
  // MAC 和 火狐不缩放，火狐无法缩放。
  if(/macintosh|mac os x/i.test(userAgent) || userAgent.indexOf("Firefox") > -1) return value;
  // 小于等于1920 的屏幕不缩放
  if((screen.width * window.devicePixelRatio) !== 2160) return value;
  // 获取屏幕缩放比
  let curZoom = detectZoom();
  // 非150% 情况下不缩放
  if(curZoom !== 150) return value;
  // 修改的缩放不强制为0.8，只是我所遇到的问题改为0.8即可
  value = 0.8;
  // 整个文档的缩放比也修改为0.8，防止你echarts图正常了，其他又出问题了
  document.documentElement.style.zoom = value;
  return value;
}

最后挂到mian.js中

import { setZoom } from '@/utils';
Object.defineProperty(Vue.prototype, '$zoom', { value: setZoom() });

顺带附赠一个介绍笔记本常见尺寸及分辨率的链接
笔记本常见的尺寸，分辨率以及缩放比例

希望大伙都能少加班，多多赚w