vue學習【一】vue引用封裝echarts並展現多個echarts圖表

你們好，我是一葉，通過一段時間對vue的學習，我打算把vue作一個系列，把踩過的坑和你們分享一下。

如今開始第一章：vue引用並封裝echarts

在文章開始前，我先舔波echarts（真香）。阿里的G2和百度的echarts都是很不錯的，echarts上手難度小，而且用戶多，文檔多，生態環境較好，因此中小項目的話echarts就是首選。加個題外話，我把G二、echarts都po出來，你們憑喜愛選取。

G2官方demo地址：

https://antv.alipay.com/zh-cn/index.html

echarts官方demo地址：

https://echarts.baidu.com/

如今開始幹活，進入echarts網址中，咱們能看到，圖表的主要參數都在option這函數裏，如圖1所示。咱們將option（）放到vue中的methods中便可引用。

圖1

在項目中打開命令行（直接在地址欄輸入cmd便可打開dos面板），輸入命令，如圖2 所示。

npm install echarts

圖2

打開項目，建立views文件夾，存放父組件index.vue，在components文件夾下建立echartscom.vue子組件，如圖3所示。echartscom.vue中主要放option（），用來實現圖表渲染，index.vue存放數據，echartscom.vue引用index.vue的數據從而造成父子組件間的傳值。

圖3

思路說完了，接下來就是代碼，代碼比我說得清楚，看他別看我，skr。

子組件，echartscom.vue

 1 <!-- echartscom.vue -->
 2 <template>
 3   <div class="charttest">
 4     <div style="width:400px;height:400px;" :id="echarts" class="echarts" ref="echarts">
 5     </div>
 6   </div>
 7 </template>
 8  
 9 <script>
10   import echarts from 'echarts'
11   export default { 12     name:'echartscom', 13  data() { 14       return {}; 15  }, 16  methods: { 17  drawCharts() { 18         var myChart = echarts.init(document.getElementById(this.echarts)); 19  myChart.setOption({ 20  tooltip: { 21             trigger: 'item', 22             formatter: '{a} <br/>{b}: {c} ({d}%)'
23  }, 24  legend: { 25             orient: 'vertical', 26             x: 'left', 27             data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'] 28  }, 29  series: [ 30  { 31               name: '訪問來源', 32               type: 'pie', 33               radius: ['50%', '70%'], 34               avoidLabelOverlap: false, 35  label: { 36  normal: { 37                   show: false, 38                   position: 'center'
39  }, 40  emphasis: { 41                   show: true, 42  textStyle: { 43                     fontSize: '30', 44                     fontWeight: 'bold'
45  } 46  } 47  }, 48  labelLine: { 49  normal: { 50                   show: false
51  } 52  }, 53  data: [ 54                 { value: 335, name: '直接訪問' }, 55                 { value: 310, name: '郵件營銷' }, 56                 { value: 234, name: '聯盟廣告' }, 57                 { value: 135, name: '視頻廣告' }, 58                 { value: 1548, name: '搜索引擎' } 59  ] 60  } 61  ] 62  }); 63  } 64  }, 65  computed: { 66  echarts() { 67         return 'echarts' + Math.random() * 100000; 68  } 69  }, 70  mounted() { 71       this.drawCharts(); 72  }, 73  components: {} 74  }; 75 </script>
76  
77 <style></style>

 

父組件，index.vue

 1 <!-- index.vue -->
 2 <template>
 3   <echartscom />
 4 </template>
 5  
 6 <script>
 7   import echartscom from '@/components/echartscom.vue'
 8   export default {  9  data() { 10       return {}; 11  }, 12  methods: { 13  }, 14  mounted() {}, 15  components: { 16  echartscom 17  } 18  }; 19 </script>
20  
21 <style></style>

npm run dev 運行一下，看下結果，如圖4所示。

圖4

