經過一段時間對vue的學習，我打算把vue做一個系列，把踩過的坑和大家分享一下。
現在開始第一章：vue引用並封裝echarts
在文章開始前，我先舔波echarts（真香）。阿里的G2和百度的echarts都是很不錯的，echarts上手難度小，並且用戶多，文檔多，生態環境較好，所以中小項目的話echarts就是首選。加個題外話，我把G2、echarts都po出來，大家憑喜好選取。
G2官方demo地址：
https://antv.alipay.com/zh-cn/index.html
echarts官方demo地址：
現在開始干活，進入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動態傳值，有喜歡的小伙伴聯系我哦。
轉載源：https://www.cnblogs.com/yyzhiqiu/p/11302010.html