vue 使用tab切换时，echart宽度不能自适应

出现情况：

解决方案：

在切换tab标签时，隐藏的图表找不到对应的div大小，就给了个默认大小100px；

利用v-if指令可以控制图表的渲染，当切换tab之后v-if的值为true再渲染图表，保证tab先渲染

<template>
	<el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
		<el-tab-pane label="操作趋势" name="first">
		  <chart v-if="'first' === activeName" :option="chartOption"/>
		</el-tab-pane>
		<el-tab-pane label="电池信号" name="second">
		  <chart v-if="'second' === activeName" :option="chartOption" :id="'second'"/>
		</el-tab-pane>
		<el-tab-pane label="图表" name="third">
		  <chart v-if="'third' === activeName" :option="chartOption" :id="'third'"/>
		</el-tab-pane>
		<el-tab-pane label="趋势图" name="fourth">
		  <chart v-if="'fourth' === activeName" :option="chartOption" :id="'fourth'"/>
		</el-tab-pane>
	</el-tabs>
</template>

<script>
import Chart from '@/components/Charts/MixChart'

export default {
  name: 'TabChart',
  components: {
    Chart
  },
  data() {
    return {
      chartOption: {
          xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            }
          },
          legend: {
            data: ['expected', 'actual']
          },
          series: [{
            name: 'expected', itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            data: [100, 120, 161, 134, 105, 160, 165],
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
          {
            name: 'actual',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: [120, 82, 91, 154, 162, 140, 145],
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }]
        },
      activeName: 'first'
    }
  }
</script>