echarts动态渲染时，遇到的坑

最新推荐文章于 2024-08-28 17:10:20 发布

原创最新推荐文章于 2024-08-28 17:10:20 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts #vue #ajax

本文探讨了在Vue.js应用中遇到的数据渲染问题。当在created钩子中使用axios请求数据并尝试渲染到图表时，发现部分数据无法正常显示。通过将数据赋值和图表初始化操作放在axios请求完成后的回调中，解决了这个问题，避免了异步和生命周期的冲突。此解决方案简化了代码，确保了数据正确渲染。

a、按照官网示例，在配置好数据后，在mounted钩子中初始化：this.myEcharts(); 成功在页面上展示。
b、然后跟后端联调时，在created钩子中使用axios 请求数据，发现有的数据渲染失败。而且控制台也能拿到数据，就是渲染不了。
c、经过一番处理后，在created 赋值之后，直接调用this.myEcharts(); 即可解决。
（这样就不用考虑axios异步，和生命周期顺序的问题了）
echarts和axios渲染不了