Vue大屏可视化适配方案

方案一: 使用css中的transform

优点:

1. 代码量少，适配简单
2. 一次处理后不需要在各个图表中再去单独适配

缺点:

1. 当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
2. 当缩放比例过大时候，字体会有一点点模糊
3. 当缩放比例过大时候，事件热区会偏移。 以下三种方法的原理就是利用transform进行缩放(等比例或不等比例)

1. 下面的这个是可以适配所有的屏幕，但是会存在宽很长，高很短的情况(不等比例)

/**
 * 大屏自适应
 * @param {*} appRef  大屏的容器
 * @returns 
 */
export function useMain(appRef) {
    // 大屏初始宽高
    const baseWidth = 1920
    const baseHeight = 1080
    // 初始比例
    const scale = {
      width: 1,
      height: 1
    }
    // 计算比例
    function calcRate() {
      scale.width = ((window.innerWidth) / baseWidth).toFixed(5)
      scale.height = ((window.innerHeight) / baseHeight).toFixed(5)
      appRef.style.transform = `scale(${scale.width},${scale.height})`
    }
    // 做一个防抖效果
    let timer = null
    function resize() {
      if(timer) {
        clearTimeout(timer)
      } 
      timer = setTimeout(() => {
        calcRate()
      },200)
    }
  
    window.addEventListener('resize', resize)
  
    return {
        calcRate
    }
  }

2. 下面的js会返回保持原大屏的比例，但是会出现白边的问题(等比例)

/**
 * 大屏自适应
 * @param {*} appRef  大屏的容器
 * @returns 
 */
export function useMain(appRef) {
    // 大屏初始宽高
    const baseWidth = 1920
    const baseHeight = 1080
    // 初始比例
    const baseScale = baseWidth / baseHeight
    // 计算比例
    let scale = 1
    function calcRate() {
      const width = window.innerWidth
      const height = window.innerHeight
      if((width/height) > baseScale) {
        scale = height / baseHeight
    } else {
        scale = width / baseWidth
      }
      appRef.style.transform = `scale(${scale},${scale})`
    }
    // 做一个防抖效果
    let timer = null
    function resize() {
      if(timer) {
        clearTimeout(timer)
      } 
      timer = setTimeout(() => {
        calcRate()
      },200)
    }
  
    window.addEventListener('resize', resize)
  
    return {
        calcRate
    }
  }

3. 使用v-scale-screen插件 具体使用方法请移步官网查看
   https://gitcode.com/gh_mirrors/vs/v-scale-screen/blob/v3.0/README.zh_CN.md

方案二: 使用rem,font-size

方案三: 使用vw单位