element-ui tab切换：切换时，Echarts宽度只有100px，实际宽度改为100%

最近在项目中需要在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确，只有100px,效果如下：

代码如下：

<el-tab-pane label="各区" name="area">
    <chart></chart>
</el-tab-pane>
<el-tab-pane label="每月" name="month">
    <chart></chart>
</el-tab-pane>

分析:这种写法会导致页面一次完成渲染，应在切换tab时再进行渲染。
解决方案：切换tab时进行渲染，可用v-if控制echarts显隐。

解决代码如下：

//tabActiveName tab当前tab名称 与key值一致
//consultationTabList: [{ label: '各区', key: 'area' }, { label: '每月', key: 'month' }],
//切换事件 handleTabClick
//handleTabClick(tab, event) {
     //const { paneName } = tab;
      //this.tabActiveName = paneName;
//},
//chart 自定义图表
<el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
    <el-tab-pane v-for="item in consultationTabList" :label="item.label" :key="item.key" :name="item.key">
        <chart v-if="item.key === tabActiveName"></chart>
    </el-tab-pane>
</el-tabs>