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

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

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

&lt;v-scale-screen width="1920" height="1080"&gt;
  &lt;div&gt;
    &lt;v-chart&gt;....&lt;/v-chart&gt;
    <v-chart&gt;....</v-chart&gt;
    <v-chart&gt;....</v-chart&gt;
    <v-chart&gt;....</v-chart&gt;
    <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： flexi a ble + rem

https://github.com/amfe/lib–flexible/blob/2.0/index.js 下载 flexi ble.js 文件

var rem = docEl.clientWidth / 10 // rem值 = px值*10/设计图宽度
安装插件 px2rem插件, 并配置，假设设计稿的尺寸为 1980，则配置 rem = 198px

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

创建极端 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
}

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

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

在 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 &amp;&amp; this.myChart.setOption(option)
    },
    adapterChart() {
      let option = {
        textStyle: {
          fontSize: this.transfomrFontSize(20),
        },
      }
      this.myChart.setOption(option)
      this.myChart.resize() // 必须调用自身的resize方法!!!!!
    },
  },
}
</script>

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

混入规则：

data: mixins 中的 data 会合并到 data 中，有冲突的话，data 中数据覆盖 mixins 中的数据。

钩子函数：合并执行，先执行 mixins 中的钩子函数。

methods、components 和 directives: 有冲突时，组件内会覆盖 mixins 中的。