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

這是借助官網上的列子。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM