- 问题描述
两个tab,分别为tab1、tab2,tab1下有一个折线图,tab2下也有一个折线图,两个折线图均采用百分比设置,当点击tab2时,折线图被压缩。
- 原因:
网页布局,div是有大小的,但是里面加载的echarts宽高都是0,被压缩。
- 解决方法
1、父组件data中定义一个属性tabtype:1,记录tab的值,默认显示1,表示默认显示的是tab1下的折线图;
2、向子组件传递tabtype,<son-component :tabtype="tabtype"></son-component>
3、子组件通过props接收
props:{
tabtype:{
type:Number,
default:1
}
}
4、子组件监听tabtype的变化,也就是当切换tab时,tabtype值变化,让图表执行resize(),
watch:{
this.$nextTick(()=>{
tabtype(newVal){
this.myEchart.resize();
}
})
}
- 总结:
当tab变化时,通过监听tab的值,来resize()图表