vue學習【二】vue結合axios動態引用echarts

　在vue中，異步刷新使用的是axios，類似於大家常用的ajax，其實axios已經是vue的第二代異步工具了，第一代是vue-resource,不過官方已經停止更新了，axios各方面來說更好用，所以還是比較推薦的。

　　首先來說說我們的思路，echarts能渲染圖表，是因為series里的data有數據，所以才能渲染出來。如果我們把axios請求過來的值賦給data，是不是意味着echarts就能夠動態刷新了。憑借這個思路，於是本文就有內容了。

　　在這里我打算分兩部分來寫。一個是普通篇，僅僅是echarts和axios的用法；另一個是進階篇，內容為vuex、echarts和axios的結合使用。vuex內容較多，這里只是引用，不進行詳細講解，關於vuex的詳細用法，以后我會單獨寫一篇文章，到時候我會把鏈接放進來。

　　普通篇：

　　目錄結構如圖1所示：

圖1

　　說得再好不如代碼直觀，主組件：index.vue

 <!-- index.vue -->
 2 <template>
 3   <div><div id="echartContainer" style="width:500px; height:500px"></div></div>
 4 </template>
 5  
 6 <script>
 7 //從option.js中引入option
 8 import { option } from '@/views/option';
 9 export default {
10   name: 'bar-chart',
11   data() {
12     return {
13     };
14   },
15   methods: {
16     drawBarChart() {
17       // 基於准備好的dom，初始化echarts實例
18       var myChart = this.$echarts.init(document.getElementById('echartContainer'), 'infographic');
19       // 繪制基本圖表
20       myChart.setOption(option);
21       //加載動畫
22       myChart.showLoading();
23       //axios異步獲取數據
24       this.$axios
25         .get('static/data/asyncBarChart.json')
26         .then(res => {
27           setTimeout(() => {
28             // 獲取到數據后隱藏加載動畫
29             myChart.hideLoading();
30             // console.log(res.data);
31             myChart.setOption({
32               xAxis: [
33                 {
34                   data: res.data.cp //將異步請求獲取到的數據進行裝載
35                 }
36               ],
37               series: [
38                 {
39                   data: res.data.product
40                 }
41               ]
42             });
43           }, 500); //加載動畫時長為0.5秒
44         })
45         .catch(err => {
46           console.log(err);
47         });
48     }
49   },
50   mounted() {
51     //調用drawBarChart()
52     this.drawBarChart();
53   }
54 };
55 </script>
56 <style></style>

 1 <!-- index.vue -->
 2 <template>
 3   <div><div id="echartContainer" style="width:500px; height:500px"></div></div>
 4 </template>
 5  
 6 <script>
 7 //從option.js中引入option
 8 import { option } from '@/views/option';
 9 export default {
10   name: 'bar-chart',
11   data() {
12     return {
13     };
14   },
15   methods: {
16     drawBarChart() {
17       // 基於准備好的dom，初始化echarts實例
18       var myChart = this.$echarts.init(document.getElementById('echartContainer'), 'infographic');
19       // 繪制基本圖表
20       myChart.setOption(option);
21       //加載動畫
22       myChart.showLoading();
23       //axios異步獲取數據
24       this.$axios
25         .get('static/data/asyncBarChart.json')
26         .then(res => {
27           setTimeout(() => {
28             // 獲取到數據后隱藏加載動畫
29             myChart.hideLoading();
30             // console.log(res.data);
31             myChart.setOption({
32               xAxis: [
33                 {
34                   data: res.data.cp //將異步請求獲取到的數據進行裝載
35                 }
36               ],
37               series: [
38                 {
39                   data: res.data.product
40                 }
41               ]
42             });
43           }, 500); //加載動畫時長為0.5秒
44         })
45         .catch(err => {
46           console.log(err);
47         });
48     }
49   },
50   mounted() {
51     //調用drawBarChart()
52     this.drawBarChart();
53   }
54 };
55 </script>
56 <style></style>

　　接下來是渲染echarts圖表的渲染函數：option.js

// option.js
export const option = {
// title: { text: '簡單柱狀圖' },
tooltip: {},
xAxis: {
data: [],
name: '產品'
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [],
itemStyle: {
normal: {
color: 'rgb(145,199,174)'
}
}
}]
}

 1 // option.js
 2 export const option = {
 3   // title: { text: '簡單柱狀圖' },
 4   tooltip: {},
 5   xAxis: {
 6     data: [],
 7     name: '產品'
 8   },
 9   yAxis: {},
10   series: [{
11     name: '銷量',
12     type: 'bar',
13     data: [],
14     itemStyle: {
15       normal: {
16         color: 'rgb(145,199,174)'
17       }
18     }
19   }]
20 }

　　接下來是json文件：test.json

1 {
2   "data":[
3     {
4       "cp": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
5       "product": [7, 20, 31, 10, 13, 20, 15]
6     }
7   ]
8 }

　　運行效果如圖2所示。

圖2

