現(xiàn)實(shí)的工作中, 數(shù)據(jù)不可能是像之前的demo演示的那樣把數(shù)據(jù)寫(xiě)死的. 所有的數(shù)據(jù)都應(yīng)該通過(guò)發(fā)送請(qǐng)求進(jìn)行獲取, 所以, 這篇文章, 我將在Vue項(xiàng)目中使用Echarts: 在Vue中引入Echarts中的數(shù)據(jù)提取出來(lái), 放入到static/data.json文件中,請(qǐng)求該文件獲取數(shù)據(jù)。

一、 實(shí)現(xiàn)異步加載數(shù)據(jù)

(一)引入vue-resource

• 通過(guò)npm下載axios

   //命令行中輸入
   npm install axios --save
  

• 在main.js中引入axios并注冊(cè)

   // main.js
   import http from './http'
   Vue.prototype.$http = http    //掛載到原型上
  

(二)設(shè)置data.json

將該柱狀圖的沒(méi)有數(shù)據(jù)的option抽取到data.json中, 代碼如下:

 {
    "title": { "text": "簡(jiǎn)單餅狀圖" },
    "tooltip": {},
    "xAxis": {
        "data": ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],
        "name": "產(chǎn)品"
    },
    "yAxis": {},
    "series": [{
        "name": "銷量",
        "type": "bar",
        "data": [5, 20, 36, 10, 10, 20],
        "itemStyle": {   
            "normal": {
              "color": "hotpink"
            }
        }
    }]
}

(三)在async-bar-chart.vue中請(qǐng)求數(shù)據(jù)

• 從aysnc-barChart-option.js中引入option
• 在methods中添加drawBarChart()方法
• 在mounted()鉤子函數(shù)中調(diào)用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() {
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪制圖表
        myChart.setOption({
          title: {},    //{text: '異步數(shù)據(jù)加載示例'},
          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>

Aaron Swartz

二. 添加加載動(dòng)畫(huà)

如果數(shù)據(jù)加載時(shí)間較長(zhǎng)，一個(gè)空的坐標(biāo)軸放在畫(huà)布上也會(huì)讓用戶覺(jué)得是不是產(chǎn)生 bug 了，因此需要一個(gè) loading 的動(dòng)畫(huà)來(lái)提示用戶數(shù)據(jù)正在加載。

ECharts 默認(rèn)有提供了一個(gè)簡(jiǎn)單的加載動(dòng)畫(huà)。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法隱藏加載動(dòng)畫(huà)。

在drawLine()方法中添加showLoading()和hideLoading(), 代碼如下:

    methods: {
      drawLine() {
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪制圖表
        myChart.setOption({
          title: {}, //{text: '異步數(shù)據(jù)加載示例'},
          tooltip: {},
          xAxis: {
            data: [] //["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
          },
          yAxis: {},
          series: [{
            name: '銷量',
            type: 'bar',
            data: [] //[5, 20, 36, 10, 10, 20]
          }]
        });
        //顯示加載動(dòng)畫(huà)
        myChart.showLoading();

        this.$http.get("./static/dat.json").then((res) => {
          setTimeout(() => { //未來(lái)讓加載動(dòng)畫(huà)效果明顯,這里加入了setTimeout,實(shí)現(xiàn)3s延時(shí)
            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(); //隱藏加載動(dòng)畫(huà)
            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)
        })
      }
    }

Aaron Swartz