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中引入optionexport 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  //将异步请求获取到的数据进行装载}]})})},