vue写echarts 报错 Cannot read property ‘init‘ of undefined“

最新推荐文章于 2022-05-18 21:31:29 发布
最新推荐文章于 2022-05-18 21:31:29 发布
阅读量4.6k 收藏 12
点赞数 22
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35567179/article/details/110734722
版权
  1. 试了在main.js里写
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

然后组件内引用

this.$echarts.init(document.getElementById('idname'));

无用


2. 又试了只在组件内引用

import echarts from 'echarts'

echarts.init(document.getElementById('idname'));

无用


3. 在init之前检查了document.getElementById('idname') 并不是null，是确实存在的对象



4. 最后main.js也不用了，import 也不用了，直接require

let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('myPancake'));

官方文档按需引入 ECharts 图表和组件：
https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

VUE3 全局使用aixos，解决Cannot read property ‘get‘ of undefined的问题
aj951225的博客
04-08 8172
原因：axios 不能像其他组件一样通过 Vue.use() 直接被引用 一、安装 npm install axios --save 二、在main.js插入import axios from ‘axios’ import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' const app = createApp(App) app.config.globalProperties.$axios =
echarts报错 Cannot read property ‘getAttribute‘ of undefined
飘来荡去这一生
09-07 4888
今天在review代码时，发现控制台莫名报错，Cannot read property 'getAttribute' of undefined 通过查看，问题定位在这一行，也就是echarts初始化的时候: const chart = echarts.init(this.$refs['chart']); 结合报错信息可以得知，错误原因是因为没获取到dom属性。 在vue中获取不到dom一般分为两种情况，一是在created中获取，这个时候只是创建了vue实例，dom并没有开始渲染。所以自然拿不到.
Uncaught TypeError: Cannot read property 'init' of undefined
hdn_kb的博客
02-11 7432
在工作中有一次遇到了前端控制台报错的问题： 这是我在使用zTree属性结构插件的时候遇到的问题，主要原因是：我在引入js的时候，将zTree.js放在了jquery.js的前面所导致的。 解决办法：将jquey.js文件放在最前面即可。 因此，我们在引入js文件的时候，如果需要引用jquery.js，则一定一定要把jquey.js文件放在做前面。 ...
Vue坑点杂谈（七）在Vue中引入Echarts报错 Cannot read property ‘init‘ of undefined
ODST_TheSolverO5的博客
12-13 2067
Vue坑点杂谈（七）在Vue中引入Echarts报错 Cannot read property ‘init’ of undefined 一、写在开头 最近使用Echart时发现与Vue有些不兼容的地方，会出现一些奇怪的报错，在这里记录一下帮助同样遇到问题的朋友们。 二、发现问题 出现问题是在mounted（）中使用官方示例的时候报了以下错误： Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”。 三、解决问
Cannot read property ‘init‘ of undefined
qq_44802808的博客
01-14 1万+
在项目中导入echarts插件时，报了这个问题，当时以为是，没有获取到dom元素，所以用$refs的形式获取dom元素 改变获取元素的方式后，还是报同样的错，但已经确定这两种方式都可获取到dom元素 于是，最后在网上搜索之后，发现需要在导入包的时候添加上 * as 即可 看网上说还有一种原因是因为echarts版本太高导致的，应该引入4.9.0或4.8.0版本，但尝试后没有解决我的问题 ...
解决Cannot read property ‘init‘ of undefined
YanXiHelloWorld的博客
06-16 1095
var ztree = new $ZTree("dataTree", "/eamAssetsData/selectMenuTreeList"); ztree.bindOnClick(EamAssetsData.onClickMenu); ztree.init(); new对象的时候m
vue中使用echarts及报错（Cannot read property ‘init‘ of undefined）处理
shinjie1210的博客
08-02 1461
安装步骤 项目控制台输入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...
引用echarts报错Cannot read property ‘init‘ of underfined
sunshineTing2的博客
01-14 214
检查一下 echarts 的版本 "echarts": "^5.0.0", // 替换为4.8.0 正确下载和使用 1.下载 ^4.8.0 版本的echarts npm install --save echarts@4.8.0 2.在main.js中引入 echarts（全局引入） import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在.vue页面中使用echarts <div ref="myChart" id="m.
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插件绘制的柱状图正常情况下页面截图： 但是当我拖动浏览器窗口的边框进行缩放时...
Vue中使用echarts报错，【TypeError: Cannot read property ‘init‘ of undefined】
MyBlog
08-26 386
将以下这行代码替换 import echarts from 'echarts' 替换代码 import * as echarts from 'echarts' 使用方式 <script> import * as echarts from 'echarts' export default { data () { return {} }, mounted () { const myChart = echarts.init(document.getElementById
cannot read property ‘_init‘of undefined
qq_41659686的博客
01-08 420
mpvue解决报错cannot read property ‘_init‘of undefined 删除dist目录，然后重启项目
vue 报 Cannot read property ‘init‘ of undefined
JBOX_AJAX的博客
08-18 2893
做为一名后端开发，因为工作需要，了解了一些前端vue知识，最近也是在vue框架碰见一个问题，在一个echarts页面中图表不显示，并且出现了这样的错误“Cannot read property 'init' of undefined”，经过分析觉得是没有import进去，或者是根本没有运用到echarts这个组件，以下是我碰见的问题并解决过程： 1.问题： 2：在main.js中找到导入的echarts 并在 import 后加入 * as （虽然我也不知道为什么，不太了解，但是成功重新了echa.
在vue中使用echarts出现Cannot read property ‘init‘ of undefined
weixin_54276998的博客
01-06 852
在vue中使用echarts出现Init is not defined 前面的博客有写具体的引入echarts的方法,这里主要讲“init”报错的问题 可能是安装的echarts版本太新导致的 1.先卸载echarts npm uninstall echarts --save 2.安装旧版本的 npm install echarts@4.2.0-rc.2 --save 基本就没什么问题了 ...
TypeError: Cannot read property ‘init‘ of undefined
qq_30815659的博客
04-07 1856
使用element 的echarts 进行图表渲染时 如果报TypeError: Cannot read property ‘init’ of undefined 可以在引入的时候修改 import * as echarts from 'echarts'
在使用zTree 框架时前端报错Uncaught (in promise) TypeError: Cannot read property ‘init‘ of undefined
热门推荐
weixin_55229531的博客
05-18 5万+
在使用zTree 框架时前端报错Uncaught (in promise) TypeError: Cannot read property 'init' of undefined
echarts Cannot read property 'init' of undefined 报错问题
qq_35363709的博客
03-04 9568
一： let myChart= this.$echarts.init(this.$refs.myChart); 可能报Cannot read property 'init' of undefined 的错 二： letmyChart= echarts.init(document.getElementById('myChart')); 可以试试，我试的可以哎 ...
ucharts报错Cannot read property 'restore' of undefined
最新发布
03-18
### 关于 uCharts 报错 `Cannot read property 'restore' of undefined` 的原因及修复方案 #### 原因分析 该错误通常发生在尝试调用未初始化的对象方法时。具体到 uCharts 中，可能的原因有以下几种： 1. **图表实例未正确创建** 如果在调用 `restore()` 方法之前，uCharts 图表实例尚未被成功初始化，则会导致此错误[^3]。 2. **数据加载顺序问题** 当数据还未完全加载或绑定到图表对象上时，直接调用 `restore()` 方法也会引发此类错误[^4]。 3. **生命周期管理不当** Vue 或其他框架中的组件销毁后再次访问已释放的资源也可能导致类似的错误。例如，在 Vue 组件卸载 (`beforeDestroy`) 后仍然试图操作图表实例[^1]。 4. **版本兼容性问题** 某些情况下，特定的小程序基础库版本或者 uCharts 版本可能存在 bug 导致无法正常工作。降低版本或更新至最新版可能会解决问题。 #### 修复方案 以下是针对上述原因提出的解决方案： 1. **确保图表实例已被正确初始化** 在调用任何图表方法前，请确认图表已经完成初始化并返回有效的实例对象。可以通过回调函数验证这一点： ```javascript const chart = this.$refs.uChart.init({ canvasId: 'myCanvas', type: 'line', series: [...], categories: [...], extra: {...} }, (canvas, width, height) => { console.log('Chart initialized successfully'); return {canvas, width, height}; }); if (!chart) throw new Error("Failed to initialize the chart instance."); ``` 2. **延迟执行恢复逻辑** 使用定时器或其他异步机制推迟对 `restore()` 方法的调用时间，直到所有依赖项都准备完毕为止。 ```javascript setTimeout(() => { try { this.chart.restore(); } catch (e) { console.error(e.message); } }, 500); // 调整延长时间以适应实际需求 ``` 3. **合理处理组件生命周期事件** 避免在组件销毁阶段继续引用已经被清理掉的对象属性或方法。可以在 `destroyed` 生命周期钩子中显式置空相关变量： ```javascript destroyed() { this.chart = null; } ``` 4. **升级/降级小程序 SDK 和插件版本** 若怀疑问题是由于版本不匹配引起，则建议查阅官方文档了解各版本间的差异，并据此调整当前使用的环境配置。必要时可尝试切换不同版本测试效果。 --- ### 示例代码片段 下面提供一段完整的实现样例供参考： ```html <template> <view class="container"> <canvas id="myCanvas"></canvas> <button @click="handleRestore">Restore Chart</button> </view> </template> <script> export default { data() { return { chart: null, }; }, mounted() { this.initializeChart(); }, methods: { initializeChart() { this.chart = this.$refs.uChart.init({ canvasId: 'myCanvas', type: 'bar', series: [{name:'Series A', data:[10,20,30]}], categories:['Jan','Feb','Mar'], animation:false }); if(!this.chart){ console.warn('Initialization failed.'); } }, handleRestore(){ if(this.chart && typeof this.chart.restore === 'function'){ this.chart.restore(); }else{ console.error('Invalid operation on uninitialized or invalid chart object.'); } } }, beforeDestroy(){ this.chart?.destroy(); // Optional cleanup step depending upon library behavior. } } </script> ``` --- ####
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值