【Vue + Echarts】DOM大小改变后重绘图表（resize）

Vue中使用Echarts绘图，DOM改变后重绘

1. 我的项目背景

首先，我使用Vue+Element-UI搭建的系统框架，左侧菜单栏和标题，右侧上方横条上有一个按钮，点击可以实现菜单栏的折叠与展开。

2. Echarts图表不能重绘

一开始的思路，是监听DOM变化，于是在网上搜索了一些方法，但是由于本系统并不会大量地改变DOM，没有必要监听DOM宽高的变化。系统中只有折叠和展开两个状态，所以只需要简单的用一个flag表示，监听其true/false就可以了。我通过在store中创建变量isCollapse来管理折叠与展开。
store代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        isCollapse: false
    },
    mutations: {
        commitCollapse(state, bool) {
            state.isCollapse = bool;
        }
    }
})

3. 监听isCollapse变化，调用echarts的resizeAPI

我们在绘制echarts的vue单文件中监听isCollapse变化，然后调用resize就可以了。

<template>
    <div :id="chartId" style="height: 100%;width: 100%;"></div>
</template>

<script>
var echarts = require("echarts");
export default {
    data() {
        return {
            chartId: "pie",
            myChart: null,
            option: {
				// 你的option
			}
        }
    },
    /* *******************重点******************** */
    computed:{
        isCollapse(){
            return this.$store.state.isCollapse;
        }
    },
    watch:{
        isCollapse(newValue, oldValue){
            this.myChart.resize();
        }
    },
    /* ******************************************* */
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById(this.chartId));
        this.myChart.setOption(this.option);
    }
};
</script>