美文网首页
Vue解决echart在iview的tab切换时显示不正确

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

作者: 初晨的风儿 | 来源:发表于2019-11-06 17:01 被阅读0次

    在使用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切换时显示不正确

          本文链接:https://www.haomeiwen.com/subject/fvbkvctx.html