现实的工作中, 数据不可能是像之前的 demo 演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将 在 vue 项目中使用 Echarts: 在 Vue 中引入 Echarts 中的数据提取出来, 放入到 static/data.json 文件中, 请求该文件获取数据.
一, 实现异步加载数据
(一) 引入 vue-resource
通过 npm 下载 axios
在 main.js 中引入 axios 并注册
//命令行中输入
npm install axios--save
(二) 设置 data.json
// main.js
import http from './http'Vue.prototype.$http = http //挂载到原型上
将该柱状图的没有数据的 option 抽取到 data.json 中, 代码如下:
(三) 在 async-bar-chart.vue 中请求数据
{
"title": { "text": "简单饼状图" },
"tooltip": {},
"xAxis": {
"data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
"name": "产品"
},
"yAxis": {},
"series": [{
"name": "销量",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20],
"itemStyle": {
"normal": {
"color": "hotpink"
}
}
}]
}
从 aysnc-barChart-option.js 中引入 option
在 methods 中添加 drawBarChart() 方法
在 mounted() 钩子函数中调用 drawBarChart()
代码如下:
二. 添加加载动画
<template>
<div id="myChart" :style="{width: '800px', height: '400px'}">
</div>
</template>
<script>
export
default {
name:
'echarts',
data() {
return {
msg: 'Welcome to Your vue.js App',
goods: {}
}
},
mounted() {
this.drawLine();
},
created() {
this.$http.get('./static/dat.json').then(res = >{
const data = res.data;
this.goods = data console.log(this.goods);
console.log(Array.from(this.goods.xAxis.data));
})
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {},
//{text: '异步数据加载示例',
tooltip: {},
xAxis: {
data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [] //[5, 20, 36, 10, 10, 20]
}]
});
this.$http.get("./static/dat.json").then((res) = >{
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.setOption({
title: data.title,
xAxis: [{
data: data.xAxis.data
}],
series: [{
name: '销量',
type: 'bar',
data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
}]
});
})
}
}
}
</script>
如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载.
ECharts 默认有提供了一个简单的加载动画.只需要调用 showLoading 方法显示.数据加载完成后再调用 hideLoading 方法隐藏加载动画.
在 drawLine() 方法中添加 showLoading() 和 hideLoading(), 代码如下:
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {},
//{text: '异步数据加载示例',
tooltip: {},
xAxis: {
data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [] //[5, 20, 36, 10, 10, 20]
}]
});
//显示加载动画
myChart.showLoading();
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,
xAxis: [{
data: data.xAxis.data
}],
series: [{
name: '销量',
type: 'bar',
data: Array.from(...list) //[5, 20, 36, 10, 10, 20]
}]
});
},
3000)
})
}
}
来源: http://www.jb51.net/article/132789.htm