大屏屏幕适配

util文件：

export const echartsSize = function (size, defalteWidth = 1920) {
  const docEl = document.documentElement
  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return
  const fontSize = (clientWidth / defalteWidth)
  return Number((size * fontSize).toFixed(3))
}

// 设置系统缩放比，适配各分辨率
export function refreshScale () {
  const baseWidth = document.documentElement.clientWidth
  const baseHeight = document.documentElement.clientHeight
  const appStyle = document.getElementById('app').style
  const bodyStyle = document.getElementsByTagName('body')[0].style
  const realRatio = baseWidth / baseHeight
  const designRatio = 16 / 9
  let scaleRate = baseWidth / 1920
  if (realRatio > designRatio) {
    scaleRate = baseHeight / 1080
  }

  /**/
  appStyle.transformOrigin = 'left top'
  appStyle.transform = `scale(${scaleRate})`
  appStyle.width = `${baseWidth / scaleRate}px`
  appStyle.height = `auto`  //设置高度
  /*bodyStyle.background = `radial-gradient(#152B65, #122659 ,#030D32)`*/
  bodyStyle.background = `url('https://qiniu.haiwojiamei.com/upload/meijia/20220509/b321891391e07961b657715b8c0b55d0.jpg') no-repeat`
  bodyStyle.backgroundPosition ='center center'
  bodyStyle.backgroundSize = '100% 100%'
}
页面中

import {refreshScale} from '@/utils/util'

mounted() {
  refreshScale();
  window.onresize=function(){
    refreshScale()
  }



},