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

一、 實現異步加載數據

(一)引入vue-resource

通過npm下載axios

//命令行中輸入

npm install axios --save

在main.js中引入axios并注冊

// main.js

import http from './http'

Vue.prototype.$http = http //掛載到原型上

(二)設置data.json

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

{

"title": { "text": "簡單餅狀圖" },

"tooltip": {},

"xAxis": {

"data": ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],

"name": "產品"

},

"yAxis": {},

"series": [{

"name": "銷量",

"type": "bar",

"data": [5, 20, 36, 10, 10, 20],

"itemStyle": {

"normal": {

"color": "hotpink"

}

}

}]

}

(三)在async-bar-chart.vue中請求數據

從aysnc-barChart-option.js中引入option

在methods中添加drawBarChart()方法

在mounted()鉤子函數中調用drawBarChart()

代碼如下:

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: '異步數據加載示例'},

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]

}]

});

})

}

}

}

二. 添加加載動畫

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

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

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

methods: {

drawLine() {

// 基于準備好的dom，初始化echarts實例

let myChart = this.$echarts.init(document.getElementById('myChart'))

// 繪制圖表

myChart.setOption({

title: {}, //{text: '異步數據加載示例'},

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,實現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)

})

}

}

總結

以上是生活随笔為你收集整理的axios vue 加载效果动画_在vue中通过axios异步使用echarts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。