思路说完了，接下来就是代码，代码比我说得清楚，看他别看我，skr。
子组件，echartscom.vue
1<!--echartscom.vue-->
2<template>
3<divclass="charttest">
4<divstyle="width:400px;height:400px;":id="echarts"class="echarts"ref="echarts">
5</div>
6</div>
7</template>
8
9<script>
10importechartsfrom'echarts'
11exportdefault{
12name:'echartscom',
13data(){
14return{};
15},
16methods:{
17drawCharts(){
18varmyChart=echarts.init(document.getElementById(this.echarts));
19myChart.setOption({
20tooltip:{
21trigger:'item',
22formatter:'{a}<br/>{b}:{c}({d}%)'
23},
24legend:{
25orient:'vertical',
26x:'left',
27data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
28},
29series:[
30{
31name:'访问来源',
32type:'pie',
33radius:['50%','70%'],
34avoidLabelOverlap:false,
35label:{
36normal:{
37show:false,
38position:'center'
39},
40emphasis:{
41show:true,
42textStyle:{
43fontSize:'30',
44fontWeight:'bold'
45}
46}
47},
48labelLine:{
49normal:{
50show:false
51}
52},
53data:[
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},
65computed:{
66echarts(){
67return'echarts'+Math.random()*100000;
68}
69},
70mounted(){
71this.drawCharts();
72},
73components:{}
74};
75</script>
76
77<style></style>
父组件，index.vue
1<!--index.vue-->
2<template>
3<echartscom/>
4</template>
5
6<script>
7importechartscomfrom'@/components/echartscom.vue'
8exportdefault{
9data(){
10return{};
11},
12methods:{
13},
14mounted(){},
15components:{
16echartscom
17}
18};
19</script>
20
21<style></style>
npmrundev运行一下，看下结果，如图4所示。
图4
目前为止，我们的工作完成大半了，接下来就是父子间传值了。传值目前我们用props，vuex以后会说到，并且小型项目的话，用vuex显得繁琐庞大，因此不建议用，等到项目较大，多个父子页面传值时，vuex便如神兵天降。
说一下props传值思路，在父组件中，把值放在data（）中，子组件通过props引入父组件的数组名，即可传值，对props感兴趣的朋友可以专门上百度/google/bing学习（免得有的小伙伴说我舔百度）
1props:{
2父组件数组名:{
3type:Array,
4default:()=>[]
5}
6},
代码如下，算了还是全po出来吧，免得有的小伙伴迷糊了。
父组件：index.vue
1<!--index.vue-->
2<template>
3<div>
4<divv-for="(chardata,index)inmsg":key="index"class="test">
5<echartscom:chartData="chardata"autoresize/>
6</div>
7</div>
8</template>
9
10<script>
11importechartscomfrom'@/components/echartscom.vue'
12exportdefault{
13data(){
14return{
15msg:{
16chartData1:[
17{value:335,name:'直接访问'},
18{value:310,name:'邮件营销'},
19{value:234,name:'联盟广告'},
20{value:135,name:'视频广告'},
21{value:1548,name:'搜索引擎'}
22],
23chartData2:[
24{value:335,name:'直接访问'},
25{value:310,name:'邮件营销'},
26{value:234,name:'联盟广告'},
27{value:135,name:'视频广告'},
28{value:1548,name:'搜索引擎'}
29],
30}
31};
32},
33methods:{
34},
35mounted(){},
36components:{
37echartscom
38}
39};
40</script>
41
42<style>
43.test{
44float:left;
45}
46</style>
子组件：echartscom.vue
1<!--echartscom.vue-->
2<template>
3<divclass="charttest">
4<divstyle="width:400px;height:400px;":id="echarts"class="echarts"ref="echarts">
5</div>
6</div>
7</template>
8
9<script>
10importechartsfrom'echarts'
11exportdefault{
12name:'echartscom',
13props:{
14chartData:{
15type:Array,
16default:()=>[]
17}
18},
19data(){
20return{
21};
22},
23methods:{
24drawCharts(){
25varmyChart=echarts.init(document.getElementById(this.echarts));
26myChart.setOption({
27tooltip:{
28trigger:'item',
29formatter:'{a}<br/>{b}:{c}({d}%)'
30},
31legend:{
32orient:'vertical',
33x:'left',
34data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
35},
36series:[
37{
38name:'访问来源',
39type:'pie',
40radius:['50%','70%'],
41avoidLabelOverlap:false,
42label:{
43normal:{
44show:false,
45position:'center'
46},
47emphasis:{
48show:true,
49textStyle:{
50fontSize:'30',
51fontWeight:'bold'
52}
53}
54},
55labelLine:{
56normal:{
57show:false
58}
59},
60data:this.chartData
61}
62]
63});
64}
65},
66computed:{
67echarts(){
68return'echarts'+Math.random()*100000;
69}
70},
71mounted(){
72this.drawCharts();
73},
74components:{}
75};
76</script>
77
78<style></style>
此时浏览器自动刷新，看一下结果如何，结果如图5所示。
图5
本文内容较多，其实思路很简单，代码全都po出来了，可以复制代码先跑一遍，然后结合我的文字看代码，这样掌握得比较快。
下一章讲的是echarts动态传值，有喜欢的小伙伴联系我哦。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html