Echarts数据绑定
在“基于Vue,Echarts的数据可视化二”里实现了通过固定的参数实现图表的生成,但是在实际使用过程中,图表的数据一般都是通过异步读取的,所以Echart提供了异步加载的方法。
数据异步加载
1.首先安装vue-resource
vue-resource是一个通过XMLHttpRequest或JSONP技术实现异步加载服务端数据的Vue.js插件。该插件提供了一般的HTTP请求接口和RESTFUL架构请求接口,并且提供了全局方法和Vue组件实例方法。同时,它提供了数据获取各个阶段的钩子,使得我们可以对数据获取过程进行更好的控制。
2.准备数据文件data.json作为异步加载的数据来源
Vue-cli3.x中删除了static、 vue.config.js 等,个人感觉cli2.x和cli3.x改动还是特别大的,3.x中加载本地json只需要把json数据放在public文件中即可,不需要再次新建static文件!
{
"product" : [5, 20, 36, 10, 10, 20]
}
3.将该柱状图的没有数据的option
抽取到Charts2.js
中, 代码如下:
export const option = {
title: { text: '简单柱状图' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
name: '产品'
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [],
itemStyle: {
normal: {
color: 'red'
}
}
}]
}
4.在Charts2.vue中请求数据
<template>
<div>
<div id="echartContainer" style="width:500px; height:500px"></div> <!--创建一个echarts的容器-->
</div>
</template>
<script>
import {option} from './Charts2.js' //从aysnc-barChart-option.js中引入option
export default {
name: 'Charts2',
data () {
return {
}
},
methods: {
drawBarChart() {
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echartContainer'), 'infographic');
// 绘制基本图表
myChart.setOption(option);
//获取数据
this.$http.get('Charts2Data.json').then(res => {
myChart.hideLoading();
myChart.setOption({
series: [{
data: res.data.product //将异步请求获取到的数据进行装载
}]
})
})
},
},
mounted() {
//调用drawBarChart()
this.drawBarChart();
}
}
</script>
<style>
</style>
特别注意this.$http.get('Charts2Data.json')中数据路径直接写入文件名不需要public绝对路径
5.效果展示
6.在特殊情况下数据加载需要一定时间,为了提高用户体验可以添加加载动画
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
在drawBarChart()
方法中添加showLoading()
和hideLoading()
, 代码如下:
drawBarChart() {
// 基于准备好的dom,初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echartContainer'), 'infographic');
// 绘制基本图表
myChart.setOption(option);
//显示加载动画
myChart.showLoading();
//获取数据
this.$http.get('Charts2Data.json').then(res => {
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({
series: [{
data: res.data.product //将异步请求获取到的数据进行装载
}]
})
})
},