Echarts清空图表：There is a chart instance already initialized on the dom.

Posted 2023-03-31 飞鱼爱吃米

There is a chart instance already initialized on the dom.

有一个关于dom的图表实例已初始化。

我们在使用图表的时候，常用的使用场景就是数据展示。
我们自然希望，数据的改变会带来图表的重绘。
也就是说，指定的区域作为canvas容器，根据触发条件改动数据之后，依旧沿用之前的的图表配置，把图表重新生成。

重绘图表时，我们要把之前已经渲染好的图表清空。

Echarts提供的有clear()和dispose()方法。
另外还有js方法。

先说我用着无效的两个：
①js：

let ele=element.getElementById('元素id');
ele.innerhtml=''

这是把canvas元素的内容清空，视觉效果上，确实实现了清空。
但是canvas实例依旧存在，控制台就会出现上面的问题：There is a chart instance already initialized on the dom.
②clear()方法

let ele=element.getElementById('元素id')
ele.clear()

官方解释是：

清空当前实例，会移除实例中所有的组件和图表。

看定义我是觉得能实现需求的，但实际用的时候效果不尽人意。

注：这里我也查找了很多资料，来佐证方法的适用性。有的朋友记录该方法确实可用，但是有的就和我一样，没有作用。
不过，可能是使用方法的位置不正确，导致方法没有合适的被使用也说不一定。

以上是问题记录，接下来说一下解决方案吧。
dispose()方法:

销毁实例，实例销毁后无法再被使用。

实话讲，看见官方的这个解释，我在最初的时候根本没考虑用它。
原因就是销毁二字，我想当然，图表我还需要用，你销毁再用的时候怎么获取呢？

后来其他方案确实没办法解决已初始化的问题，我又看了一下自己使用图表的方法：

let chart = echarts.init(this.$refs.chart);

init()！！！

创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

所以切换数据，显示不同图表的过程其实也就是 ECharts 实例的销毁—创建过程。

自然而然，想到dispose()销毁方法，可问题是我们什么时候使用呢？

能销毁肯定需要先存在，所以定义一个全局变量来存储创建后的ECharts 实例，在改变数据需要重新绘制图表的时候加上条件判断：图例是否存在来决定是否销毁。

所以呢：
我在data里定义：

chart: null,//接收实例对象

触发切换数据的方法里面：

if (this.chart != null && this.chart != '' && this.chart != undefined) 
   this.chart.dispose(); //销毁

嘎嘎好用！
不过我在想，上面clear()方法没用，或许是实例没保存，触发时机不对。
按照正确的处理思路，dispose()换成clear()可能也好用。（有时间我试一下，再来更新）

这里是飞鱼爱吃米，只授渔，不授鱼！

There is a chart instance already initialized on the dom！警告

使用Echarts插件的时候，多次加载会出现There is a chart instance already initialized on the dom.这个错误，改插件已经加载完成。

并且如果你图表中定义了点击方法，多次覆盖之后，点击方法会触发多次

解决方法：

在方法最外层定义全局变量

var myCharts;

然后在插件使用方法中：

if (myChart != null && myChart != "" && myChart != undefined){
    myChart.dispose();
}
// 基于准备好的dom，初始化echarts实例
myChart = echarts.init(document.getElementById(‘sjtjt‘));

方法的最开始写上判断，然后初始化echarts实例；

最重要的就是全局定义和方法开头的判断然后

myChart.dispose();