解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表显示空白问题

近期项目中使用到Echarts来画图表，两个tab切换页面都有图表显示，页面初次加载完成后对图表进行初始化绘制，然而，开发过程中发现，切换tab后，第二个tab中图表不显示，直接显示空白，如下图：

tab1正常显示：

tab2显示空白： 

第一个tab显示图表正常，第二个tab内容显示空白

经过排查，发现是由于tab设置默认第一个tab显示，导致第二个tab绘制图表的div在页面初次加载时，DOM未加载，所以第二个tab显示空白。

对此，我的解决方法是：

1、在tabs标签上添加一个change事件  @change="changeMethod()"

页面布局代码：

<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" @change="changeMethod()" >
          <a-tab-pane  tab="交易金额 TOP10 商户信息" key="1">
            <div :style="{height:'800px',width:'100%'}" ref="topTenCusTrxAmount"></div>
          </a-tab-pane>
          <a-tab-pane  tab="交易笔数 TOP10 商户信息" key="2"  >
            <div :style="{height:'800px',width:'100%'}" ref="topTenCusTrxNum"></div>
          </a-tab-pane>
</a-tabs>

2、change事件代码：changeMethod(){...}

methods：{
    changeMethod(){
      //dom未加载，打印出来该dom为 undfined
      console.log("this.$refs.topTenCusTrxNum"+this.$refs.topTenCusTrxNum )
      var obj = this.$refs.topTenCusTrxNum 
      //所以判断是初次加载的时候，就掉用一下绘制图表的方法即可。
      if(typeof obj == "undefined"){
        //该方法是绘制图表的方法
        this.topTenCusTrxNumInfo()
      }
    }
}

以上两个步骤处理完之后即可正常显示。