echart 报错Cannot read property ‘getAttribute‘ of undefined

最新推荐文章于 2023-07-25 16:56:50 发布

热忱学习

最新推荐文章于 2023-07-25 16:56:50 发布

阅读量313

点赞数

分类专栏：保存代码 vue js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42180156/article/details/119911603

版权

vue 同时被 3 个专栏收录

25 篇文章

订阅专栏

保存代码

16 篇文章

订阅专栏

6 篇文章

订阅专栏

这篇博客探讨了在前端开发中遇到的一个常见问题——DOM元素未完全加载时尝试绘制图表导致的错误。通过使用Vue.js的$nextTick方法，确保在DOM更新后执行drawpowerline()函数，从而避免了这个问题。这种方法对于优化前端性能和提升用户体验至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要等dom加载完之后在加载图表否则就会报这个错误

加上这句代码就能解决

    this.$nextTick(function (){

              this.drawpowerline()

        })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

热忱学习

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3使用ECharts 踩坑记录：`Cannot read property ‘type‘ of undefined` 的解决方案

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

12-06

313

vue3使用ECharts 踩坑记录：一旦触发 `resize` 方法就报错`Cannot read property 'type' of undefined` 的解决方案

[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) 解...

参与评论您还未登录，请先登录后发表或查看评论

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并没有开始渲染。所以自然拿不到.

echart报错 Cannot read property ‘getAttribute‘ of undefined

lojieo的博客

11-19

1万+

Error in created hook: "TypeError: Cannot read property 'getAttribute' of undefined" 用的Vue,第一反应是echart的引用错误，然后用cdn的方式引入，也是这样的错，最后发现是生命周期的原因用的created调用方法官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el .

微信小程序开发使用echarts报错Cannot read property ‘getAttribute‘ of undefined

晚风的博客

07-25

1691

我在小程序圈中的区域渲染echarts图标报错了，报错提示Cannot read property 'getAttribute' of undefined。

项目中报Cannot read property ‘getAttribute‘ of undefined

eliodadada的博客

11-19

840

项目中用到了echarts图表每次切换路由的时候，控制台就会报一堆错误：Cannot read property 'getAttribute' of undefine 这是在火狐浏览器的报错：经验证，发现是设置了图表自适应导致的, 有多个图表，然后使用是addEventListener来进行图表自适应，但是在离开当前页的时候，没有清除，就导致了上面的报错了解到原因后，当离开页面的时候，进行清除就可以了顺便，...

在element-ui的dialog弹框中使用echarts报错，不能出现图表TypeError: Cannot read property ‘getAttribute‘ of undefined

丑小鸭变黑天鹅的博客

09-01

2379

TypeError: Cannot read property 'getAttribute' of undefined问题描述分析原因解决办法问题描述最近在写一个vue项目，用的是element-ui框架，其中一个业务需求需要点击之后弹出一个dialog框，然后在这个框里进行渲染绑定的echarts。操作步骤没问题，和以往的操作一样，先是安装echarts使用 npm install echarts@4.8.0 --save 然后再main.js文件中引入并挂载到全局中 // 引入echarts im

Cannot read property 'getAttribute' of undefined

最新发布

08-06

这个错误是因为无法获取到页面的元素，导致无法读取元素的属性。根据引用的正确代码，你可以在this.$nextTick回调函数中处理这个...这样就可以避免出现"Cannot read property 'getAttribute' of undefined"的错误了。

“TypeError: Cannot read property ‘getAttribute‘ of undefined“

tanfei_的博客

03-21

941

"TypeError: Cannot read property 'getAttribute' of undefined"

TypeError: Cannot read property 'getAttribute' of undefined

奔跑的痕迹的博客

12-31

5126

今天使用echarts + vue 做图标，运行时提示vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of undefined" ’ 网上找了些朋友说是，什么要将加载放到mounted的this.$nextTick中，其实不...

typeerror: cannot read property “getattribute‘ of undefined“

tangxiaobao2016的博客

01-27

1255

typeerror: cannot read property “getattribute’ of undefined” 错误代码：这种情况你是无法获取这个元素的任何信息正确代码：在this.$nextTick 回调里处理，是dom加载完成之后就能获取元素，并进行相应操作 ...

TypeError:cannot read property ‘getAttribute‘ of undefined

风如也的博客

10-27

2430

报错场景：页面切换路由时报错报错原因：使用 Vue + echarts，因为页面中使用了 echarts 图表，在初始化图表后，dom 元素还未被初始化加载出来，导致 echarts 在渲染时候报错示例代码： drawPie(){ // 总体告警数饼图 // 基于准备好的dom，初始化echarts实例 let ref = this.$refs.pie if (ref && ref !== undefined) { let myChart = this.$

76.解决Vue引用echarts报错Cannot read property ‘getAttribute‘ of undefined

银河与猫的博客

12-22

580

记录一下防止下次遗忘： vue使用echarts报错TypeError: Cannot read property ‘getAttribute‘ of undefined_weixin_40624809的博客-优快云博客问题情况自定义一个名为change的函数，函数里面是echarts的渲染代码在created里面调用change，报错：TypeError: Cannot read property ‘getAttribute’ of undefined解决方案在mounted里面调用，或者在crea

报错Cannot read property ‘getAttribute‘ of undefined解决办法

B_cherry的博客

12-20

7202

报错Cannot read property 'getAttribute' of undefined的解决办法不同于其他问题我的解决方法不同于其他问题属于个人的小笔记，如果能帮助到大家那更好。就是今天在渲染echarts环形图的时候，总是报一个找不到对象的问题。在网上找了好多资料，什么在mounted里执行渲染echarts的方法，在回调函数this.$nextTick()里渲染方法，延时。。。都不好用。我的解决方法后来在调用接口成功以后再执行渲染echarts的方法就好了。个人理解是，数

Apache访问页面出现时Uncaught TypeError: Cannot read property 'getAttribute' of undefined错误

小小黑的博客

04-25

1315

在配置完Apache，访问新建的jndex.jsp文件时，F12进入页面检查，发现出现如下错误：若配置没有问题的话，页面却能正常显示，点进错误：意思是这个函数没有取到html的script元素，即变量t没有赋到script元素的初值，出现了undefined的变量t，所以在编写JSP时，要加上<script>，加完后刷新页面就不会出现这个错误了。 ...

vue echarts Error in nextTick: “TypeError: Cannot read property ‘getAttribute‘ of undefined“

@必意玲

07-08

1万+

写在前面：导致 Error in nextTick: “TypeError: Cannot read property ‘getAttribute’ of undefined” 报错原因就是因为获取不到页面的元素，导致这种报错的因素很多种，我这里至少记录下在vue子组件件中使用echart获取不到页面元素，使用vue插槽解决。 1. 报错 Error in nextTick: "TypeError: Cannot read property 'getAttribute' of undefined" 2..

props传值遇Cannot read property getAttribute of undefined异常

奔跑的痕迹的博客

05-27

947

今有一个echarts 图标的子组件使用watch 监听接受父组件传入的data，而在父组件页面再次根据日期筛选数据，重新传入子组件进行图表重绘时老实会提示报错 vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'getAttribute' of undefined" found in 原来是异步加载数据切换的锅，.

vue中引用echarts出现TypeError: Cannot read property 'getAttribute' of undefined

weixin_42095871的博客

04-20

2329

this.$nextTick(() => {xxx}); 解决vue中引用echarts出现"TypeError: Cannot read property 'getAttribute' of undefined"错误。在调用echarts的位置直接使用上述方法即可，不需要像很多人说的非要在 "mounted"之中调用。例如： //统计图 sta...