现实的工作中,数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取,所以,这篇文章,我将中的数据提取出来,放入到static/data.json文件中,请求该文件获取数据。
一、 实现异步加载数据
(一)引入vue-resource
通过npm下载axios
rush:bash;">
//命令行中输入
npm install axios --save
在main.js中引入axios并注册
rush:js;">
// main.js
import http from './http'
Vue.prototype.$http = http //挂载到原型上
(二)设置data.json
将该柱状图的没有数据的option抽取到data.json中,代码如下:
rush:js;">
{
"title": { "text": "简单饼状图" },"tooltip": {},"xAxis": {
"data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],"name": "产品"
},"yAxis": {},"series": [{
"name": "销量","type": "bar","data": [5,20,36,10,20],"itemStyle": {
"normal": {
"color": "hotpink"
}
}
}]
}
(三)在async-bar-chart.vue中请求数据
代码如下:
rush:js;">
二. 添加加载动画
如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 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)
})
}
}
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)
})
}
}
