根据浏览器窗口大小变化设置单位系数

Index.vue

data() {
    // 浏览器窗口宽高
    screenWidth: document.body.clientWidth,
    screenHeight: document.body.clientHeight == 0 ? 800 : document.body.clientHeight
},
mounted() {
    // 监听浏览器窗口变化
    window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth
            window.screenHeight = document.body.clientHeight
            this.screenWidth = window.screenWidth
            this.screenHeight = window.screenHeight
        })()
    }
    this.$watch(screenWidth, val => {
        this.screenWidth = val
    })
    this.$watch(screenHeight, val => {
        this.screenHeight = val
    })
}

<alert :screenWidth="screenWidth" :screenHeight="screenHeight"></alert>

子组件alert

props: [screenWidth, screenHeight],
// 计算属性，同时监听两个值
computed: {
    screenLen() {
        const { screenWidth, screenHeight } = this
        return {
            screenWidth,
            screenHeight
        }
    }
}，
mounted() {
    this.$watch(screenLen, {
        immediate: true,
        deep: true,
        handler(val) {
            this.initData(val)  
        }
    })
},
methods: {
    initData(length) {
        let width = length.screenWidth
        let height = length.screenHeight
        // 自适应系数
        this.unit = (width / 1920 + height / 1080) / 2
        // 判断echart图需要的数据是否存在，若不存在，则调用接口
        if(!data) {
            this.getData()
        } else { // 若echarts图需要的数据已存在，则直接绘制
            this.drawing()
        } 
    }
}