解决 Vue 中使用 Echarts 出现 There is a chart instance already initialized on the dom 的警告问题

最新推荐文章于 2024-10-12 10:04:02 发布
最新推荐文章于 2024-10-12 10:04:02 发布
阅读量2.1k 收藏 4
点赞数 1
分类专栏： vue 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41356250/article/details/131278810
版权
文章讲述了在Vue项目中使用Echarts时遇到的Thereisachartinstancealreadyinitializedonthedom警告的成因和解决方法。问题出现在子组件的弹窗里，当弹窗多次打开时，Echarts图表实例被重复初始化。解决策略是在初始化前检查是否存在实例，如果存在则调用dispose方法销毁，然后再进行初始化。
摘要由CSDN通过智能技术生成

原文链接：解决 Vue 中使用 Echarts 出现 There is a chart instance already initialized on the dom 的警告问题

问题描述

使用echarts的时候，多次加载会出现There is a chart instance already initialized on the dom.这个黄色警告，大概意思就是dom上已经初始化了一个图表实例。此警告信息不影响echarts正常加载，但是有bug不解决的话，心里痒的慌！

先说明一下，echarts是用在了子组件的弹窗里，然后在父组件打开弹窗时调用echarts.init()的初始化方法。第一次渲染正常，之后再打开弹窗控制台就会报There is a chart instance already initialized on the dom.

父组件中的代码：

最低0.47元/天 解锁文章
唐志远1997
关注
专栏目录
vue项目 echarts中出现“There is a chart instance already initialized on the dom.”的警告
yuhan___的博客
12-13 1万+
在项目开发中创建echart图表时遇到“There is a chart instance already initialized on the dom.”的警告，意思即为dom上已经初始化了一个图表实例，并且如果你图表中定义了点击方法，多次覆盖之后，点击方法会触发多次。更新页面重复加载这个图表实例时就会出现这类警告。 以下写法可以避免这类警告。 1、例如你的echart图表代码写在一个单独的echarts.js文件中，建议在export defalut之外 定义varmyChart; 在方法最外..
vue3路由切换页面使用Echarts时出现There is a chart instance already initialized on the dom.
m0_71683629的博客
08-29 605
利用vue3的钩子函数(onUnmounted)对页面进行切换时销毁实例对象，使用echarts.getInstanceByDom(对应的dom结点)获取元素来判断是否初始化。若为空则进行初始化。销毁时也进行非空判断，获取元素中有内容则调用销毁方法。
[ECharts] There is a chart instance already initialized on the dom.
zhj1329000的博客
05-14 1800
就是当前页面的当前图表在重绘时，当前图表未销毁，但是不影响当前渲染效果，后面你加入点击事件以及一些其它的图表操作，它会重复触发多次，所以，要想办法将其销毁重构。有一个关于dom的图表实例已初始化。方法，试过了，没有用；
【Echarts】 报错：There is a chart instance already initialized on the dom.
最新发布
weixin_51054408的博客
10-12 484
【Echarts】 报错There is a chart instance already initialized on the dom.
使用echarts时出现“There is a chart instance already initialized on the dom.”警告的解决办法
weixin_62733705的博客
12-08 455
由于项目中二次封装了echarts折线图，并且选择不同时间，需要向后端请求不同数据，显示在折线图上，频繁切换会出现“There is a chart instance already initialized on the dom.”的警告，在csdn上找办法后，解决了这个问题。，但是我们在每次数据发生改变的时间都重新进行了一次渲染，导致出现警告。这个问题的出现在于，在一张表上渲染不同数据，其实。
There is a chart instance already initialized on the dom.
剑雪封喉
09-05 1359
使用Echarts插件的时候，多次加载会出现There is a chart instance already initialized on the dom.的警告，意思是DOM上已经初始化了一个图表实例。 解决办法： 在使用Echarts插件的方法外面定义一个全局变量（注意：一定得是全局变量），然后在插件使用的方法内，添加判断，调用eChart.dispose()方法先将图表销毁，然后再初始...
解决echarts警告提示:There is a chart instance already initialized on the dom.
qq_42396791的博客
06-28 7971
There is a chart instance already initialized on the dom.
在VUE中Echarts出现There is a chart instance already initialized on the dom.
weixin_65984842的博客
03-03 973
在VUE中Echarts出现There is a chart instance already initialized on the dom.
echarts警告提示:There is a chart instance already initialized on the dom.
我从不打没有准备的仗！
08-04 738
echarts警告提示:There is a chart instance already initialized on the dom.
解决echarts控制台警告：There is a chart instance already initialize on the dom
細水、長流√的专栏
09-10 4909
当我们把创建一个echarts图表的代码封装成一个方法，一旦多次调用这个方法创建图表的时候使用的dom节点都是同一个，每次都会init一个echarts实例，就会在控制台报如下警告:There is a chart instance already initialize on the dom（在dom上已经初始化了一个图表实例）。
vue中使用eCharts时[ECharts] There is a chart instance already initialized on the dom.
11-29
当在Vue中使用ECharts＊＊＊元素上多次渲染图表，就会出现警告[ECharts] There is a chart instance already initialized on the dom. 这是因为ECharts实例只能在一个DOM元素上初始化一次。为了解决这个问题，可以在...
重复使用echarts组件There is a chart instance already initialized on the dom
09-02
- *1* [vue3中使用echarts 出现 There is a chart instance already initialized on the dom.](https://blog.csdn.net/qq_36687211/article/details/128725708)[target="_blank" data-report-click={"spm":"1018....
解决echarts报There is a chart instance already initialized on the dom.错误
sdasdadadad的博客
09-24 470
解决echarts报There is a chart instance already initialized on the dom.错误
echarts出现“There is a chart instance already initialized on the dom.”警告的解决办法
qq_41920758的博客
04-27 3992
由于项目中二次封装了echarts折线图，并且父组件通过选择不同时间，像后端请求不同数据，显示在折线图上，频繁切换会出现“There is a chart instance already initialized on the dom.”的警告，在网络上找办法后，解决了这个问题。这个问题的出现在于，在一张表上渲染不同数据，其实dom已经存在了，但是我们在每次数据发生改变的时间都重新进行了一次渲染，导致出现警告。// 检测是否已经存在echarts实例，如果不存在，则不再去初始化。
There is a chart instance already initialized on the dom
热门推荐
橙小兔的博客
11-27 5万+
使用Echarts插件的时候，多次加载会出现There is a chart instance already initialized on the dom.的警告，意思是DOM上已经初始化了一个图表实例。 解决办法： 在使用Echarts插件的方法外面定义一个全局变量（注意：一定得是全局变量），然后在插件使用的方法内，添加判断，调用eChart.dispose()方法先将图表销毁，然后再初始...
There is a chart instance already initialized on the dom原因及解决办法
weixin_43249785的博客
02-06 4774
echars中只要创建一次dom来渲染，初始化代码只出现一次，js中只要执行一次实例化代码
【Echarts】 报错There is a chart instance already initialized on the dom.
m0_67372185的博客
12-28 3924
There is a chart instance already initialized on the dom.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唐志远1997

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值