Vuex+echarts实现点击左右两侧菜单栏，重新绘制echarts

1、想实现点击左右两侧的按钮，侧边栏展开或收起，中间的echarts部分根据宽度的变化重新绘制

首先需要安装vuex，，，使用命令：npm install vuex;

2、在根目录下建立store文件夹

3、store/index.js文件中存储一个变量，用来记录侧边栏展开或者收起的状态，并在mutations中可以改变这个状态的值

import { createStore } from 'vuex';

export default createStore({
    state() {
        return {
            isFold: false, // 左侧树形控件是否折叠
        };
    },
    mutations: {
        changeFold(state) {
            state.isFold = !state.isFold;
        }
    },
});

4、在main.js中引入store/index.js

5、在组件中引入mapState、mapMutations

6、在封装的echarts文件中watch监听vuex中存储的变量的变化，重新渲染即可

watch: {
    // 监听左侧菜单栏是否折叠，重新渲染echarts
    '$store.state.isFold'(newVal) {
      this.myChart.resize();
    }
  },

7、最终实现效果：