解决tabs选项卡切换时，Echats图表宽度显示100px的问题

问题描述

在echats图表使用tabs选项卡切换时，只有第一个图表宽度显示正常，echats图表宽度设置的100%，但是第二个，第三个。。。都图表宽度都只显示100px宽度，所有的东西都压缩显示在一小块，显示不完整。
原因：由于v-show只是设置了元素的display属性为none，在切换的时候没有获取到元素的宽高所有会有问题，echats图表在初始化数据的时候，元素被隐藏了，获取不到宽高。
解决方案：
1、element-ui tabs选项卡方案解决很简单，将lazy属性设置为true就可以了。

<el-tab-pane label="本周" :lazy="true">
echat图表
</el-tab-pane>

2、设置被选中tabs监听函数，在第二个tab被选中时，才初始化echats图表，是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件

3、利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab

<el-tabs type="card" v-model="tabItem">
  <el-tab-pane name="heart">
    <span slot="label"><icon name="heart" scale="2"></icon>心率</span>
    <baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
  </el-tab-pane>
  <el-tab-pane name="breath">
    <span slot="label"><icon name="breath" scale="2"></icon>呼吸</span>
    <baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline>
  </el-tab-pane>
  <el-tab-pane label="体动" name="move">
    <span slot="label"><icon name="move" scale="2"></icon>体动</span>
    <baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline>
  </el-tab-pane>
</el-tabs>

这里默认tab为心率tab，当切换时，同一时刻只有一个v-if为true，当将其设置为true时，Vue会重新在页面渲染组件，即完成了组件渲染的步骤。

参考：https://www.cnblogs.com/hao-1234-1234/p/9214525.html【echarts tab 切换问题整理】