VUE-切换tab时，echarts图表被压缩

• 问题描述

两个tab，分别为tab1、tab2，tab1下有一个折线图，tab2下也有一个折线图，两个折线图均采用百分比设置，当点击tab2时，折线图被压缩。

• 原因：

网页布局，div是有大小的，但是里面加载的echarts宽高都是0，被压缩。

• 解决方法

1、父组件data中定义一个属性tabtype:1，记录tab的值，默认显示1，表示默认显示的是tab1下的折线图；

2、向子组件传递tabtype，:tabtype="tabtype">

3、子组件通过props接收

props:{
    tabtype:{
        type:Number,
        default:1
    }
}

4、子组件监听tabtype的变化，也就是当切换tab时，tabtype值变化，让图表执行resize()，

watch:{
    this.$nextTick(()=>{
        tabtype(newVal){
            this.myEchart.resize();
        }
    })   
}

• 总结：

当tab变化时，通过监听tab的值，来resize()图表