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

本文主要是介绍echarts饼图渐变色与间距同时使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 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             }

这篇关于echarts饼图渐变色与间距同时使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！