vue-charts图表自适应

 <div class="box">
    <div class="header"></div>
    <div class="chart-wrapper">
      <v-charts :option="option" ref="echarts"></v-charts>
    </div>
  </div>

<style lang="scss">
.box{
  height: 80%;
  display: flex;
  flex-direction: column;
  .header{
    flex:1
  }
  .chart-wrapper{
    flex:1
  }
}
</style>

此时只有box中存在高度80%，header和chart-wrapper都是弹性布局平分box。但是v-charts无法渲染图表高度，导致图表无法展示出来。如下图：

注意：x-vue-echarts这个盒子的高度是准确的，但是它的子标签canvas的高度却为0，导致图表无法显示。

解决办法：

mounted() {
    this.$nextTick(() => {
      this.$refs.echarts.resize();
    });
  },

困扰了2小时的问题，没想到3行代码就解决了！！！！