echarts饼图渐变色与间距同时使用

Posted 2021-06-15 vue VS react

 1 见代码
　　option = {
 2                 color: [
 3                     \'#00A5FF\',
 4                     \' #00F1A1\'
 5                 ],
 6                 tooltip: {
 7                     show: false,
 8                     trigger: \'item\'
 9                 },
10                 series: [
11                     {
12                         name: \'访问来源\',
13                         type: \'pie\',
14                         radius: [\'65%\', \'85%\'],
15                         avoidLabelOverlap: false,
16                         itemStyle: {
17                             // 渐变色 切记在normal:{}包裹在间距是失效
18                             color: function (params) {
19                                 var colorList = [
20                                     {
21                                         c1: \' #00a5ff\', // 管理
22                                         c2: \'#00faff\'
23                                     },
24                                     {
25                                         c1: \' #00F1A1\', // 实践
26                                         c2: \'#B0FF5E\'
27                                     }]
28                                 return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
29 
30                                     offset: 0,
31                                     color: colorList[params.dataIndex].c1
32                                 }, {
33                                     offset: 1,
34                                     color: colorList[params.dataIndex].c2
35                                 }
36                                 ])
38                             },
39 
40                             borderColor: \'#012D3F\', // 间距背景色
41                             borderWidth: 5 // 间距
42 
43                         },
44                         hoverAnimation: false,
45                         silent: true,
46                         label: {
47                             show: false,
48                             position: \'center\',
49                             color: \'#fff\',
50                             fontSize: \'20\',
51                             // 中间字
52                             normal: {
53                                 show: true,
54                                 position: \'center\',
55                                 color: \'#4c4a4a\',
56                                 formatter: \'{active|总数}\' + \'\\n\\r\' + \'{total|\' + total + \'}\',
57                                 rich: {
58                                     total: {
59                                         fontSize: 29,
60                                         fontFamily: \'微软雅黑\',
61                                         color: \'#00FFFA\'
62                                     },
63                                     active: {
64                                         fontFamily: \'微软雅黑\',
65                                         fontSize: 14,
66                                         color: \'#DAFFFE\',
67                                         lineHeight: 30
68                                     } }
69                             }
70                         },
71                         emphasis: {
72                             label: {
73                                 show: false,
74                                 fontSize: \'40\',
75                                 fontWeight: \'bold\'
76                             }
77                         },
78                         data: [
79                             { value: onlineTotal },
80                             { value: offlineTotal }
81                             // { value: 580, name: \'邮件营销\' },
84                         ]
85                     }
86                 ]
87             }