本文已参加「新人创作礼」活动，一起开启掘金创作之路

一、Echarts图表分辨率自适应方案

1. 为什么要做自适应？

由于echarts生成的图表是<canvas>或者<svg>，所以全局或单页面配置自适应的方案无法对echarts生成的图表起效

2. 自适应实现思路

(1)根据视口宽度的变化去计算echarts中数值的大小

(2)需确定一个基准的视口宽度，通常为1920

(3)编写换算函数

(4)替换echarts的options中有关大小需要做自适应的内容

3. 函数示例

// calculate-size.js
// 获取当前视口宽度
let nowClientWidth = document.documentElement.clientWidth;
//编写换算函数
export function nowSize(val,defaultWidth=1920){
    return val * (nowClientWidth/defaultWidth);
}

4. 使用示例

以opetions.legend属性为例

legend: {
   data: ['例子1', '例子2'],
   align: 'left',
   top: nowSize(18),
   right: nowSize(20),
   textStyle: {
     color: "#c1c5cd",
     fontSize:nowSize(13)
   },
   itemWidth: nowSize(10),
   itemHeight: nowSize(10),
   itemGap: nowSize(12)
}

二、Vue项目PC端分辨率自适应方案(整体&单页面)

1. 整个vue前端项目分辨率自适应方案

通过postcss-px2rem及px2rem-loader插件实现

(1) 安装postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

(2) 在utils目录下新建配置文件px2rem.js

// px2rem.js
// html页面根节点字体大小为16px
const baseSize = 16;
function px2rem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 设置页面根节点字体大小，最大放缩比例默认为2，可调节
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + 'px';
}
// 首次运行自适应
px2rem();
// 窗口变化时进行自适应
window.onresize = function () {
  px2rem();
};

(3) 在main.js中引入

// main.js
import './utils/px2rem'

(4) 配置vue.config.js

// vue.config.js
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
  // 基准字体大小baseSize，需要和px2rem.js中相同
  remUnit: 16
})
// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

2. vue项目单页面自适应(只作用于单个页面)

编码时用rem替代px来编写，通过设置html的根目录字体大小进行自适应

(1) 在methods中编写动态改变根节点font-size的函数

methods:{
  //屏幕自适应函数
  fitScreen() {
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    let htmlDom = document.getElementsByTagName("html")[0];
    htmlDom.style.fontSize = 16 * (htmlWidth / 1480) + "px";
  }
}

（2）在mounted中加监听窗口大小改变的方法

mounted() {
  this.fitScreen();
  let sizeFun = () => {
    this.fitScreen();
  };
  // 窗口变化时计算
  window.addEventListener('resize', sizeFun);
}

(3) 销毁页面时重置根节点字体大小，确保其他页面正常展示

let htmlDom = document.getElementsByTagName('html')[0];
htmlDom.style.fontSize = '16px';

【数据大屏】分辨率自适应的两种方案(vue&echarts)