关于在VUE中使用Echarts时出现Cannot read property getAttribute of null 问题

最新推荐文章于 2024-07-18 12:51:46 发布
最新推荐文章于 2024-07-18 12:51:46 发布
阅读量3k 收藏 2
点赞数 2
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38344500/article/details/106697011
版权

关于在VUE中使用Echarts时出现getAttribute of null问题


记录一下我自己遇到这种情况是在使用v-if切换echarts图时
就会这样报错，查过问题之后是因为DOM树改变了，而echarts图数据来了却找不到容器，尽管自己v-if绑定的判断值先改变，但是依然如此报错

解决方案：this.$nextTick() 这个方法可以延迟到DOM更新之后再执行

this.$nextTick(()=>{
  this.initChart(a,b,c)
})

在v-if判断之后用这个方法，让我的initChart()方法在DOM树更新之后完美展现切换了

凉辞_
关注
专栏目录
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
weixin_36106791的博客
07-15 2838
问题出现场景 今天在vue中引入echarts时，运行报错 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】 ## 问题排查 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： var myChart = echarts.init(this.$refs.map)
vue axios并发请求 【 解决echarts报错Cannot read property ‘getAttribute‘ of null】
weixin_52084329的博客
11-17 588
在写中国地图和世界地图切换的时候，由于要两次进行网络请求调用api，而echarts渲染又不能多次渲染，所以就报了这么一个错误：echarts.js Uncaught TypeError: Cannot read property ‘getAttribute’ of null 错误原因分析：解决方法： 让两个请求都调用完，在进行渲染——执行多个并发请求 官方示例： 使用axios配合axios.all()、axios.spread()同时发送多个请求，axios.all()并发执行两个请求，两个请求执行完成
vue中使用echarts出现报错： Cannot read property 'getAttribute' of null
柠檬不萌只是酸i
07-08 1万+
控制台出现 “TypeError: Cannot read property 'getAttribute' of null” 报错。 解决方法： （1）查看调用使用图表的id是否正确。 （2）需要将echarts.js文件放在</body>之前就行，但是不要放在<head></head> 里面。 （3）查看下页面文件加载的顺序是否正确。 以上3...
解锁Vue警报的迷雾：攻克“TypeError: Cannot read property ‘getAttribute’ of null”的奥秘
最新发布
2301_78183352的博客
07-18 385
在Vue的生命周期中，mounted钩子是一个至关重要的阶段，它标志着组件的DOM已经挂载完成，可以安全地进行DOM操作了。然而，正是这个阶段，也成为了“TypeError: Cannot read property ‘getAttribute’ of null”错误的高发区。简单来说，这个错误告诉你，你试图在一个不存在的DOM元素上调用方法，结果当然是竹篮打水一场空，还附赠一个错误提示。
vue echarts 报错 Cannot read property ‘getAttribute‘ of null
ownlight的博客
11-13 207
this.$nextTick(function () { this.drawCharts(); });
vue echarts Cannot read properties of null (reading ‘getAttribute‘)
kirana的博客
12-01 2022
错误代码： created() { this.echarts() }, mounted(){ }, methods: { echarts() { var chartDom = document.getElementById('main') // var chartDom = this.$refs.main; console.log(chartDom) var myChart = echarts.init(chartDom) .
vue 使用echart 报错Cannot read property 'getAttribute' of null
lllsj的博客
07-09 3811
Cannot read property ‘getAttribute’ of null 报错原因:echart dom 没有渲染完成 需要在代码外边加上 this.$nextTick(()=> {代码})
【ZeyFraのWeb开发经验03】关于在Element UI的el-dialog组件中使用echarts产生Cannot read property ‘getAttribute‘ of null
ZeyFraの博客
03-07 469
关于在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
Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"
jiuweiyaoy的博客
01-09 1819
//判断元素是否已加载,报错的原因就是因为第一次页面初始化加载时，元素和ref都未 //加载完成，就使用echarts.init(this.$refs.main),等再次使用时报错信息又没有 //因为缓存和时间的因素元素和ref都已经挂在完成 //所以在使用echart...
echarts在vue中的导入和入门使用以及Cannot read property ‘getAttribute‘ of null“的解决方法
qq_39687662的博客
07-30 769
echarts官网:https://echarts.apache.org/zh/index.html 先看效果图 1.echart导入vue 先在项目目录终端输入下面指令安装一下echart,用cnpm装会比较快 npm install echarts --save 或者 cnpm install echarts --save 在main.js中导入echart import echarts from 'echarts' Vue.prototype.$echarts = echa.
Echarts报错 Can't read property 'getWidth' of null
weixin_30764771的博客
09-28 1203
统计图报错: 这里的报错与echarts无关，与zrender有关，zrender是echarts依赖的canvas绘图库 你不需要了解zrender，这个问题是你代码出了错 谨记::代码的错 转载于:https://www.cnblogs.com/mangwusuozhi/p/9717410.html...
在Vue中使用Echarts，报错created hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
qq_45073203的博客
07-18 422
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
VUE中集成echarts时 getAttribute of null错误
zhoumouren88的博客
08-08 2598
错误 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null" 错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let my...
使用echarts错误：Cannot read property getAttribute of null
fearlazy
06-26 856
原文链接：https://www.fearlazy.com/index.php/post/303.html 现象： 使用echarts时，出现如上图错误。Uncaught TypeError: Cannot read property 'getAttribute' of null。 解决办法： 问题出在echart初始化时获取的的div不存在。检查发现复制Div的ID的时候把双引号也复制进来了，所以找不到。 解决办法就是给getElementById传入正确的ID。 --文章
[Vue warn]: Cannot read property ‘getAttribute‘ of null“
深圳最菜前端
08-06 1146
今天遇到一个这个问题 记录一下 运行vue出现的问题，后面网上搜了一下， 出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的 说直接点就是加载顺序的问题，然后找到了一个解决办法，使用vue的ref和$refs来解决 一般的写法，都是使用ID去绑定，比如 // html <div id="charts"> // xxxx </div> // js drawCharts () { let previewChart = this.$echarts.init
Vue第 39 篇，Vue项目报错，Uncaught TypeError: Cannot read properties of null (reading ‘getAttribute‘)
热门推荐
weixin_65793170的博客
03-21 1万+
vue项目报错，Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')，翻译：无法读取null属性(读取'getAttribute')，解析：getAttribute()是js获取属性方法，就是getAttribute不能读取null的属性，这种错误一般出现在使用Echarts和地图后，当切换到空白页面后，重置页面时，就回报类似错误，解决方法就是在报错之前做判断处理。
vue使用Echart 3秒调用实时请求报错Cannot read property ‘getAttribute‘ of null
weixin_46605745的博客
01-14 360
就是这个错，折磨了我一下午，上网查到的资料都是说这个就是没有获取到，元素报错原因:echart dom 没有渲染完成，解决方法也是各种各样都有 有的说是因为图表的外层包裹的盒子用的v-if改成v-show 有的是this.$nextTick(()=> {代码})这样的 有的说一版获取dom元素都是用document.getElementById换成ref就行 有的说是因为没有放进mounted里面 可是以上4种方法对我都无效，此处需要哭哭的表情o(╥﹏╥)o 需求： 先说下我的需求，因为产品经理需要.
vue项目中eCharts报错问题：vue eCharts Cannot read property ‘init‘ of undefined
qq_37550440的博客
05-13 282
1.安装cnpm install echarts --save 2. 在main.js引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.使用 <template> <div> <div id="myChart" :style="{width: '300px', height: '300px'}"></div> </div> </.
index.vue:119 Uncaught TypeError: Cannot read property 'toString' of null
05-11
这个错误通常表示在代码中尝试使用一个 null 变量的 toString 方法。这可能是因为代码中没有正确处理变量为空的情况，导致变量的值为 null...这样就能避免出现 "Cannot read property 'toString' of null" 这个错误了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值