前端大屏适配方案（总结）

本文收集了网上常见的大屏适配方案，仅供参考。

方法1： 使用插件： vue2 请使用v-scale-screen@1.0.0版本

import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

<v-scale-screen width="1920" height="1080">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>

方法2： 利用scale函数

export default {
  mounted() {
    //初始化自适应
    this.handleScreenAuto()
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => this.handleScreenAuto()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    //数据大屏自适应函数
    handleScreenAuto() {
      const designDraftWidth = 1920 //设计稿的宽度
      const designDraftHeight = 1080 //设计稿的高度
      //根据屏幕的变化适配的比例
      const scale =
        document.documentElement.clientWidth / document.documentElement.clientHeight <
        designDraftWidth / designDraftHeight
          ? document.documentElement.clientWidth / designDraftWidth
          : document.documentElement.clientHeight / designDraftHeight
      //缩放比例
      document.querySelector(
        '#screen'
      ).style.transform = `scale(${scale}) translate(-50%)`
    },
  },
}
// id=screen中放大屏展示内容， 可以通过mixins混入引入

方法3： flexiable + rem

1. https://github.com/amfe/lib-flexible/blob/2.0/index.js 下载 flexible.js 文件

   var rem = docEl.clientWidth / 10 // rem值 = px值*10/设计图宽度

2. 安装插件 px2rem插件, 并配置，假设设计稿的尺寸为 1980， 则配置 rem = 198px

3. echarts 图表自适应

   • echarts 默认使用的 px 为单位，且不能在 echarts 配置中携带 rem 单位，怎么办？— 添加函数

   function fontSize(res, defaultWidth = 3840) {
     let docEl = document.documentElement,
       clientWidth =
         window.innerWidth ||
         document.documentElement.clientWidth ||
         document.body.clientWidth
     if (!clientWidth) return
     // 此处的3840 为设计稿的宽度，记得修改！
     let fontSize = clientWidth / defaultWidth 
     return res * fontSize
   }
   // 使用，在需要的位置用函数包裹即可
   fontSize: fontSize(30)
   

   • 监听屏幕尺寸变化，及时重绘图表

   window.addEventListener('resize', function () {
     chart.resize()
   }) // chart 为注册绑定的echarts对象
   

方法4： 使用DataV的全屏容器 + flex + 百分比布局

<dv-full-screen-container>content</dv-full-screen-container>

• 建议在全屏容器内使用百分比搭配 flex 进行布局，以便于在不同的分辨率下得到较为一致的展示效果。

• 使用前请注意将 body 的 margin 设为 0，否则会引起计算误差，全屏后不能完全充满屏幕。

方法5： vw + vh

1. 创建极端 vw 和 vh 的样式函数

   // utils.scss
   // 使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
   @use 'sass:math';
   
   //默认设计稿的宽度
   $designWidth: 1920;
   //默认设计稿的高度
   $designHeight: 1080;
   
   //px转为vw的函数
   @function vw($px) {
     @return math.div($px, $designWidth) * 100vw;
   }
   
   //px转为vh的函数
   @function vh($px) {
     @return math.div($px, $designHeight) * 100vh;  // math.div(x, y) = x / y
   }
   

2. 在 vue.config.js 中进行全局注册

 css: {
    loaderOptions: {
      //全局配置utils.scss,详细配置参考vue-cli官网
      sass: {
        additionalData: `@import "@/assets/styles/utils.scss";`, // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
      },
    },
  },

3. 在 xx.vue 中使用

chart-wrapper {
    width: vw(300); // 300 / 1980
    height: vh(200);
    font-size: vh(16); // 16 / 1080
    background-color: black;
  }

关于echart中字体大小–适配屏幕尺寸

<template>
  <div class="linechart" ref="line"></div>
</template>
<script>
import adaptFontSize from '@/utils/fontSIze'
export default {
  name: 'linechart',
  mixins: [adaptFontSize],
  mounted() {
    this.initChart()
    this.adapterChart()
    
    window.addEventListener('resize', () => {   // 屏幕尺寸变化时，重新渲染
    this.adapterChart()
    })
  },
  
   beforeDestoryed() {
    // 组件销毁前移除监听,防止内存泄露
    window.removeEventListener('resize')
  },
  
  methods: {
	// 字体大小适配代码！！！
    transfomrFontSize(val) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth
      if (!clientWidth) return
      let radio = clientWidth / 1920
      return radio * val
    },
  },
    initChart() {
      /*大屏*/
      this.myChart = this.$echarts.init(this.$refs.line)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '0%',
          right: '10%',
          top: '15%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          name: this.xName,
        },
        textStyle: {
          //图例文字的样式
          color: 'red',
        },
        yAxis: {
          name: this.yName,
          nameLocation: 'end',
          nameTextStyle: {
            color: 'white',
          },
          textStyle: {
            color: 'white',
          },
          type: 'value',
          axisLine: { show: true },
          splitLine: { show: true, lineStyle: { type: 'dashed' } },
        },
        series: [
          {
            type: this.type,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
              },
            },
            data: this.yData,
          },
        ],
      }

      option && this.myChart.setOption(option)
    },
    adapterChart() {
      let option = {
        textStyle: {
          fontSize: this.transfomrFontSize(20),
        },
      }
      this.myChart.setOption(option)
      this.myChart.resize() // 必须调用自身的resize方法!!!!!
    },
  },
}
</script>

• 如果大屏中用到的都是需要自适应的图表，建议使用mixins混入处理，注意混入规则。

混入规则：

1. data: mixins 中的 data 会合并到 data 中，有冲突的话，data 中数据覆盖 mixins 中的数据。
2. 钩子函数：合并执行，先执行 mixins 中的钩子函数。
3. ​​methods​​、​​components​​ 和 ​​directives​​: 有冲突时，组件内会覆盖 mixins 中的 ​。​​​