当Element UI里面el_dialog嵌套echart组件，打开el_dialog时报echarts.init Error: Initialize failed: invalid dom

Element UI 中嵌套 ECharts 的解决办法
最新推荐文章于 2025-05-06 13:55:49 发布
原创 最新推荐文章于 2025-05-06 13:55:49 发布 · 2.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Element UI的el_dialog中使用ECharts组件时遇到的初始化错误，由于DOM未渲染完成导致无法获取元素。解决策略包括使用`vm.nextTick`延迟执行回调，设置`setTimeout`定时器，以及通过`watch`监听来确保在DOM更新后正确初始化ECharts。

是因为打开el_dialog时，dom元素还没有渲染完成，所以用document.getElementId(“元素Id”)或者refs获取不到元素，导致echart.init报Error:Initializefailed:invaliddom.解决方法：1.可以使用‘vm.refs获取不到元素，导致echart.init报Error: Initialize failed: invalid dom. 解决方法： 1.可以使用`vm.refs获取不到元素，导致

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.
jiangjunyuan168的博客
01-09 1536
在开发的过程中，项目中需要用到 echarts，引入后在渲染的过程中报错了：Initialize failed: invalid dom.这个，作者在以前也遇到过这种情况，在 vue2 中正常来说将 echarts 图表渲染操作放到 mounted 或者 $nextTick 函数中就可以了。但是在 vue3 的项目中作...
【ZeyFraのWeb开发经验03】关于在Element UI的el-dialog组件中使用echarts产生Cannot read property ‘getAttribute‘ of null
ZeyFraの博客
03-07 538
关于在Element UI的el-dialog组件中使用echarts的问题 问题描述： "Cannot read property 'getAttribute' of null" "ECharts Can't get dom width or height!" "Initialize failed: invalid dom" 原因： 当我们打开el-dialog时，dom元素是还没有渲染完成的 解决： // 使用setTimeout定时间器 open(){ this.dialogVisibl
el_dialog嵌套echart组件，打开el_dialog时报echarts.init Error: Initialize failed: invalid dom.
harry034的博客
05-25 4918
是因为打开el_dialog时，dom元素还没有渲染完成，所以用document.getElementId("元素Id")获取不到元素，导致echart.init报Error: Initialize failed: invalid dom.解决方法：可以使用vm.$nextTick([callback]);将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新...
echarts报错问题initialize failed：invalid dom
ping
05-06 1415
而 onMounted 钩子函数会在组件挂载完成后被调用，此时组件内的 DOM 元素已创建好，能保证 document.getElementById 可以正确获取到对应的图表容器元素，进而顺利初始化 ECharts 图表。在 onMounted 钩子函数之外调用 document.getElementById ，此时 Vue 组件可能还未完全渲染到 DOM 树中，对应的 pie - chart 元素还不存在，就去获取它，导致获取失败。钩子函数确保组件挂载到 DOM 后执行代码。
dialog里的dom获取异常分析Error: Initialize failed: invalid dom
开心你呢的博客
10-10 3577
原因：mounted只能处理dom直接放到界面的情况，如果想将：如：echart组件使用的dom放到dialog里，可以监听dialog设置的open事件，当dialog打开时，它会挂在dialog里设置的dom，原因：在上次关闭dialog后，dialog里的组件已经挂载完成，关闭弹窗时并没有销毁，所以再次打开能够获取到dom。原因：dialog打开时，dom还没挂载完就访问，出现异常，使用nextTick或setTimeout即可。1、dialog必须打开后，才会挂载dom，
vue使用echarts报错Initialize failed: invalid dom
qq_51066068的博客
09-22 650
Initialize failed: invalid dom
echarts报错vue.esm.js?efeb:3736 Error: Initialize failed: invalid dom.
weixin_45682701的博客
09-07 514
vue.esm.js?efeb:3736 Error: Initialize failed: invalid dom.
高德地图Error: Invalid Object: LngLat(NaN, NaN)报错
weixin_54231578的博客
07-23 872
这个报错一开始出现的莫名奇妙，不清楚哪里触发的，找了解决答案，很多都是设置高度就能解决问题。结果无效（有些页面应该可以解决），后来同事也有类似问题，说滚动就会报错（），其他页面数据过多，出现滚动条就会报错。设置绝对定位，终于解决了。
[Vue warn]: Error in v-on handler: "Error: Initialize failed: invalid dom." found in ---> <ElButton> at packages/button/src/button.vue <Electricity> at src/components/common/electricity-chart.vue <Energy> at src/pages/device/report/energy/energy.vue <ElMain> at packages/main/src/main.vue <ElContainer> at packages/container/src/main.vue <Home> at src/pages/Home.vue <App> at src/App.vue <Root>解释一下
最新发布
06-07
Errorinv-onhandler:"Error:Initializefailed:invaliddom."解决方案”用户正在引用三个引用：-引用[1]:描述了错误的原因：当使用v-if来切换tab时，导致图表组件被销毁，从而在初始化ECharts时dom无效。-引用[2]:提供...
el-dialog组件中使用Echarts工具
weixin_48495158的博客
04-11 846
【代码】el-dialog组件中使用Echarts工具。
获取不到element对话框dialog里的dom元素
芳草萋萋鹦鹉洲哦
09-23 3060
当要对dialog进行dom操作时（比如用echarts做个图表），发现控制台报错，找不到节点？？？真让人头大。 原来这个dialog它竟然是懒加载的！！！！ 婊担心，它footer是实时加载的，so是时候来一波骚操作。 把要获取的节点放在footer里就好了！ <!-- 对话框 --> <el-dialog title="" width='1000px' :visible....
centos 开机后提示failed to initialize packaging backend
u010454261的博客
05-25 2762
使用centos时，每次开机总提示“failed to initialize packaging backend”,在网站http://fengyuzaitu.blog.51cto.com/5218690/1557889的博客中找到了解决问题的办法，记录一下。 问题原因：无法初始化安装包的后台进程，有可能是其他的安装包工具正在同时运行导致 解决方案：将未曾完成的下载安装包删除。
el-dialog中无法显示echarts
bamboo_007的博客
06-18 614
el-dialog中无法显示echarts
Vue 3 中按需引入 ECharts,el-dialog使用ECharts不显示的问题。
strxiaojie的博客
02-26 1434
【代码】Vue 3 中按需引入 ECharts。
el-dialog里加入echarts曲线图，显示不出来
weixin_56253950的博客
02-16 741
el-dialog里加入echarts曲线，曲线不显示和闪现一下就消失，也不报错，不知道是什么原因。
Element Dialog 对话框未弹出前不渲染问题导致报错
LinMin的博客
02-08 1104
1.解决方案 在未弹出前不执行渲染，在组件中通过监听显示弹窗变量isShowDialog来做判断是否已弹出，如果弹出就执行渲染操作 组件部分代码 export default { name: 'MapDialog', props: { dialog: { type: [Boolean], required: true, default: false } }, data() { return { value: '',
VUE+Element首次打开Dialog加载子组件数据未渲染（不显示）
学点的优快云博客
11-16 8801
VUE+Element第一次打开弹窗组件时，父组件传给子组件的数据在视图中未显示，第二次以后再打开就可以显示（已解决）
el-dialog中echarts图表不显示的解决方案
用于分享前端相关的知识和架构体系
11-08 2041
在vue的项目开发中，会有这样一种情况，我们需要在dialog中防止echarts图示，但是在上手的时候会发现，第一次打开dialog时图示不会显示，但是第二次打开之后就显示了。
Initialize failed: invalid dom.——带你深入因操作dom不当带来的错误
热门推荐
不经一翻彻骨寒，怎得梅花扑鼻香
12-29 10万+
浏览器控制台报错，初始化失败，不合法的dom(Initialize failed: invalid dom.) 此类错误的原因通常是因为试图操作一个未就绪的dom(或未被创建，或未完全加载等等)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值