在vue中通过axios异步使用echarts的方法
发布时间:2020-12-17 02:38:17 所属栏目:百科 来源:网络整理
导读:现实的工作中,数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取,所以,这篇文章,我将中的数据提取出来,放入到static/data.json文件中,请求该文件获取数据。 一、 实现异步加载数据 (一)引入vue-resource 通过npm下载ax
现实的工作中,数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取,所以,这篇文章,我将中的数据提取出来,放入到static/data.json文件中,请求该文件获取数据。 一、 实现异步加载数据(一)引入vue-resource通过npm下载axios 在main.js中引入axios并注册 (二)设置data.json将该柱状图的没有数据的option抽取到data.json中,代码如下: (三)在async-bar-chart.vue中请求数据
代码如下: 二. 添加加载动画如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。 ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。 在drawLine()方法中添加showLoading()和hideLoading(),代码如下: this.$http.get("./static/dat.json").then((res) => {
setTimeout(() => { //未来让加载动画效果明显,这里加入了setTimeout,实现3s延时 const data = res.data; const list = data.series.map(good => { let list = good.data; return [...list] }) console.log(list); console.log(Array.from(...list)); myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ title: data.title,20] }] }); },3000) }) } } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容