在vue中实现echart自适应于父元素

在我们的Vue项目中，左右布局，左边是主要的container,右边是一个可以收缩的aside，echarts渲染一遍后固定宽高，所以想在aside收缩前后,resize Echarts。

• 在父元素中也就是index.vue里面的template

<template>
  <div class="overview">
    <com-container ref="container">
      <router-view :fullScreen=fullScreen  />
    </com-container>

    <com-aside v-if="$route.meta.aside !== false" v-show="showAside" :switch="true" @asideToggle="asideEvent" />
  </div>
</template>

• 给data中新增一个变量fullScreen

    data(){
      return {
        // 边栏是否开启
        showAside:true,
        fullScreen:false,
      }
    }

• 在边栏的按钮点击事件中添加

    methods:{
      // 边栏开关
      asideEvent(){
        this.$refs.container.fullScreen()
        this.fullScreen = !this.fullScreen;
        //true 变 false,fasle变true
      }
    }

• 在router-view中，也就是路由跳转的页面中

    props:['fullScreen'],
    watch:{
      // 是否全屏
      fullScreen(newVal){
        var _this = this;
        setTimeout(function () {
          let myChart = _this.$echarts.init(document.getElementById("barChart-1"));
          myChart.resize();
          let myChart2 = _this.$echarts.init(document.getElementById("barChart-2"));
          myChart2.resize();
          let myChart3 = _this.$echarts.init(document.getElementById("lineChart"));
          myChart3.resize();
          console.log("EnergyPlan 全屏执行");
        },400)
      }
    },

props用来接收传过来的值
watch用来监听这个值的变化
至于为什么要设置timeout 因为aside收起时有一定的动画效果，要等动画效果结束后，再渲染。