若依菜单栏伸缩 页面大小变化 Echarts自适应方法

    mounted() {
        this.drawChart1();
        this.drawChart2();
        this.drawChart3();
        this.drawChart4();
    },
    created() {
        // 监听页面变化
        window.addEventListener("resize", function () {
            setTimeout(() => that.handleResize(), 300)
        });
        // 监听侧边菜单伸缩
        let that = this
        // 侧边栏伸缩时echarts图表大小自适应(开始监听)
        that.unWatch = that.$watch(
            // 获取全局变量，此变量控制菜单的展开与折叠
            // 当点击菜单栏按钮实现伸缩时此变量会发生变化
            () => that.$store.state.app.sidebar.opened,
            // 执行echarts自适应函数
            // 设置定时器是因为element-ui的菜单组件有300毫秒的动画
            // 需要等到动画加载完毕再执行echarts自适应，否则不起作用
            () => setTimeout(() => that.handleResize(), 300)
        );
    },

写一个监听侧边栏事件，监听到重新渲染ecahrts就可以了

       handleResize() {
            for (let i = 1; i <= 4; i++) {
                let myChart = echarts.init(document.getElementById('main' + i));
                myChart.resize();
            }
        },