在vue里使用echart,动态请求数据后赋值成功但是就是页面不显示数据解决方法

本文探讨了在Vue应用中遇到的图表加载不出来的问题,原因是数据请求和图表渲染的时机不匹配。通过将渲染方法从`mounted`调整到`updated`生命周期钩子,以及利用Vue的响应式系统,确保图表数据更新时正确重绘。作者还提出,不必局限于生命周期钩子,可以在数据请求完成后直接执行渲染方法,避免使用`v-if`并确保数据在DOM中可用。这种方法优化了代码,提高了效率。
摘要由CSDN通过智能技术生成

问题描述

这里我是成功获取到每个学院的人数信息的,并打印出this.facultyAnalysisData是请求过来的数据。
在这里插入图片描述
用charts渲染图表的方法我也是写出来了
在这里插入图片描述

这里我选择是在mounted生命周期里执行这个方法:
在这里插入图片描述
在页面看得到,数据也是正常的
在这里插入图片描述
在这里插入图片描述
但就是很奇怪,图表加载不出来
在这里插入图片描述

解决方法

我本来在mounted生命周期执行了这个渲染图表的方法,改为在updated生命周期里执行这个方法
在这里插入图片描述
问题完美解决
在这里插入图片描述
然后在页面在进行这么一个操作
在这里插入图片描述
这样当facultyAnalysisData被请求过来的数据重新赋值后,就会触发updated生命周期钩子函数,此时图表渲染的数据就是我们请求过来的数据,v-show可以,但是v-if不行。

总结

这个图表的数据需要在数据库查出每个学院有多少人,所以数据请求是需要时间的。也证明了执行图表渲染的方法并不是响应式的数据,但是vue2是响应式的数据,但我们可以通过监听数据变化来执行图表渲染的方法,此时图表渲染里的数据就会有我们请求返回过来的数据了。


补充

4月12号补充
其实我已经想出更好的方法出来了,说真的就有点冤大头,上面的写法绝对不是最好的写法。我目前发现了更好的写法,我们怎么能让数据显示在html结构呢?哪怕你加了display:none
话不多说,直接上我改进的写法。
其实很大的误区就是我们不要认为把执行图表数据渲染的方法一定要写在生命周期里,我们可以写在请求返回的结果后执行,这样我们就拿到数据了,而且审查元素也不会看到我们的数据源。完美的解决方法。
在这里插入图片描述
这样就不用把图表渲染方法写在生命周期里,说真的,那确实冤大头了,而且也不用学上面还写给span标签。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

杨不旧

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

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

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

打赏作者

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

抵扣说明:

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

余额充值