Vue Echarts报错 Error: Initialize failed: invalid dom.

已于 2022-11-18 17:22:30 修改
阅读量1k 收藏 1
点赞数
文章标签： vue.js echarts javascript
于 2022-11-18 14:50:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_60822033/article/details/127922257
版权

 报错原因

dom还没挂载完成，echarts.init() 就已经开始执行

解决方法

在网上找了原因，但都没解决

1、不要用created（用mounted），created这时候还只是创建了实例，但模板还没挂载完成

2、使用create情况下使用延迟加载（setTimeout延迟加载，使用nextTick延迟加载）

以上都是网上的答案，全都试了一遍，都不可以

我的解决方法

因为要求做显示与隐藏，我在myecharts这个div里面加了v-if

 后面改成了这样，问题解决了，v-if会导致dom挂载

杜事多
关注
vue2/3 - echarts报错Error in callback for watcher “chartSource“: “Error: Initialize failed: invalid do
高级前端工程师
05-13 2961
vue.js，vue2，vue3，echarts，Echarts图表插件，vue3+charts报错，chartSource，为什么会报错，图表渲染失败，加了if判断依旧报错，echarts chartSource，回调观察程序“chartSource”时出错：“错误：初始化失败：dom无效。”，Error in callback for watcher “chartSource“: “Error: Initialize failed: invalid dom.“，解决办法，还是无效怎么办，浏览器控制台报错
出现 Error: Initialize failed: invalid dom 解决方法（全）
码农研究僧的博客
03-21 6503
Error: Initialize failed: invalid dom. 详细分析以及附Demo错误
this.$refs.xxx的小坑，Error in mounted hook “Error Initialize failed invalid dom.“
emgexgb_sef的博客
02-21 2382
最近在vue项目中使用echarts的时候遇到报错，Error in mounted hook: “Error: Initialize failed: invalid dom.”，这个错误就是dom元素还没准备就绪，但是我在mouted中初始化echarts，按理说不该报这个错。 反复查看代码，也没有问题，最终发现this.refs.chart−1打印出来为NaN...，但是打印this.refs.chart-1打印出来为NaN...，但是打印this.refs.chart−1打印出来为NaN...，但是打
Echarts报错Error in mounted hook: “Error: Initialize failed: invalid dom.“
m0_74087046的博客
05-27 6858
Error in mounted hook: "Error: Initialize failed: invalid dom."
Echarts与Vue3中获取DOM节点可能出现的异常错误
最新发布
xuxian的博客
03-05 807
官方:返回一个浅层 ref，其值将与模板中的具有匹配 ref attribute 的元素或组件同步。参数匹配机制‌：useTemplateRe的参数需与模板中 ref 属性值必须完全一致‌响应式变量类型明确‌：返回值是一个 浅层 ref对象，其 .value 直接指向绑定的 DOM 元素或组件实例。
slot插槽 echart报错Dom：[Vue warn]: Error in mounted hook: “Error: Initialize failed: invalid dom.“found
努力飞起的菜鸟
06-21 4194
[Vue warn]: Error in mounted hook: "Error: Initialize failed: invalid dom." found in
this.$refs.xxx的小坑，Error in mounted hook: “Error: Initialize failed: invalid dom.“
Dell_Rockn的博客
12-29 3942
最近在vue项目中使用echarts的时候遇到报错，Error in mounted hook: "Error: Initialize failed: invalid dom."，这个错误就是dom元素还没准备就绪，但是我在mouted中初始化echarts，按理说不该报这个错。 反复查看代码，也没有问题，最终发现this.$refs.chart-1打印出来为NaN...，但是打印this.$refs控制台看到里面是有chart-1对象的，最后改名chart-1 ---&g...
echarts图表报错 Error in created hook: “Error: Initialize failed: invalid dom.“
qq_62851576的博客
02-26 1155
放在入了页面加载事件created里面，created这时候还只是创建了实例，但模板还没挂载完成。通过延迟加载getChart（）方法，使DOM先于getChart方法加载，为DOM加载提供时间。dom还没挂载完成，echarts.init() 就已经开始执行。setTimeout（）方法用于在指定毫秒数后调用。使用create情况下使用延迟加载。用mounted还是会报错。
vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.
jiangjunyuan168的博客
01-09 1483
在开发的过程中，项目中需要用到 echarts，引入后在渲染的过程中报错了：Initialize failed: invalid dom.这个，作者在以前也遇到过这种情况，在 vue2 中正常来说将 echarts 图表渲染操作放到 mounted 或者 $nextTick 函数中就可以了。但是在 vue3 的项目中作...
vue2报错echarts.js:28146 Uncaught Error: Initialize failed: invalid dom.解决方法
04-24
这个错误通常是由于在使用echarts.js时传递了无效的DOM元素引起的。解决方法如下： 1. 确保你传递给echarts的DOM元素是有效的，即确保DOM元素存在于页面中，并且在调用echarts之前已经加载完成。 2. 检查你传递给...
当Element UI里面el_dialog嵌套echart组件，打开el_dialog时报echarts.init Error: Initialize failed: invalid dom
迎接_成
01-22 2917
是因为打开el_dialog时，dom元素还没有渲染完成，所以用document.getElementId(“元素Id”)或者refs获取不到元素，导致echart.init报Error:Initializefailed:invaliddom.解决方法：1.可以使用‘vm.refs获取不到元素，导致echart.init报Error: Initialize failed: invalid dom....
dialog里的dom获取异常分析Error: Initialize failed: invalid dom
开心你呢的博客
10-10 3499
原因：mounted只能处理dom直接放到界面的情况，如果想将：如：echart组件使用的dom放到dialog里，可以监听dialog设置的open事件，当dialog打开时，它会挂在dialog里设置的dom，原因：在上次关闭dialog后，dialog里的组件已经挂载完成，关闭弹窗时并没有销毁，所以再次打开能够获取到dom。原因：dialog打开时，dom还没挂载完就访问，出现异常，使用nextTick或setTimeout即可。1、dialog必须打开后，才会挂载dom，
Error in nextTick: “Error: Initialize failed: invalid dom.“ found in
bpluoxong的博客
07-07 7156
这里主要是原因是dom还没挂载完成，导致报错，这里有几个处理办法：1.1 这里不要用created（用mounted），created这时候还只是创建了实例，但模板还没挂载完成 1.2 用this.$nextTick(()=>{}) (这个回调函数会在数据挂载更新完之后执行，所以可行) 1.3 使用Promise...
Error in created hook: “Error: Initialize failed: invalid dom.“
ALDNOAH_K的博客
11-05 5127
原因分析:我这边在 created l里做了一个refresh的一个定时刷新方法,但因为我将 refresh 方法放到后面就导致先是加载了 '生产统计','能源监控',,'质量墙','生产进度监控'等这几个方法,最后载 refresh方法,这才导致报错.解决方法:将refresh 方法最前面就行,让其先执行refres。报错解析:初始化时没有获取到DOM元素。
关于在vue中使用echarts时碰到的问题: Error Initialize failed invalid dom
qq_41038929的博客
07-31 7084
一，背景：单独封装了一个JS的echarts方法，组件中调用这个方法后就会报错Error Initialize failed invalid dom。 代码及报错如下： vue 组件中使用： 这是就会出现报错信息： 1 可能会报错：“Error: Initialize failed: invalid dom.” 原因是dom还没挂载完成，导致报错，这里有几个处理办法： 1.1 这里不要用created（用mounted），created这时候还只是创建了实例，但模板还没挂载完成 1.2 用this.$
Echarts报错： Error in v-on handler: “Error: Initialize failed: invalid dom.“
yolo_link的博客
07-01 3518
在使用Echarts遇到了这个问题。遍寻无果的情况下，我是怎么解决的？最开始使用，图表组件是正常的。可是怎么就出现这个问题了呢？ 同一个路由，我想展示不同图表组件构成的页面，所以采用了tab切换按钮控制单个页面的显示与隐藏。 注意！！！ 从我这个思路开始，就是我踩坑的第一步。 控制显隐想当然就采取了v-if。。。 万万忘了v-if可不是简单的控制元素显示和隐藏，它可是创建和销毁元素来达到所谓的显隐效果。 当然，上面都是我马后炮式的后知后觉，和报错交锋的时候依旧沉浸在代码逻辑层面。 之前有说过：像这种[Vue
vue中用到element的 弹框做echarts 的展示 报错Error in v-on handler: “Error: Initialize failed: invalid dom.“
Mr_wuying的博客
04-28 507
所以要在 this.$nextTick 里面写echarts 展示的功能去获取dom节点。点击按钮的时候我要弹框显示出来并且 echarts图标展示出来。这里翻译出来就是找不到对应的有效dom。
Initialize failed: invalid dom.
Really_gxy的博客
12-03 304
部分需要经过编译、挂载等一系列过程才会最终生成真实的。里的代码在组件初始化时就会执行，有可能会早于。元素还没有被挂载到页面上。的生命周期钩子函数来确保在。元素时，有可能这个时候。元素挂载完成后再进行。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值