vue中在tabs选项卡切换时echarts图表宽度由100%变为100px

使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px
问题原因：echarts 渲染时 tab 选项卡 的 display 属性为 none，所以 width 属性为 100% 就没有可继承项，被 echarts 自带的方法切割成 100px
解决办法：使用 this.$nextTick

<ul class="tabbar">
   <li><a href="javascript:void(0);" :class="{selected: key == activeTab}" v-for="(item, key) in childrentabs" @click="changeChildTab(key)" :key="key">{{item.name}}</a></li>
</ul>
<div class="tab-contain" v-show="activeTab == 'first'">
	<div ref="line" style="width:100%;height:100%;"></div>
</div>
<div class="tab-contain" v-show="activeTab == 'second'">
	<div ref="pie" style="width:100%;height:100%;"></div>
</div>

methods: {
    changeChildTab(key) {
      this.activeTab = key
      if (key === 'first') {
        this.$nextTick(() => {
          this.drawLine()
        })
      } else {
        this.$nextTick(() => {
          this.drawPie()
        })
      }
    },
 }