基于Vue，Echarts的数可据视化二

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