vue 报 Cannot read property ‘init‘ of undefined

最新推荐文章于 2023-11-28 14:16:12 发布
原创 最新推荐文章于 2023-11-28 14:16:12 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文记录了一位后端开发者在Vue项目中遇到Echarts图表不显示的问题，错误提示为'Cannot read property 'init' of undefined'。通过在main.js中正确导入并使用echarts，解决了该问题。作者虽然不清楚具体原理，但通过实践找到了解决方案。

做为一名后端开发，因为工作需要，了解了一些前端vue知识，最近也是在vue框架碰见一个问题，在一个echarts页面中图表不显示，并且出现了这样的错误“Cannot read property 'init' of undefined”，经过分析觉得是没有import进去，或者是根本没有运用到echarts这个组件，以下是我碰见的问题并解决过程：

1.问题：

 

2：在main.js中找到导入的echarts 并在 import 后加入 * as （虽然我也不知道为什么，不太了解，但是成功了出现echarts图表，管他呢。。。）

 

JBOX_AJAX
关注
Vue中使用echarts，并解决“TypeError: Cannot read property ‘init‘ of undefined“报错
FpwgTcl的博客
09-14 636
请确保按照步骤正确安装和引入echarts库，并在初始化echarts实例时传入正确的DOM元素。如果您在使用echarts时遇到了报错"TypeError: Cannot read property ‘init’ of undefined"，这通常是由于echarts库未正确引入或者引入方式不正确导致的。检查依赖版本：确保您的Vue项目依赖的echarts版本与您安装的echarts库版本一致。语句中的echarts路径是否正确。安装完成后，在需要使用echarts的Vue组件中引入echarts库。
vue2/3 - 解决报错TypeError: Cannot read properties of undefined (reading ‘wrapper‘)，vue打包或运行时控制台报错完美解决方案
高级前端工程师
05-10 3533
vue3，vue2，报错，无法打包，无法运行，vue3打包时报错，vue打包build出错，wrapper属性，TypeError: Cannot read properties of undefined (reading ‘wrapper‘)，vue如何解决报错，浏览器控制台报错，npm run serve运行项目时正常显示，但npm run build构建时却报错，vue运行没问题但打包就会报错，怎么解决这个问题，如何解决问题并成功打包发布，代码中尝试访问一个未定义对象的 wrapper属性。在vue2
微信小程序获取头像
lfeishumomol的博客
05-08 7229
当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（），以减少内容安全风险对开发者的影响。在开发者工具上，input 组件是用 web 组件模拟的，因此部分情况下并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。
MiniProgramError 小程序真机测试报错
xl352302909的博客
06-12 6650
小程序真机测试报错
cannot read property ‘_init‘of undefined
qq_41659686的博客
01-08 443
mpvue解决报错cannot read property ‘_init‘of undefined 删除dist目录，然后重启项目
Cannot read property ‘init‘ of undefined
热门推荐
qq_44802808的博客
01-14 1万+
在项目中导入echarts插件时，报了这个问题，当时以为是，没有获取到dom元素，所以用$refs的形式获取dom元素 改变获取元素的方式后，还是报同样的错，但已经确定这两种方式都可获取到dom元素 于是，最后在网上搜索之后，发现需要在导入包的时候添加上 * as 即可 看网上说还有一种原因是因为echarts版本太高导致的，应该引入4.9.0或4.8.0版本，但尝试后没有解决我的问题 ...
vue中使用echarts及报错（Cannot read property ‘init‘ of undefined）处理
shinjie1210的博客
08-02 1506
安装步骤 项目控制台输入npm install echarts --save 找到main.js 引入 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 然后就可以按照官网文档里的5分钟上手内容使用了 这里给个简单例子 官网上扒的示例图表 <template> <div class="home"> <div id="echarts" style="width:6...
vue Echarts自适应浏览器resize报错：Cannot read property 'resize' of undefined
且听风吟的博客
07-19 1万+
Echarts自适应浏览器resize报错：Cannot read property 'resize' of undefined1.问题2.解决办法3.成果 1.问题 今天在做Echarts自适应浏览器时，发现一个问题：Cannot read property ‘resize’ of undefined。 Echarts插件绘制的柱状图正常情况下页面截图： 但是当我拖动浏览器窗口的边框进行缩放时...
【异常】报错：TypeError: Cannot read properties of undefined (reading ‘init‘)
本本本添哥
11-28 3000
在vue当中引用echarts，控制台报错： “TypeError: Cannot read properties of undefined (reading ‘init‘)
解决Cannot read property ‘init‘ of undefined
YanXiHelloWorld的博客
06-16 1133
var ztree = new $ZTree("dataTree", "/eamAssetsData/selectMenuTreeList"); ztree.bindOnClick(EamAssetsData.onClickMenu); ztree.init(); new对象的时候m
vue中引入echarts组件时报错：Cannot read property ‘init’ of undefined
m0_54585610的博客
03-10 648
1.错误详情： 2.错误解析： 导入echarts时用：import echarts from ‘echarts’ 出现 “Cannot read property ‘init’ of undefined” 报错， 3.改正方法： 引入echarts时，将 import echarts from "echarts"; 改成 import * as echarts from ‘echarts’； 后解决。 <script> //引入echarts import * a.
TypeError: Cannot read property ‘init‘ of undefined
qq_30815659的博客
04-07 1877
使用element 的echarts 进行图表渲染时 如果报TypeError: Cannot read property ‘init’ of undefined 可以在引入的时候修改 import * as echarts from 'echarts'
Uncaught TypeError: Cannot read property 'init' of undefined
hdn_kb的博客
02-11 7451
在工作中有一次遇到了前端控制台报错的问题： 这是我在使用zTree属性结构插件的时候遇到的问题，主要原因是：我在引入js的时候，将zTree.js放在了jquery.js的前面所导致的。 解决办法：将jquey.js文件放在最前面即可。 因此，我们在引入js文件的时候，如果需要引用jquery.js，则一定一定要把jquey.js文件放在做前面。 ...
页面前端 Cannot read property ‘init‘ of undefined 重复引入文件
weixin_41360070的博客
07-09 955
页面前端报init错误 Cannot read property ‘init’ of undefinrd 这是由于页面引入两个相同的第三方文件，一般是具有绝对地址的第三方文件 处理方法有： 1、保持引入的唯一性，把多余的引物代码注释或删除 2、将第三方文件下载到本地后作为资源文件引入 案例:zTree 引入两个jQuery 报错init of undefined错误 ...
Vue eCharts Cannot read property ‘init‘ of undefined 报错问题
EsquireY的博客
12-10 5493
在vue 项目中使用 eCharts ，但是项目一直报 init of undefined ，查阅很多资料，方法不一 1，元素没有设长宽 <template> <div class="container"> <div id="myChart" ref="myChart" style="width: 600px; height: 400px"></div> </div> </template> 2，初始化实例应该写在 .
uniapp和vue3报错Cannot read property ‘init‘ of undefined 或者 echarts.init is not a function
11-10 1803
报未定义错误，说明echarts未定义，echarts未引入成功。
Vue||引入echarts，初始化 init 报错Cannot read property ‘init‘ of undefined 或者 echarts.init is not a function
FQ_QIU的博客
06-01 4601
Vue引入echarts.js，初始化init()遇到的坑。
vue Cannot read property 'getElementById' of undefined
最新发布
01-14
### Vue 中 `getElementById` 报 `undefined` 错误解决方案 当遇到 `Cannot read property 'getElementById' of undefined` 的错误时，通常是因为尝试访问 DOM 元素的时间点不正确。在 Vue 生命周期中，DOM 更新并非立即完成，尤其是在组件挂载之前。 #### 方法一：使用 `nextTick` 为了确保 DOM 已经更新完毕再执行操作，可以利用 Vue 提供的 `$nextTick()` 函数[^1]： ```javascript this.$nextTick(() => { const mainChart = this.$refs.main; if (mainChart) { let myChart = echarts.init(mainChart); // 继续初始化图表逻辑... } }); ``` 这里推荐使用 `ref` 属性替代原生 `document.getElementById` 来获取元素节点，因为这是更符合 Vue 风格的做法。 #### HTML 结构调整建议 对于模板部分，则应相应修改为如下形式以便于通过 `ref` 获取目标容器: ```html <div ref="main" style="width: 600px;height:400px;"></div> ``` #### 方法二：生命周期钩子函数内处理 另一种方式是在合适的生命周期钩子里进行 DOM 操作，比如 `mounted` 或者 `updated` 阶段，在这些阶段里虚拟 DOM 被渲染到真实页面上之后才会触发相应的回调。 ```javascript export default { mounted() { this.initializeEcharts(); }, methods: { initializeEcharts() { this.$nextTick(() => { var chartDom = this.$refs.main; if (!chartDom) return; var myChart = echarts.init(chartDom); // 设置初始配置项和数据源... }); } } } ``` 以上两种方法都可以有效避免由于时机不当造成的无法找到指定 ID 的 DOM 对象的问题。值得注意的是，如果仍然存在相同类型的报错提示，可能还需要进一步排查是否有其他因素干扰到了正常的流程执行。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值