數據大屏能夠在大部分的分辨率下自適應

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中進行相乘，如此圖表中的文字和寬高也能自適應