Vue+element 使用Tabs切换echarts图表，显示空白

解决办法：

第一步：给el-tab-pane标签添加lazy属性，设置为true，表示延迟渲染

<el-tab-pane label="客户数量" key="first" name="first" :lazy="true"></el-tab-pane>

第二步：使用v-if判断切换到当前tab时再渲染该内容

<!--    activeName为el-tabs标签绑定的值-->
<div class="charts" v-if="activeName=='first'">  
    <div ref="chart"></div>
</div>

以上两步就能解决显示空白的问题啦，不过需要注意的是，在未切换到当前这个tab时，该tab下的内容还未渲染，因此不能通过ref获取到图表所在的div。所以，在绘制echarts图表时要先判断一下。

//点击切换tab事件
handleClick() {
   this.$nextTick(()=>{
        if(this.activeName=='first'){
            this.createCustomerChart();   //绘制第一个tab的图表
        }else if(this.activeName=='second'){
            this.createCrossChart();   //绘制第二个tab的图表
        }
    })
},