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

先上截图:
初始化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

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rabbit Coder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值