大家好，我是一葉，本篇是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
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
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
1 <!-- pie.vue --> 2 <template> 3 <div class="EchartsCoponent"> 4 <div > 5 <div v-for="(chardata,index) in rightData" :key="index"> 6 <EchartsCoponent :chartData="chardata" autoresize /> 7 </div> 8 </div> 9 </div> 10 </template> 11 12 <script> 13 import EchartsCoponent from '@/components/EchartsComponent' 14 export default { 15 name: 'echarts', 16 data () { 17 return { 18 rightData:[] 19 } 20 }, 21 mounted() { 22 this.bindData(); 23 }, 24 methods: { 25 bindData() { 26 this.$axios 27 .get('static/data/piedata.json') 28 .then(res => { 29 let pro = res.data; 30 this.$store.dispatch('axiostest', pro); 31 this.rightData = this.$store.state.MsgRight; 32 }) 33 .catch(err => { 34 console.log(err); 35 }); 36 } 37 }, 38 components: { 39 EchartsCoponent 40 } 41 } 42 </script> 43 <style scoped> 44 </style>
子組件EchartsComponent.vue：
1 <!-- EchartsComponent.vue --> 2 <template> 3 <div class="xiao-ring"><div style="width:140px;height:140px;margin: 0 auto;" :id="echarts" class="echarts" ref="echarts"></div></div> 4 </template> 5 6 <script> 7 // 引入echarts 8 import echarts from 'echarts'; 9 export default { 10 name: 'EchartsComponents', 11 props: { 12 // 接收父組件傳遞過來的信息 13 chartData: { 14 type: Array, 15 default: () => [] 16 } 17 }, 18 data() { 19 return {}; 20 }, 21 methods: { 22 drawChart() { 23 const vm = this; 24 // 基於准備好的dom，初始化echarts實例 25 var myChart = echarts.init(document.getElementById(this.echarts)); 26 // 繪制圖表 27 let options ={ 28 //標題設置 29 title: { 30 text: 'ECharts測試', 31 x: 'center', 32 y: 'bottom', 33 textStyle: { 34 fontSize: 16, 35 fontWeight: 'bolder', 36 color: '#999' 37 } 38 }, 39 // 鼠標移動到圖上的文字顯示 40 tooltip: { 41 trigger: 'item', 42 formatter: '{a} <br/>{b}: {c} ({d}%)' 43 }, 44 series: [ 45 { 46 name: '銷量', 47 type: 'pie', 48 radius: ['50%', '65%'], //變成空心圓,分別類似於x，y 49 // data: [5, 20, 36, 10, 10, 20] 50 51 label: { 52 normal: { 53 show: false, //隱藏指示文字 54 position: 'center' 55 }, 56 emphasis: { 57 show: true, 58 textStyle: { 59 fontSize: '15', 60 fontWeight: 'bold' 61 } 62 } 63 }, 64 //餅圖的指示線 65 labelLine: { 66 normal: { 67 show: false 68 } 69 }, 70 data: this.chartData 71 } 72 ] 73 } 74 myChart.setOption(options) 75 this.autoActive(myChart, options) 76 }, 77 autoActive(chart, option) { 78 this.intervalFun(chart, option) 79 }, 80 intervalFun(chart, option) { 81 let dataIndex = -1 82 let dataLen = option.series[0].data.length 83 this.interval = setInterval(() => { 84 chart.dispatchAction({ 85 type: 'downplay', 86 seriesIndex: 0, 87 dataIndex 88 }) 89 dataIndex = (dataIndex + 1) % dataLen 90 chart.dispatchAction({ 91 type: 'highlight', 92 seriesIndex: 0, 93 dataIndex 94 }) 95 }, 1000) 96 } 97 98 }, 99 computed: { 100 echarts() { 101 return 'echarts' + Math.random() * 100000; 102 } 103 }, 104 mounted: function() { 105 const vm = this; 106 vm.$nextTick(() => { 107 vm.drawChart(); 108 }); 109 }, 110 created: () => {} 111 }; 112 </script> 113 114 <style scoped> 115 .xiao-ring { 116 float: left; 117 margin: 0 auto; 118 text-align: center; 119 } 120 </style>
數據文件piedata.json：
1 [ 2 [ 3 {"value":335, "name":"直接訪問"}, 4 {"value":310, "name":"郵件營銷"}, 5 {"value":234, "name":"聯盟廣告"}, 6 {"value":135, "name":"視頻廣告"}, 7 {"value":1548, "name":"搜索引擎"} 8 ], 9 [ 10 {"value":335, "name":"直接訪問"}, 11 {"value":310, "name":"郵件營銷"}, 12 {"value":234, "name":"聯盟廣告"}, 13 {"value":135, "name":"視頻廣告"}, 14 {"value":1548, "name":"搜索引擎"} 15 ], 16 [ 17 {"value":335, "name":"直接訪問"}, 18 {"value":310, "name":"郵件營銷"}, 19 {"value":234, "name":"聯盟廣告"}, 20 {"value":135, "name":"視頻廣告"}, 21 {"value":1548, "name":"搜索引擎"} 22 ], 23 [ 24 {"value":335, "name":"直接訪問"}, 25 {"value":310, "name":"郵件營銷"}, 26 {"value":234, "name":"聯盟廣告"}, 27 {"value":135, "name":"視頻廣告"}, 28 {"value":1548, "name":"搜索引擎"} 29 ], 30 [ 31 {"value":335, "name":"直接訪問"}, 32 {"value":310, "name":"郵件營銷"}, 33 {"value":234, "name":"聯盟廣告"}, 34 {"value":135, "name":"視頻廣告"}, 35 {"value":1548, "name":"搜索引擎"} 36 ] 37 ]
代碼我放到了百度雲和github上了，下面是鏈接。
百度雲：
git：
以上就是本文的所有內容了，如果有不明白的，或者需要改進的，都可以留言或者私信我。哦，對了，昨天才看到微信設置不讓人加，所以聯系到我就隨緣了，隨緣我們便能相見。