数据大屏能够在大部分的分辨率下自适应

1.创建flexible.js文件

import store from '@/store'
//设置基础字号
const baseSize = 16
//设置基本缩放比
let scaleRate = 1;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  
  scaleRate = scale
  if (scaleRate > 1.5) {
    store.commit("newScreen/setScaleRate", 1.5)
  } else if (scaleRate < 0.5) {

    store.commit("newScreen/setScaleRate", 0.5)
  } else {
    store.commit("newScreen/setScaleRate", scaleRate)
  }
  // 设置页面根节点字体大小
  if (document.documentElement.clientWidth > 2880) {
    document.documentElement.style.fontSize = 14 + 'px'
  } else {
    document.documentElement.style.fontSize = (baseSize * scale) + 'px'
  }
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

2.在main.js中引用

import '@/utils/flexible.js'

3.把px转换成rem

4.大屏中会有使用echarts，把scaleRate存放在vuex中，然后再echarts中进行相乘，如此图表中的文字和宽高也能自适应