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

　　你們好，我是一葉，本篇是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>

View Code

　　接下來是渲染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 }

View Code

　　接下來是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>

View Code

　　子組件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>

View Code

　　數據文件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 ]

View Code

　　代碼我放到了百度雲和github上了，下面是連接。

　　百度雲：

　　git：

以上就是本文的全部內容了，若是有不明白的，或者須要改進的，均可以留言或者私信我。哦，對了，昨天才看到微信設置不讓人加，因此聯繫到我就隨緣了，隨緣咱們便能相見。