vue3中使用echarts出现图表没有加载成功 Initialize failed: invalid dom,或图表溢出父容器情况。
出现这个问题很可能是渲染时间的问题,因为我们把生成图表的时间放在了mounted这个周期上,这时候很可能会出现,我图表挂载了但是我的父容器布局还没加载完,所以图表找到的父容器就会去找到已经渲染好的父容器,很有概率是'爷爷容器',所以超出了父容器。因为,在使用时,按照vue的生命周期,有时候会出现,图表渲染时,dom节点还没加载出来。在使用echarts时,按照官网的代码复制进来后发现,图表没有加载
·
1.问题描述
在使用echarts时,按照官网的代码复制进来后发现,图表没有加载进来,提示dom节点无效。

2.问题分析
因为,在使用时,按照vue的生命周期,有时候会出现,图表渲染时,dom节点还没加载出来。此时需要加入钩子函数,onMounted。

3.新问题
加入了钩子后又发现,图是有了,但是图表的长度超出了我的父容器。

出现这个问题很可能是渲染时间的问题,因为我们把生成图表的时间放在了mounted这个周期上,这时候很可能会出现,我图表挂载了但是我的父容器布局还没加载完,所以图表找到的父容器就会去找到已经渲染好的父容器,很有概率是'爷爷容器',所以超出了父容器。
4.解决方案
这时候我们需要设置一个timeout来让父容器的布局有加载完的时间

完美解决

更多推荐



所有评论(0)