在 vue 中使用 axios 动态获取数据并显示在 echarts 中
在 vue 应用中使用 axios 获取动态数据并将其显示在 echarts 图表中时，有时会出现数据无法显示的问题。要解决此问题，需要对代码进行一些调整。
问题分析
你提供的代码中，在 mounted 生命周期钩子中调用了 drawline 方法，而 arrtest 函数在 methods 对象之外。这会导致 axios 请求在 drawline 方法执行之前发出，导致 mychart 尝试在没有数据的情况下渲染图表。
立即学习“前端免费学习笔记（深入）”；
解决方案
将 arrtest 函数移至 methods 对象中。先执行 arrtest 函数以获取数据，然后在 axios 请求成功后调用 drawline 方法。在数据赋值完成后再执行 mychart.setoption(option)。
优化后的代码
methods: { drawLine() { const that = this; function arrtest() { axios .get('http://localhost:3000/src/statics/test1.php') .then((res) => { console.log(res.data); for (let i = 0; i < res.data.length; i++) { that.x_city.push(res.data[i].city); that.y_people.push(parseInt(res.data[i].y_people)); } that.drawLine(); }); } arrtest(); }, drawLine() { // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(document.getElementById('myChart')); const option = { ... }; myChart.setOption(option); },},
通过这些调整，可以确保数据在 mychart 渲染图表之前正确加载，从而解决数据无法显示的问题。
以上就是## Vue 中使用 Axios 获取动态数据显示在 Echarts 时，如何避免图表渲染失败？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1248691.html
微信扫一扫 
支付宝扫一扫 
