element-ui el-tabs 使用echarts切换时无法正常显示图表

echarts图表来回切换时会出现宽度失效的问题，导致图表变形，用v-if或者lazy就能解决。

子组件页面

<template>
  <div style="height:600px;width:100%"></div>
</template>

<script>
export default {
  name: "echarts",
  props: {
    tmpData:{
      type:Array,
      default (){
        return [62, 82, 91, 84, 109, 110, 120]
      }
    }
  },
  data: function() {
    return {
      echart:null
    };
  },
  mounted: function() {
    this.initChart();
  },
  methods:{
    drawPic(){
      var seriesLabel = {
          normal: {
            position:'top',
              show: true,
              textBorderWidth: 1,
              fontSize: 12,
              textStyle:{
                color: '#6700cb'
              }
          }
      }
      var tmp = this.tmpData;
      this.chart.setOption({
        tooltip:{
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        grid: {//整个图的位置调整
              left: '0',
              right: '0',
              top: '3%',
//					        containLabel: true//y轴数据的显示
        },
        xAxis:{
              type : 'category',
              name: '日期',
              data : ['7-1','7-2','7-3','7-4','7-5','7-6','7-7','7-8','7-9']
        },
        yAxis:{},
        series : [
              {
                  type:'bar',
                  barWidth:10,
                  label:seriesLabel,
                    data:tmp,
                itemStyle:{
                        normal:{
                            color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset:0,
                                color:'#6600cc'
                            }, {
                                offset:1,
                                color:'#cc00cc'
                            }]),
                        }
                    }
              }
          ]
      })
    },
    initChart: function() {
      this.chart = this.$echarts.init(this.$el);
      this.drawPic();
    }
  }
};
</script>

<style scoped>
</style>

父组件页面

html代码

<el-tabs v-model="activeName">
    <el-tab-pane label="收益（元）" name="first">
        <echarts v-if="'first'==activeName" :tmpData="tmpData1"></echarts>
    </el-tab-pane>
    <el-tab-pane label="订单数" name="second">
         <echarts v-if="'second'==activeName" :tmpData="tmpData2"></echarts>
    </el-tab-pane>
 </el-tabs>

js代码

 data(){
	return{
      activeName:'first',
      tmpData1:[62, 82, 91, 84, 109, 110, 120,80,60],
      tmpData2:[62, 82, 91, 84, 109, 99, 110,120,42]
	}
 }

参考与：https://blog.csdn.net/SanJiK/article/details/79764429