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

時間 2019-11-29

原文原文鏈接

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

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

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

G2官方demo地址：npm

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

echarts官方demo地址：瀏覽器

https://echarts.baidu.com/echarts

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

圖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>