vue2/3 - echarts报错Error in callback for watcher “chartSource“: “Error: Initialize failed: invalid do

已于 2024-09-12 16:57:21 修改
阅读量2.7k 收藏 3
点赞数 3
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： echarts vue.js vue2 vue3 chartSource 详细解决图表不显示报错 加了v-if还是不行怎么办
于 2024-05-13 10:33:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/138791026
版权

问题描述

在vue2、vue3开发中，vue+echarts出现报错：Error in callback for watcher “chartSource“: “Error: Initialize failed: invalid dom.“，图表不显示并控制台出错，echart渲染图表失败。

其他教程都无法解决，本文完美搞定此问题。

在这里插入图片描述

详细解决

这个问题，由于

了解本专栏 订阅专栏 解锁全文
vue2/3 - 报错 Error: error:0308010c:digital envelope routines::unsupported（项目run server / run dev运行报错）
高级前端工程师
06-06 3806
vue，报错，vue2，vue3，node.js，npm，yarn，cnpm，出现错误，项目启动报错，vue报错Error: error:0308010c:digital envelope routines::unsupported，解决方案，如何解决，降低node版本还是不行，突然无法启动项目了，npm run dev，npm run server，opensslErrorStack: ['error:03000086:digital envelope routines::initialization e
出现 Error in callback for watcher “xx“: “TypeError: this.xx.forEach is not a function“ 解决方法
码农研究僧的博客
03-17 858
出现 Error in callback for watcher "xx": "TypeError: this.xx.forEach is not a function" 解决方法
echarts报错：Error in callback for watcher “chartSource“: “Error: Initialize failed: invalid dom.“
qq_42103673的博客
01-07 4038
Error in callback for watcher "chartSource": "Error: Initialize failed: invalid dom."
Error in callback for immediate watcher “chartsData“: “Error: Initialize failed: invalid dom.“
2301_80868127的博客
04-01 1236
在封装中推荐大家使用监听器来实现触发更新，这样会使你的效果最佳，也最保险，不会出现dom未生成的情况，我们通常会把一些可变的值传递给子组件，比如data，在data初始化还是空的时候我们就在编译父组件时进行了传递，子组件监听初次执行，但是不显示因为是空数据，当我们函数运行完，拿到了后台数据进行再次赋值，子组件的props同时更新，被监听到后就会再次触发渲染函数，echarts图表就正常显示了。函数在初始化时延时调用；
Vue中遇到Error in callback for watcher “XX“: “TypeError: Cannot read property ‘call‘ of undefined“
Holy_Jack的博客
09-09 8469
Vue中遇到Error in callback for watcher “XX“: “TypeError: Cannot read property ‘call‘ of undefined“，简要记录
Vue中报错Error in callback for watcher “data“: “TypeError: Cannot read property ‘children‘ of null“
JAVA_ZHZ的博客
12-17 2万+
今天用vue做查询的时候，查询数据库中存在的数据正常，查询空数据就是出现下面报错： 然后我就想到没有做非空判断导致的，我就在代码上加入了判断，如下： if (data && data.code === 0 && data.user !== null) { this.dataList = data.user; this.totalPage = data.user.totalCount; } 结果还是不行，后
vue中watch的报错处理Error in callback for watcher “playing_list“:**
08-19 1万+
一般报这个错就是你watch监听中，对应的数据监听函数中出现了bug。 查找资料，都说是箭头函数引起的this指向问题，但是我的并没有写。 后来发现，我的是监听到数据变化就去刷新echarts，即重新绘制图表，但图表容器没有获取到，我直接绘制造成的。 watch:{ playing_list:function(newvalue,oldvalue){ if(this.dialogVisible_assess){//图表在弹框中，需要在弹框显示时重新绘制 if(t
vue2项目中使用到echarts时，ECharts 报错问题：Initialize failed: invalid dom的报错原因
weixin_54193181的博客
08-09 1806
项目中使用到echarts时，ECharts 报错问题
vue2/3 - 解决报错 error:0308010C:digital envelope routines::unsupported（vue项目运行run或打包build时浏览器控制台报错，详细解决
高级前端工程师
04-12 2841
vue，vue2，vue3，node.js，error:0308010C:digital envelope routines::unsupported，vue错误代码0308010C，浏览器控制台报错，如何解决vue报错，vue报错digital envelope routines::unsupported，node报错如何解决，npm run dev，npm run build，运行报错，打包报错，vue前端，无法解决怎么办，更换了版本也不行怎么办，换了node版本也不行咋办，在vue2、vue3项目中，
vue2/3 - echarts报错TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)详细解决方案！
最新发布
高级前端工程师
07-11 1978
vue2，vue3，nuxt，echarts，图表，日历图表，柱状图，饼图，解决echarts中TypeError: Cannot，还是报错，不行怎么办，TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)，vue echarts 报错queryComponents不存在，echart报错，解决echart，在使用案例的echart的日历图表的时候，报错，在使用echarts将关系图中的结点用饼图替换的代码编程过
vue2/3 - 解决报错Error: Cannot find module ‘babel-plugin-import‘（vue2/vue3报错无babel-plugin-import模块详细解决教程
高级前端工程师
03-04 3237
vue，vue2，vue3，Error: Cannot find module 'babel-plugin-import'，vue报错找不到babel-plugin-import模块，babel-plugin-import，vue运行项目时出现报错，vue打包编译build提示报错，解决vue报错，如何解决在vue网页中出现报错，安装axios依然不行，执行npm install antd babel-plugin-import依然报错怎么办，安装了依然提示报错咋办，The package manager
解决报错Error in callback for watcher “value“: “Value should be trueValue or falseValue.“
qq_45094682的博客
05-15 535
来看一下报错原因，[Vue warn]: Error in callback for watcher “value”: “Value should be trueValue or falseValue.” 报错原因 来看一下是怎么找到错误的
[VUE WARN]: ERROR IN CALLBACK FOR WATCHER “data“，监听数据时报错
weixin_48986139的博客
09-30 7573
关于报错 [VUE WARN]: ERROR IN CALLBACK FOR WATCHER “data”，“TypeError: Cannot read properties of null (reading ‘xxxxxxx’)” 含义 这个错误是你监听data时方法里的值为null，造成调用xxxxxxx时导致报错, 解决办法 一般可以在调用方法前，确保它存在，例如下图： @Watch('data') 你的监听函数的名(newVal){ this.$nextTick(()=>{
vue: Initialize failed: invalid dom 之 dom加载出现的问题
热门推荐
smalCat的博客
04-08 3万+
这里遇到的问题是 引入 Echarts因为在Dom还没加载的时候，option 获取元素，echarts.init(document.queryselect(’#dom’)) 就开始检测dom，并尝试去获取它，但是在vue中引用echarts的中，发现在模板dom还没加载的时候 echarts.init() 就已经开始执行，所以会报错 Initialize failed: invalid dom ...
Vue warn]: Error in callback for watcher “treeData“: “Error: invalid contain
qianduan66的博客
09-06 257
【代码】Vue warn]: Error in callback for watcher "treeData": "Error: invalid contain。
常见错误总结
orq18810575870的博客
08-25 711
常见的踩坑总结： 1 JSON.parse（）  使用函数时出现 “SyntaxError: Unexpected token o in JSON at position 1”的错误提示，这里一般是类型错误，JSON.parse要求传入的是字符串类型，如果传入的参数是对象，就会有这个错误信息   2 选出来的节点值是null： 这种错误原因一般有两个： 1 不存在该节点 2 有这个节...
Vue中使用echarts弹窗报错：Error in callback for watcher “visible“: TypeError: Cannot read propert ‘xx‘ of...
KangMino的博客
02-21 5178
前言： 相关代码https://blog.csdn.net/KangMino/article/details/123015094 问题： 在写弹窗watch部分时，原本是这样写的 watch: { visible(val) { this.showDialog = val if (val === true) { this.fetchDetail() } }, showDialog(val) { this.$emi
[Vue warn]: Error in callback for watcher “lss“: “TypeError: Cannot read properties of undefined
一个非常Cool的人
09-26 4348
[Vue warn]: Error in callback for watcher "lss": "TypeError: Cannot read properties of undefined
vue报错：Error in callback for watcher “options“: “TypeError: Cannot read propertie ‘level‘ of null
qq_33911541的博客
05-09 2962
vue报错：Error in callback for watcher "options": "TypeError: Cannot read propertie 'level' of null
vue2报错echarts.js:28146 Uncaught Error: Initialize failed: invalid dom.解决方法
04-24
这个错误通常是由于在使用echarts.js时传递了无效的DOM元素引起的。解决方法如下： 1. 确保你传递给echarts的DOM元素是有效的，即确保DOM元素存在于页面中，并且在调用echarts之前已经加载完成。 2. 检查你传递给echarts的DOM元素的选择器是否正确。确保选择器能够准确地选中DOM元素。 3. 确保在调用echarts之前，页面中已经引入了echarts.js文件。可以通过在HTML文件中添加`<script>`标签来引入echarts.js文件。 4. 如果以上方法都没有解决问题，可能是由于其他原因导致的。你可以尝试查看浏览器的开发者工具控制台，看是否有其他错误信息提供更多线索。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值