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

VUE-切换tab时,echarts图表被压缩_第1张图片

  • 问题描述

两个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()图表

你可能感兴趣的:(VUE)