在vue中通過axios異步使用echarts的方法

2019-11-19 14:31:45

字體：大中小

供稿：網(wǎng)友

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

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

(一)引入vue-resource

通過npm下載axios

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

在main.js中引入axios并注冊

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

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

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

 { "title": { "text": "簡單餅狀圖" }, "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中請求數(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() {  // 基于準備好的dom，初始化echarts實例  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>

二. 添加加載動畫

如果數(shù)據(jù)加載時間較長，一個空的坐標軸放在畫布上也會讓用戶覺得是不是產(chǎn)生 bug 了，因此需要一個 loading 的動畫來提示用戶數(shù)據(jù)正在加載。

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

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

 methods: {  drawLine() {  // 基于準備好的dom，初始化echarts實例  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]   }]  });  //顯示加載動畫  myChart.showLoading();  this.$http.get("./static/dat.json").then((res) => {   setTimeout(() => { //未來讓加載動畫效果明顯,這里加入了setTimeout,實現(xiàn)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)  })  } }