element项目菜单折叠时echarts宽度自适应

首先说下原理 菜单的折叠展开是由一个变量控制的 将这个变量存入vue-x中 点击改变状态就存入变量 在echarts渲染的时候 监听这个vue-x中存入的变量 有变化即用charts.resize 就可以实现自适应啦 就还是挺方便哒 vue-x的存变量我上一边介绍的很清晰：
点击折叠展开菜单触发的方法：

    //点击按钮折叠菜单
    toggleCollapse() {
      this.isCollapse = !this.isCollapse //点击折叠按钮后，对isCollapse进行取反
      this.$store.commit('setCollapsede',this.isCollapse); // 存入变量
    },

在echarts组件里面监听：

  computed: {
    isCollapsede() {
      return this.$store.state.menuStatus.isCollapsed
    },
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      },
    },
    isCollapsede(val) {
      setTimeout(() => {
        this.chart = echarts.init(this.$el, 'macarons');
        this.chart.resize();
      }, 300)
    },
  },

好啦 接上一篇vue-x很全的 ~~~~~~~~~