Echars - echarts.js?1be7:2168 There is a chart instance already initialized on the dom. （解决方案）

叁歲伎倆 2022-10-15 09:54 104阅读 0赞

## 原因分析 ##

> 原因：多次创建同一 `DOM` 节点，频繁初始化图表导致（多个 `init` `echarts` 实例）。

详细报错如下图所示：  
![在这里插入图片描述][202105241602430.png]  
由于创建图表实例的代码，做了封装，页面中多次重复调用，导致多次 `init` 初始化图表实例。

## 解决方案 ##

> 使用 `echarts.getInstanceByDom()` 判断是否存在 `echarts` 实例。

如果有则不创建，反之创建。

// 假设: DOM节点是 XXX
    
    
    // 引入echarts
    import * as ets from 'echarts'
    
    // 查看是否创建 “xx” DOM节点图表实例
    let myChart = ets.getInstanceByDom('xxx')
    
    // 判端是否进行创建
    if(myChart == null){ // 成立则表示没有该DOM节点实例图表
    	myChart = ets.init('xxx')//初始化图表(创建)
    }
    
    // 图表实例
    console.log(myChart)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]

[202105241602430.png]: /images/20221014/337dd9954da742558c1f7c17b89efd65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210524161357691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70