首页 前端知识 Echarts加载慢该怎么解决

Echarts加载慢该怎么解决

2024-06-08 09:06:12 前端知识 前端哥 315 66 我要收藏

问题:

今天项目里面有个bug,就是项目的页面下面显示数据表格,上面显示数据分析图,但是切换页面的过程中,加载特别慢。:刚进页面,如果有数据请求到,那么肯定是同时加载数据表格和echarts,而表格相对稳定,加载echarts肯定要慢一些(所需性能相对大)

解决:

这时只需要在上面加上一个数据判断

v-if="data.length>0"

大致可以理解成,当进入页面时候,dom开始加载,数据或前或后请求,exharts还在等待请求的数据然后再渲染,dom也需要等待echarts加载完成才算渲染完成。

而加了v-if="data.length>0"后,第一时间没反应过来,显然v-if判断为false,这时候dom渲染不需要等待已经完成,而后数据请求到后,v-if判断成功,最后再加载echarts。

优化:

加上一些转态等待的组件,比如

<a-span></a-span>

最后加上"v-else",echarts和状态等待只要一个

 

最后代码为:

<Pie3D v-if="data.length>0"/>

<a-span v-else/>


千万不能这样!!!

<a-span v-if="data.length>0"/>

<Pie3D v-else/>

也不能这样!!!

<Pie3D v-show="data.length>0"/>

<a-span v-else/>

不要问为什么,问你就废了🥹

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

echarts柱状图自动轮播

2024-06-16 01:06:46

Echarts--markPoint属性

2024-06-16 01:06:45

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