element 的tabs 中使用 ECharts

Question

问题遇到的现象和发生背景 ： 使用element 的tabs 每一项是不同的 表格

问题相关代码，请勿粘贴截图 <el-tabs v-model="activeName" @tab-click="clickECharts">

        <el-tab-pane label="订单统计" name="first" :lazy="true">
         
            <div id="mychart1" ref="mychart1"></div>
         
        </el-tab-pane>
        <el-tab-pane label=" 素材数据" name="second" :lazy="true">
          <div id="mychart2"></div>
        </el-tab-pane>
        <el-tab-pane label="合成数据" name="third" :lazy="true">
          <div id="mychart3"></div>
        </el-tab-pane>
      </el-tabs>

    if (tab.name == "second") {
      this.$nextTick(() => {
         console.log(document.getElementById("mychart2"));
        this.initEcharts(echarts.init(document.getElementById("mychart2")), ["1111111111", "2", "3", "4", "5",
          "6", "7"
        ]);
      });
    } else if (tab.name == "third") {
      this.$nextTick(() => {
         console.log(document.getElementById("mychart3"));
        this.initEcharts(echarts.init(document.getElementById("mychart3")), ["122222222222222", "2", "3", "4",
          "5", "6", "7"
        ]);
      });
    } else if (tab.name == "first") {
      this.$nextTick(() => {
         console.log(document.getElementById("mychart1"));
        this.initEcharts(echarts.init(document.getElementById("mychart1")), ["13333333333333333", "2", "3", "4",
          "5", "6", "7"
        ]);
      });
    }

运行结果及报错内容

There is a chart instance already initialized on the dom.

我的解答思路和尝试过的方法

想到了tabs 切换的时候重新渲染了页面。 所以猜想这因为这个问题。

我想要达到的结果

Answer 1

在使用Echarts插件的方法外面定义一个全局变量（注意：一定得是全局变量），然后在插件使用的方法内，添加判断，调用eChart.dispose()方法先将图表销毁，然后再初始化