vue + echart ,图表宽度始终为100

项目场景：

vue 项目中父组件使用el-tabs标签的形式切换多个子组件，子组件初始化多个echart图表。

问题描述：

除了第一个子组件，其他组件内无论给echart容器怎么设置宽和高，echart图表都不能显示。

<template>
  <div class="user-statistics">
    <el-tabs type="border-card" @tab-click="changeTab">
      <el-tab-pane label="组件一">
       <component-one>
        </component-one>
      </component-one>
      <el-tab-pane label="组件二" >
      <component-two>
        </component-two>
      </el-tab-pane>
      <el-tab-pane label="组件三">
       <component-three>
        </component-three>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

---

原因分析：

echart图表宽度一直保持100*100（初始化宽高），初步分析echart图表未能初始化获取到容器宽度。因为tab标签下的**子组件**是**同时加载**出来的，切换tab**不会再次**进入子组件**生命周期钩子函数重新加载渲染dom节点**。这样echart初始化和销毁方法就没有执行。

---

解决方案：

方案一：给el-tab-pane标签加上延迟渲染属性

<template>
  <div class="user-statistics">
    <el-tabs type="border-card" @tab-click="changeTab">
      <el-tab-pane label="组件一" :lazy="true">
        <component-one>
        </component-one>
      </component-one>
      <el-tab-pane label="组件二"  :lazy="true">
        <component-two>
        </component-two>
      </el-tab-pane>
      <el-tab-pane label="组件三" :lazy="true">
         <component-three>
        </component-three>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

方案二：切换时使用v-if 重新渲染

<template>
  <div class="user-statistics">
    <el-tabs type="border-card" @tab-click="changeTab">
      <el-tab-pane label="组件一">
        <component-one v-if="activeName==='fitst'">
        </component-one>
      </component-one>
      <el-tab-pane label="组件二">
        <component-two v-if="activeName==='second'">
        </component-two>
      </el-tab-pane>
      <el-tab-pane label="组件三">
         <component-three v-if="activeName==='third'">
        </component-three>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>