溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
現實的工作中, 數據不可能是像之前的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中請求數據
代碼如下:
<template>
<div id="myChart" :></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: '異步數據加載示例'},
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>
二. 添加加載動畫
如果數據加載時間較長，一個空的坐標軸放在畫布上也會讓用戶覺得是不是產生 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)
})
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
