Vue解决echart在iview的tab切换时显示不正确

在使用echats的时候,当一张chart1处于未被选中的tab2里面的,然后切换到tab2时,发现chart1的width只有100px。

原因分析:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小。所以要做的就是在页面加载时,就对图表进行初始化。

解决方法:监听tab的切换,利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可

这里监听iview传进来的tabValue,由于存在vue的异步更新机制,所以使用$nexttick来更新配置。

  @Watch("tabValue")
  public onTabChange(newValue: any, oldValue: any) {
    this.showChart=false;
    this.$nextTick(()=>{
      this.showChart=true;
      this.$nextTick(()=>{
        this.initChart();
      })
    });
  }

你可能感兴趣的:(Vue解决echart在iview的tab切换时显示不正确)