首页 前端知识 vue结合echarts时,浏览器报错Initialize failed: invalid dom

vue结合echarts时,浏览器报错Initialize failed: invalid dom

2024-05-14 23:05:51 前端知识 前端哥 334 980 我要收藏

先上截图:
初始化echarts放在mounted中
请添加图片描述

请添加图片描述

运行前端,报错:
请添加图片描述
分析原因:
在进行echarts初始化时,用到了dom元素,但是在mounted中,此时正好是dom元素加载的时候,所以相当于两个需求同时执行,或者说echarts初始化先执行,这样在echarts初始化时,不会获得已经加载完成的dom元素,因此报错

目前我的解决方案:
有些博主在mounted中加了一个settimeout方法,推迟一下,可以得到要求,但是我在尝试过程中发现,1.时间的设置需要,根据自己的代码试一试,2如果我在option中加了一些数据,时间就有需要重新设置,这鲁棒性有点不尽如人意

最后,我把上述的方案从mounted中删掉,放到了methods()中的一个函数中,此时效果达到了,在option中加东西也不用再调整时间了,如下:
请添加图片描述

echarts效果实现:
请添加图片描述

最后:
尽管看似功能实现了,但是具体深入的原理我还是说不明白,我会进一步研究,同时也希望大家不吝赐教,抱拳了
附上一个dom周期的文章:https://www.php.cn/vuejs/481416.html

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8643.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!