前端大屏适配（Vue2+ECharts）+ECharts封装

使用flexible.js+rem实现字体自适应

①flexible.js用于根据屏幕尺寸变化动态调整根元素的字体大小：

(function flexible(window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1
   
    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = (16 * dpr) + 'px'
      }
      else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
    }
    setBodyFontSize();
   
    function setRemUnit() {
      var rem = docEl.clientWidth / 24
      docEl.style.fontSize = rem + 'px'
    }
   
    setRemUnit()
   
    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })
   
    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement('body')
      var testElement = document.createElement('div')
      testElement.style.border = '.5px solid transparent'
      fakeBody.appendChild(testElement)
      docEl.appendChild(fakeBody)
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines')
      }
      docEl.removeChild(fakeBody)
    }
  }(window, document))
   

②rem是相对于根元素的字体大小单位：使用VSCode插件并设置基准值（1920设置80）；

③main.js中引入：

import './utils/flexible';

ECharts

①echarts封装：

<template>
    <div :id="id" :style="style"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'MyEcharts',
    data() {
        return {
            chart: ''
        }
    },
    props: {
        id: {
            type: String
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        },
        option: {
            type: Object,
            default() {
                return {

                }
            }
        }
    },
    computed: {
        style() {
            return {
                width: this.width,
                height: this.height
            }
        }
    },
    watch: {
        option: {
            handler(newVal, oldVal) {
                if (this.chart) {
                    this.chart.setOption(newVal)
                } else {
                    this.init();
                }
            },
            deep: true
        }
    },
    methods: {
        init() {
            this.chart = echarts.init(document.getElementById(this.id))
            this.chart.setOption(this.option)
            window.addEventListener("resize", this.chart.resize);
        }
    },
    mounted() {
        this.init()
    },
}
</script>

②echarts中的px转换成rem：

export function fontSizeRem(size) {
    const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920;//尺寸大小
    return size * fontSize;
}

③使用：

<template>
    <div class="partOne">
        <div class="center">
            <MyEcharts id="pieECharts1" :style="{ width: '3.6875rem', height: '3.25rem' }" :option='pieDataOneOption' />
        </div>
        <!--<div style="font-size: 0.225rem; color: red;">1111</div> -->
    </div>
</template>

<script>
import MyEcharts from './MyEcharts.vue'
import { fontSizeRem } from '../utils/rem.js'
export default {
    name: 'partOne',
    components: {
        MyEcharts,
    },
    data() {
        return {
            pieDataOne: [
                { name: "空闲", value: 37, color: "#20E6A4" },
                { name: "占用", value: 63, color: "#F52F5F" }
            ],
            pieDataOneOption: {
                tooltip: {
                    show: false,
                }, //提示框
                legend: {
                    top: "bottom",
                    left: "center",
                    // width: 200,
                    // height: 27,
                    itemGap: fontSizeRem(20), //每个图例之间的间隙
                    itemWidth: fontSizeRem(8),
                    itemHeight: fontSizeRem(8),
                    selectedMode: false, //图例的选择模式,用图例改变显示状态
                    icon: "rect",
                    textStyle: {
                        fontSize: fontSizeRem(18),
                        lineHeight: fontSizeRem(21),
                        color: '#C6D1DB',
                    }
                },
                series: [
                    {
                        type: "pie", //饼图
                        hoverAnimation: false, //悬停动画
                        radius: ["55%", "60%"], //半径
                        center: ["50%", "48%"], //中心坐标
                        z: 10, //覆盖顺序
                        label: { //中心文本标签
                            position: "center",
                            formatter: () => {
                                return "实时xxxx\n利用率";
                            },
                            color: "#C6D1DB",
                            fontSize: fontSizeRem(18),
                            lineHeight: fontSizeRem(30),
                        },
                        data: [],

                    },
                    {
                        type: "pie",
                        hoverAnimation: false, //悬停动画
                        radius: ["50%", "65%"],
                        center: ["50%", "48%"],
                        label: { //图形上的文本标签
                            position: "outside",
                            color: "#F0F0F0",
                            fontSize: fontSizeRem(18),
                            // formatter: () => {
                            //   return piedata.value;
                            // }
                        },
                        labelLine: { //标签的视觉引导线
                            show: true,
                            length: 0,
                            length2: fontSizeRem(16),
                            lineStyle: {
                                color: "#0783FA",
                            }
                        },
                        data: [],
                    },
                ],
            },
        }
    },
    mounted() {
        this.pieDataOneOption.series[0].data = [
            {
                name: this.pieDataOne[0].name,
                value: this.pieDataOne[0].value,
                itemStyle: {
                    color: this.pieDataOne[0].color,
                },
            },
            {
                name: this.pieDataOne[1].name,
                value: this.pieDataOne[1].value,
                itemStyle: {
                    color: this.pieDataOne[1].color,
                },
            }
        ]
        this.pieDataOneOption.series[1].data = [
            {
                name: this.pieDataOne[0].name,
                value: this.pieDataOne[0].value,
                itemStyle: {
                    color: this.pieDataOne[0].color,
                    opacity: 0.4,
                },
            },
            {
                name: this.pieDataOne[1].name,
                value: this.pieDataOne[1].value,
                itemStyle: {
                    color: this.pieDataOne[1].color,
                    opacity: 0.4,
                },
            }
        ]
        this.pieDataOneOption.series[1].label.formatter = (val) => `${val.percent}%`
    },
}
</script>

<style scoped>
.partOne {
    background-image: url(../assets/左背景.png);
}
.center {
        width: 11.4375rem;
        height: 3.4625rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

展示

参考：https://blog.csdn.net/qq_38210427/article/details/130345981