Vue中使用echart组件报错 Cannot read property 'getAttribute' of null

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

https://img-blog.csdnimg.cn/20190626225941507.png

// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('achievementAnalysis'))

这段文字是说：在成功载入dom后才会去正常初始化echart实例，

而我之前不太明白，忽略了知道总报上图的错误，而不自知。

在vue中找个了好的方法来避免这个为建立dom就初始化echart图的问题，方法如下：

var ana = this.$refs.achievementAnalysisChart;
        if (ana) {
          console.log('ana不为空');
          let myChart = this.$echarts.init(ana)
// 基于准备好的dom，初始化echarts实例
// let myChart = is.$echarts.init(document.getElementById('achievementAnalysis'))

该方法的目的是利用ref和$ref来替代document.getElementById(achievementAnalysis)的方式，获取该标签的内容。(注：上面代码不完整，细心的人可能会发现还缺少个“）”符号，如果需要的使用的话，请注意。）

滴水成溪
关注
专栏目录
[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) 解...
【ZeyFraのWeb开发经验03】关于在Element UI的el-dialog组件中使用echarts产生Cannot read property ‘getAttribute‘ of null
ZeyFraの博客
03-07 467
关于在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
echarts报错 Cannot read property ‘getAttribute‘ of undefined
飘来荡去这一生
09-07 4674
今天在review代码时，发现控制台莫名报错，Cannot read property 'getAttribute' of undefined 通过查看，问题定位在这一行，也就是echarts初始化的时候: const chart = echarts.init(this.$refs['chart']); 结合报错信息可以得知，错误原因是因为没获取到dom属性。 在vue中获取不到dom一般分为两种情况，一是在created中获取，这个时候只是创建了vue实例，dom并没有开始渲染。所以自然拿不到.
vue 使用echart 报错Cannot read property 'getAttribute' of null
lllsj的博客
07-09 3811
Cannot read property ‘getAttribute’ of null 报错原因:echart dom 没有渲染完成 需要在代码外边加上 this.$nextTick(()=> {代码})
解锁Vue警报的迷雾：攻克“TypeError: Cannot read property ‘getAttribute’ of null”的奥秘
最新发布
2301_78183352的博客
07-18 384
在Vue的生命周期中，mounted钩子是一个至关重要的阶段，它标志着组件的DOM已经挂载完成，可以安全地进行DOM操作了。然而，正是这个阶段，也成为了“TypeError: Cannot read property ‘getAttribute’ of null”错误的高发区。简单来说，这个错误告诉你，你试图在一个不存在的DOM元素上调用方法，结果当然是竹篮打水一场空，还附赠一个错误提示。
使用echarts错误：Cannot read property getAttribute of null
fearlazy
06-26 850
原文链接：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使用 echarts 加载报错 TypeError: Cannot read property getAttribute of null？
小许的博客
01-11 1万+
报错信息 原因 我在页面中使用了v-if ，在tab页面中没有dom，所以echarts渲染找不到dom节点。 改成v-show就可以了 在这里插入代码片
js报错：Cannot read property 'getAttribute' of null问题
ruanhongbiao的专栏
07-01 9802
在vue中使用echarts时，在图表元素并未加载的情况下进行eharts.init（）,会发生此错误，因为eharts并未找到该元素，故无法对其进行渲染。echarts.js引用放在head中或者放在body中HTML代码的前面了，造成加载时阻塞后面的html。 解决方案： 1.查看填写的id是否真实存在，若不存在，当然无法根据getElementById来找到该元素； 2.将echart...
vue axios并发请求 【 解决echarts报错Cannot read property ‘getAttribute‘ of null】
weixin_52084329的博客
11-17 586
在写中国地图和世界地图切换的时候，由于要两次进行网络请求调用api，而echarts渲染又不能多次渲染，所以就报了这么一个错误：echarts.js Uncaught TypeError: Cannot read property ‘getAttribute’ of null 错误原因分析：解决方法： 让两个请求都调用完，在进行渲染——执行多个并发请求 官方示例： 使用axios配合axios.all()、axios.spread()同时发送多个请求，axios.all()并发执行两个请求，两个请求执行完成
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 报错Error in mounted hook “TypeError Cannot read properties of null (reading ‘getAttribute‘)“
m0_67400972的博客
03-03 3045
搭建项目配置Echarts地图时，在运行时vscode不会报错正常运行，但开发者工具仍然报出“Error in mounted hook: "TypeError: Cannot read properties of null (reading ‘getAttribute’)"错误，并且不显示配置地图，具体如下 【解决过程】： 在CSDN，掘金，简书等一系列查找都没有看到相对应的解决方法，一脸懵，里面大多数报错都是跟自己相类似的，但又完全不是的 查看代码，并没有发现什么异常 将代码使用控制台打印，能正常显
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 587
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
js 报错 Cannot read property ‘getAttribute‘ of null
热门推荐
dongsir
06-26 3万+
echarts.js Cannot read property 'getAttribute' of null，Uncaught TypeError: Cannot read property 'getAttribute' of null 根据报错信息查找原因发现是因为 实例化echarts的元素不存在，查看官方文档发现： // 基于准备好的dom，初始化echarts实例 var ...
Cannot read property ‘getAttribute‘ of null什么原因
weixin_49698648的博客
11-04 1769
Cannot read property ‘getAttribute‘ of null，vue使用echarts报错，原因是找不到echarts需要的dom容器 所以不能放在vuecreated生命周期中初始化echarts的方法 放到mounted（dom挂载后）生命周期函数中可以加载出来 ...
[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
Echarts报错Cannot read property ‘getAttribute‘ of null解决方法
山不在高的博客
08-23 1万+
  使用Echarts时控制台提示如下错误：   该错误的实质是执行echarts.init(document.getElementById('pie_fanzui'))代码时HTML文档中没有id为pie_fanzui这个元素。不信你使用console.log(document.getElementById('pie_fanzui'))这句代码打印出来看一下！如果确实未定义，则定义一下再次运行即可。   很多人可能会说我文档中有定义这个节点啊，但是为什么还出现这个错误。这种情况对应另外一个问题——HTM
在Vue中使用echarts/axios，解决“TypeError: Cannot read property ‘....‘ of undefined”报错
weixin_59191887的博客
11-20 1557
console.log（this.$echarts） console.log（this.$axios） 你会发现，打印出来是undefined,为什么呢？ 去看看 main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' import * as echarts from 'echarts' import "../
Vue 项目打包后，报：Cannot read property ‘echarts’ of undefined
qq_36291747的博客
06-29 4538
1. 问题说明 在 Vue 项目中，使用 echarts 来为项目添加图表。在本地运行测试时，是正常无错误的。可是，当把项目打包上线时，页面一直是白屏，且浏览器控制台输出如下错误： TypeError: Cannot read property 'echarts' of undefined 错误信息截图如下： 2. 问题分析 从错误信息推测，是某个地方使用 x.y 形式调用 echarts 时，x 为 undefined 导致的错误。 回到项目里，使用到 echarts 的地方大致有 2 处，分析一下：
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 中 用foreach 遍历 报错 Cannot read property ‘forEach‘ of undefined“ 为什么
05-25
这个错误通常是因为你对一个 `undefined` 或 `null` 的值使用了 `forEach` 方法，而 `forEach` 方法只能用于数组或类数组对象。请确保你在使用 `forEach` 方法之前已经对需要遍历的数组进行了初始化，例如： ```javascript // 定义一个数组 const arr = [1, 2, 3]; // 使用 forEach 遍历数组 arr.forEach(item => { console.log(item); }); ``` 如果你还是遇到了这个错误，请检查一下你的数据是否正确初始化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值