el-tabs使用echarts，tab切换时echarts不显示

1. 加lazy(没用)

<el-tabs v-model="activeName" value="" @tab-click="handleClick">
    <el-tab-pane label="用户" name="user" lazy="">用户</el-tab-pane>
    <el-tab-pane label="服务人员" name="servicer" lazy="">服务人员</el-tab-pane>
    <el-tab-pane label="订单" name="order" lazy="">订单</el-tab-pane>
</el-tabs>

2. v-if (有用)
<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in tabs" :name="item.name"
          :key="item.name" :label="item.label">
              <div v-if="activeName=='first'">
                <div ref="userchart" style="height: 300px" id="userchart"></div>
              </div>
              <div v-if="activeName=='second'">
                <div ref="chart1" style="height: 300px" ></div>
              </div>
              <div v-if="activeName=='third'">
                 <div ref="chart1" style="height: 300px" ></div>
              </div>
              <div v-if="activeName=='fourth'">
                 <div ref="chart1" style="height: 300px" ></div>
              </div>
          </el-tab-pane>
        </el-tabs>
      </template>

---

一些警告：


1. There is a chart instance already initialized on the dom.
已存在表实例
就是说，使用tabs切换时，init()方法没有及时销毁，实例重复创建
所以要保证只创建一次：
方法1：可以通过echarts.getInstanceByDom(echartDiv)去获取当前容器看是否存在Echarts对象，把图表创建的init方法加逻辑判断，保证它只创建一次
方法二：可以在切换数据时添加echarts.dispose()销毁容器中已经创建的实例对象
2. Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

这是未选中的tabs中的图表报的警告，说是不能得到dom的宽高
是因为echarts.init()在页面未渲染时就先页面一步加载了

原文：tabs标签页中使用Echarts图表常见警告以及处理方式