解决：在el-tab-pane里放echarts图表，爆出警告：There is a chart instance already initialized on the dom。

问题：在el-tab-pane里放echarts的容器，并点击其他的标签页时，图表不出现，并且爆出警告：There is a chart instance already initialized on the dom。点击两次相同标签页标签才出现。

原因：当点击tab的标签页切换时，下一个标签页还没挂载完毕就执行了点击的回调函数，echarts的初始化检测出上一个标签页的已经存在的图表，因此爆出警告，并且不会重新初始化echarts创建当前标签页的图表。

解决：

1、在每个标签页的echarts容器中先添加v-if判断activeName是否为当前的tab标签页。

          <el-tab-pane label="销售额" name="sale">
            <el-row :gutter="10" v-if="activeName == 'sale'">
              <el-col :span="18" class="col_18">
                <div class="charts" ref="charts"></div>
              </el-col>
              <el-col :span="6" class="col_6">
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="访问量" name="visits">
            <el-row :gutter="10" v-if="activeName == 'visits'">
              <el-col :span="18" class="col_18">
                <div class="charts" ref="charts"></div>
              </el-col>
              <el-col :span="6" class="col_6">
              </el-col>
            </el-row>
          </el-tab-pane>

2、在点击的回调函数里，添加nextTick，等到dom更新完毕再去初始化图表，到这问题解决。

// tab标签页的回调
    handleClickTab() {
      // 等dom更新后再去初始化图表
      this.$nextTick(() => {
        this.getEcharts();
      });
    },

3、tab标签页改变，判断标签页name，并获取已经存在的初始化过的配置,修改其中的数据，再重新进行配置可以避免每切换tab都要初始化echarts。

// tab标签页改变，判断标签页name，并获取已经存在的初始化过的配置,修改其中的数据，再重新进行配置可以避免每切换tab都要初始化echarts
      if (this.activeName == "visits") {
        this.rankName = "访问量";
        let option2 = mycharts.getOption();
        option2.series[0].data = [
          100, 152, 233, 334, 350, 497, 226, 252, 133, 42, 13, 74,
        ];
        option2.title[0].text = "访问量趋势";
        mycharts.setOption(option2);
      }