echarts pie 图表 显示的label 中内容 字体大小自定义

 1 option = {
 2     tooltip: {
 3         trigger: 'item',
 4         formatter: "{a} <br/>{b}: {c} ({d}%)"
 5     },
 6     legend: {
 7         orient: 'vertical',
 8         x: 'left',
 9         data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
10     },
11     series: [
12         {
13             name:'访问来源',
14             type:'pie',
15             selectedMode: 'single',
16             radius: [0, '30%'],
17 
18             label: {
19                 normal: {
20                     position: 'inner'
21                 }
22             },
23             labelLine: {
24                 normal: {
25                     show: false
26                 }
27             },
28             data:[
29                 {value:335, name:'直达', selected:true},
30                 {value:679, name:'营销广告'},
31                 {value:1548, name:'搜索引擎'}
32             ]
33         },
34         {
35             name:'访问来源',
36             type:'pie',
37             radius: ['40%', '55%'],
38             label: {
39                 normal: {
40                     formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',  //label 的内容
41                     backgroundColor: '#eee',
42                     borderColor: '#aaa',
43                     borderWidth: 1,
44                     rich: {//定义不同地方的文字的字体大小和颜色
45                         a: {
46                             color: '#999',
47                             lineHeight: 22,
48                             align: 'center'
49                         },
50                         hr: {
51                             borderColor: '#aaa',
52                             width: '100%',
53                             borderWidth: 0.5,
54                             height: 0
55                         },
56                         b: {
57                             fontSize: 16,
58                             lineHeight: 33
59                         },
60                         per: {
61                             color: '#eee',
62                             backgroundColor: '#334455',
63                             padding: [2, 4],
64                             borderRadius: 2
65                         }
66                     }
67                 }
68             },
69             data:[
70                 {value:335, name:'直达'},
71                 {value:310, name:'邮件营销'},
72                 {value:234, name:'联盟广告'},
73                 {value:135, name:'视频广告'},
74                 {value:1048, name:'百度'},
75                 {value:251, name:'谷歌'},
76                 {value:147, name:'必应'},
77                 {value:102, name:'其他'}
78             ]
79         }
80     ]
81 };

这是借助官网上的列子。

posted @ 2018-07-19 10:50  秀&莹&锐  阅读(15286)  评论(0编辑  收藏  举报