使用echart画出渐变色饼图（圆环图环形渐变）

使用echart画出渐变色饼图（圆环图环形渐变）

说明

常用的渐变有径向渐变和线性渐变，
环形图是 echarts 中 pie 图的一个变种，echarts 官方对于 pie 图的颜色渐变只支持两种：

linear 线性渐变
与 css 3 的 Linear Gradients 相似，即向下/向上/向左/向右/角度方向渐变
radial 镜像渐变
与 css 3 的 Radial Gradients 相似，即从圆心向外一圈圈渐变出去

此次的需求是跟着圆环渐变。此效果本人再网上没有找到（是我查找能力不行？？？—— _ ——)，是偶然间尝试出来的，或许有参数漏洞，但是能达到想要的效果

效果图

这是最终现有要的效果（将x,x2,y,y2注释）

这是另外一种渐变（未将x,x2,y,y2注释）

代码如下

const { random, PI, cos, sin } = Math;

// 数据源
const val1 = (120/360)*100;
const val2 = (240/360)*100;


// 圆心角的一半
const angle1 = PI * val1 / 50 / 2;
const angle2 = PI * val2 / 50 / 2;
// 渐变起点
const pointStart = [
    0.5 - 0.5 * cos(angle1) * sin(angle1),
    0.5 + 0.5 * cos(angle1) * cos(angle1)
];
// 渐变终点
const pointEnd1 = [
    0.5 - 0.5 * sin(angle1),
    0.5 + 0.5 * cos(angle1)
];
const pointEnd2 = [
    0.5 - 0.5 * sin(angle2),
    0.5 + 0.5 * cos(angle2)
];

var option3 = {
     tooltip: {
         trigger: 'item',
         formatter: '{a} <br/>{b}({d}%)'
     },
     legend: {
         left: 50,
         top: 'bottom',
         textStyle: {
             color: '#fff',
             fontSize: 12
         },
         itemGap: 20,
         data: ['总数','警员', '文员']
     },
    series: [
        {
        name: '警员占比',
        type: 'pie',
        startAngle: 270,                        // 环图起始位置：正下发
        center: ['25%', '50%'],                 // 圆环中心相对于容器位置
        radius: ['40%', '50%'],                 // 圆环内径外径
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: true,
                position: 'center',
                formatter: '120人'
            },
            emphasis: {
                show: true
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            name: '警员',
            value: val1,
            label: {
                normal: {
                    fontSize: 18,
                    color: '#fff',
                    fontWeight: 'bolder'
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        // x: pointStart[0],
                        // y: pointStart[1],           //  注意此处注释掉了，若没有注释将是另一种效果
                        // x2: pointEnd1[0],
                        // y2: pointEnd1[1],
                        colorStops: [
                            // !! 在此添加想要的渐变过程色 !!
                            { offset: 0, color: '#00FDFF' },
                            { offset: 1, color: '#02364F' }
                        ]
                    },
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //     offset: 0,
                    //     color: '#01BAFA'
                    // }, {
                    //     offset: 1,
                    //     color: '#03070F'
                    // }]),
                    // shadowColor: 'rgba(34,192,245,0.8)',
                    // shadowBlur: 10
                }
            }
        }, {
            name: '总数',
            value: 100 - val1,
            label: {
                normal: {
                    show: false,
                    fontSize: 0
                }
            },
            itemStyle: {
                normal: {
                    color: '#02364F'
                },
                emphasis: {
                    color: '#02364F'
                }
            },
            hoverAnimation: false
        }]
    },
    {
        name: '文员占比',
        type: 'pie',
        startAngle: 270, // 环图起始位置：正下发
        center: ['75%', '50%'],
        radius: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: true,
                position: 'center',
                formatter: '240人'
            },
            emphasis: {
                show: true
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            name: '文员',
            value: val2,
            label: {
                normal: {
                    fontSize: 18,
                    color: '#fff',
                    fontWeight: 'bolder'
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        // x: pointStart[0],
                        // y: pointStart[1],
                        // x2: pointEnd2[0],       //  注意此处注释掉了，若没有注释将是另一种效果
                        // y2: pointEnd2[1],
                        colorStops: [
                            // !! 在此添加渐变过程色 !!
                            { offset: 0, color: '#01BAFA' },
                            { offset: 1, color: '#02364F' }
                        ]
                    },
                }
            }
        }, {
            name: '总数',
            value: 100 - val2,
            label: {
                normal: {
                    show: false,
                    fontSize: 0
                }
            },
            itemStyle: {
                normal: {
                    color: '#02364F'
                },
                emphasis: {
                    color: '#02364F'
                }
            },
            hoverAnimation: false
        }]
    }]
};

参考

参考1：https://blog.csdn.net/qq_25125327/article/details/90690418
参考2：https://blog.csdn.net/Mr_dong_ya_yun/article/details/80770658