　　估計有小伙伴對myChart.showLoading()和myChart.hideLoading();這兩個函數迷糊了吧，這是加載動畫，前者顯示加載動畫，后者判斷獲得數據后隱藏加載動畫。當你的圖表數據還沒進行渲染或者網速不好時，頁面一片空白豈不是很尷尬，所以有這個加載動畫來過渡一下避免這種尷尬。用法很簡單，一看代碼你就知道了。

1 //加載"加載動畫"
2 myChart.showLoading();
3 setTimeout(() => {
4   自己定義的函數(){
5             
6   }
7   // 獲取到數據后隱藏加載動畫
8   myChart.hideLoading();
9 }

　　以上就是普通篇的內容了，接下來就是進階篇。什么是進階篇，就是引用vuex，使用store倉庫進行存儲數據。這里我不會對vuex進行講述，因為后面我會單獨做一篇文章來講解，這里只是當做工具引用而已，是幫助掌握vuex的小伙伴熟悉vuex和echarts的用法。

　　進階篇：

　　我們先來看一看效果圖，如圖3所示。

圖3 運行效果圖

　　接下來是目錄結構，如圖4所示。

圖4 目錄結構圖

　　在代碼前我們說一下思路，說個屁，都說了不詳細說vuex。翠花，上代碼。

　　父組件pie.vue

<!-- pie.vue -->
<template>
<div class="EchartsCoponent">
<div >
<div v-for="(chardata,index) in rightData" :key="index">
<EchartsCoponent :chartData="chardata" autoresize />
</div>
</div>
</div>
</template>

<script>
import EchartsCoponent from '@/components/EchartsComponent'
export default {
name: 'echarts',
data () {
return {
rightData:[]
}
},
mounted() {
this.bindData();
},
methods: {
bindData() {
this.$axios
.get('static/data/piedata.json')
.then(res => {
let pro = res.data;
this.$store.dispatch('axiostest', pro);
this.rightData = this.$store.state.MsgRight;
})
.catch(err => {
console.log(err);
});
}
},
components: {
EchartsCoponent
}
}
</script>
<style scoped>
</style>

 

　　子組件EchartsComponent.vue：

<!-- EchartsComponent.vue -->
<template>
<div class="xiao-ring"><div style="width:140px;height:140px;margin: 0 auto;" :id="echarts" class="echarts" ref="echarts"></div></div>
</template>

<script>
// 引入echarts
import echarts from 'echarts';
export default {
name: 'EchartsComponents',
props: {
// 接收父組件傳遞過來的信息
chartData: {
type: Array,
default: () => []
}
},
data() {
return {};
},
methods: {
drawChart() {
const vm = this;
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById(this.echarts));
// 繪制圖表
let options ={
//標題設置
title: {
text: 'ECharts測試',
x: 'center',
y: 'bottom',
textStyle: {
fontSize: 16,
fontWeight: 'bolder',
color: '#999'
}
},
// 鼠標移動到圖上的文字顯示
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: '銷量',
type: 'pie',
radius: ['50%', '65%'], //變成空心圓,分別類似於x，y
// data: [5, 20, 36, 10, 10, 20]

label: {
normal: {
show: false, //隱藏指示文字
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '15',
fontWeight: 'bold'
}
}
},
//餅圖的指示線
labelLine: {
normal: {
show: false
}
},
data: this.chartData
}
]
}
myChart.setOption(options)
this.autoActive(myChart, options)
},
autoActive(chart, option) {
this.intervalFun(chart, option)
},
intervalFun(chart, option) {
let dataIndex = -1
let dataLen = option.series[0].data.length
this.interval = setInterval(() => {
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex
})
dataIndex = (dataIndex + 1) % dataLen
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex
})
}, 1000)
}

},
computed: {
echarts() {
return 'echarts' + Math.random() * 100000;
}
},
mounted: function() {
const vm = this;
vm.$nextTick(() => {
vm.drawChart();
});
},
created: () => {}
};
</script>

<style scoped>
.xiao-ring {
float: left;
margin: 0 auto;
text-align: center;
}
</style>

 

　　數據文件piedata.json：

[
[
{"value":335, "name":"直接訪問"},
{"value":310, "name":"郵件營銷"},
{"value":234, "name":"聯盟廣告"},
{"value":135, "name":"視頻廣告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接訪問"},
{"value":310, "name":"郵件營銷"},
{"value":234, "name":"聯盟廣告"},
{"value":135, "name":"視頻廣告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接訪問"},
{"value":310, "name":"郵件營銷"},
{"value":234, "name":"聯盟廣告"},
{"value":135, "name":"視頻廣告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接訪問"},
{"value":310, "name":"郵件營銷"},
{"value":234, "name":"聯盟廣告"},
{"value":135, "name":"視頻廣告"},
{"value":1548, "name":"搜索引擎"}
],
[
{"value":335, "name":"直接訪問"},
{"value":310, "name":"郵件營銷"},
{"value":234, "name":"聯盟廣告"},
{"value":135, "name":"視頻廣告"},
{"value":1548, "name":"搜索引擎"}
]
]

 

轉載源：https://www.cnblogs.com/yyzhiqiu/p/11322477.html