vue 中使用 axios 异步请求并渲染 echarts 图表的常见问题
在 vue 项目中，结合 axios 和 echarts 库加载动态数据并展示图表时，可能会遇到数据显示不出的问题。
问题分析：
根据您提供的代码，问题可能出在以下两方面：
立即学习“前端免费学习笔记（深入）”；
数据请求时机不当：
您在 mounted() 生命周期钩子中调用 drawline() 方法，但由于数据请求是异步的，它可能在图表初始化后才完成。因此，图表无法及时获取有效数据。图表渲染时机不当：
在您的 drawline() 方法中，您在数据请求成功后才执行 mychart.setoption(option)，这会导致图表一开始显示为空。
解决方案：
要解决这些问题，您可以按照以下步骤进行优化：
将 arrtest() 函数移至 methods 对象中，以便可以在需要时随时调用。在 mounted() 生命周期钩子中调用 arrtest()，启动数据请求。在数据请求成功回调中，调用 drawline() 方法来渲染图表。在 mychart.setoption(option) 之前先赋值给 x_city 和 y_people 数组，确保图表数据是最新的。
以下是对您的代码进行修改的示例：
export default { data() { return { x_city: [], y_people: [], }; }, mounted() { this.arrtest(); }, methods: { arrtest() { let that = this; axios.get('http://localhost:3000/src/statics/test1.php').then((res) => { for (var 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)); } this.drawLine(); }); }, drawLine() { let myChart = echarts.init(document.getElementById('myChart')); let option = { tooltip: { show: true, }, legend: { data: ['people'], }, xAxis: [ { type: 'category', data: that.x_city, }, ], yAxis: [ { type: 'value', }, ], series: [ { name: 'people', type: 'bar', data: that.y_people, }, ], }; myChart.setOption(option); }, },};
通过对这些修改，您的图表应该能够正确地加载动态数据并进行渲染。
以上就是## Vue 中使用 Axios 和 ECharts 渲染图表时，数据显示不出的问题该如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1248687.html
微信扫一扫 
支付宝扫一扫 