目前爲止，咱們的工做完成大半了，接下來就是父子間傳值了。傳值目前咱們用props，vuex之後會說到，而且小型項目的話，用vuex顯得繁瑣龐大，所以不建議用，等到項目較大，多個父子頁面傳值時，vuex便如神兵天降。

說一下props傳值思路，在父組件中，把值放在data（）中，子組件經過props引入父組件的數組名，便可傳值，對props感興趣的朋友能夠專門上百度/google/bing學習（省得有的小夥伴說我舔百度）

1 props: { 2  父組件數組名: { 3  type: Array, 4         default: () => [] 5  } 6     },

 代碼以下，算了仍是全po出來吧，省得有的小夥伴迷糊了。

父組件：index.vue

 1 <!-- index.vue -->
 2 <template>
 3   <div>
 4     <div v-for="(chardata,index) in msg" :key="index" class="test">
 5       <echartscom :chartData="chardata" autoresize />
 6     </div>
 7   </div>
 8 </template>
 9  
10 <script>
11   import echartscom from '@/components/echartscom.vue'
12   export default { 13  data() { 14       return { 15  msg:{ 16  chartData1: [ 17               {value:335, name:'直接訪問'}, 18               {value:310, name:'郵件營銷'}, 19               {value:234, name:'聯盟廣告'}, 20               {value:135, name:'視頻廣告'}, 21               {value:1548, name:'搜索引擎'} 22  ], 23  chartData2: [ 24               {value:335, name:'直接訪問'}, 25               {value:310, name:'郵件營銷'}, 26               {value:234, name:'聯盟廣告'}, 27               {value:135, name:'視頻廣告'}, 28               {value:1548, name:'搜索引擎'} 29  ], 30  } 31  }; 32  }, 33  methods: { 34  }, 35  mounted() {}, 36  components: { 37  echartscom 38  } 39  }; 40 </script>
41  
42 <style>
43  .test{ 44     float: left; 45  } 46 </style>

　　子組件：echartscom.vue

 1 <!-- echartscom.vue -->
 2 <template>
 3   <div class="charttest">
 4     <div style="width:400px;height:400px;" :id="echarts" class="echarts" ref="echarts">
 5     </div>
 6   </div>
 7 </template>
 8  
 9 <script>
10   import echarts from 'echarts'
11   export default { 12     name:'echartscom', 13  props: { 14  chartData: { 15  type: Array, 16         default: () => [] 17  } 18  }, 19  data() { 20       return { 21  }; 22  }, 23  methods: { 24  drawCharts() { 25         var myChart = echarts.init(document.getElementById(this.echarts)); 26  myChart.setOption({ 27  tooltip: { 28             trigger: 'item', 29             formatter: '{a} <br/>{b}: {c} ({d}%)'
30  }, 31  legend: { 32             orient: 'vertical', 33             x: 'left', 34             data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'] 35  }, 36  series: [ 37  { 38               name: '訪問來源', 39               type: 'pie', 40               radius: ['50%', '70%'], 41               avoidLabelOverlap: false, 42  label: { 43  normal: { 44                   show: false, 45                   position: 'center'
46  }, 47  emphasis: { 48                   show: true, 49  textStyle: { 50                     fontSize: '30', 51                     fontWeight: 'bold'
52  } 53  } 54  }, 55  labelLine: { 56  normal: { 57                   show: false
58  } 59  }, 60               data: this.chartData 61  } 62  ] 63  }); 64  } 65  }, 66  computed: { 67  echarts() { 68         return 'echarts' + Math.random() * 100000; 69  } 70  }, 71  mounted() { 72       this.drawCharts(); 73  }, 74  components: {} 75  }; 76 </script>
77  
78 <style></style>

　　此時瀏覽器自動刷新，看一下結果如何，結果如圖5所示。

圖5

本文內容較多，其實思路很簡單，代碼全都po出來了，能夠複製代碼先跑一遍，而後結合個人文字看代碼，這樣掌握得比較快。

下一章講的是echarts動態傳值，有喜歡的小夥伴聯繫我哦。