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 };

这是借助官网上的列子。

转载于:https://www.cnblogs.com/mxyr/p/9334512.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值