linear 实现伪弧形渐变echarts 饼配置项内容和展示

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

// 随机生成占比数据
const val = random() * 100;


// 圆心角的一半
const angle = PI * val / 50 / 2;
// 渐变起点
const pointStart = [
    0.5 - 0.5 * cos(angle) * sin(angle),
    0.5 + 0.5 * cos(angle) * cos(angle)
];
// 渐变终点
const pointEnd = [
    0.5 - 0.5 * sin(angle),
    0.5 + 0.5 * cos(angle)
];


option = {
    title: {
        text: 'linear 实现伪弧形渐变',
        left: 'center',
        bottom: 20,
        textStyle: {
            align: 'center',
            fontSize: 14,
            color: '#333',
            fontWeight: 'normal'
        }
    },
    series: [{
        name: '占比',
        type: 'pie',
        startAngle: 90, // 环图起始位置：正下发
        endAngle: 270, // 环图起始位置：正下发
        radius: ['50%', '60%'],
        avoidLabelOverlap: false,
        color: '#ccc',
        label: {
            normal: {
                show: true,
                position: 'center',
                formatter: ({
                    data
                }) => `${data.value.toFixed(2)}%`
            },
            emphasis: {
                show: true
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [{
            name: '满足率',
            value: 100,
            label: {
                normal: {
                    fontSize: 18,
                    color: '#000',
                    fontWeight: 'bolder'
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: pointStart[0],
                        y: pointStart[0],
                        x2: pointEnd[1],
                        y2: pointEnd[1],
                        colorStops: [
                            // !! 在此添加渐变过程色 !!
                            {
                                offset: 0,
                                color: '#F47979'
                            },
                            {
                                offset: 0.1,
                                color: '#F9836C'
                            },
                            {
                                offset: 0.2,
                                color: '#FFB157'
                            },
                            {
                                offset: 0.3,
                                color: '#FE9858'
                            },
                            {
                                offset: 0.4,
                                color: '#FFE657'
                            },
                            {
                                offset: 0.5,
                                color: '#FFF957'
                            },
                            {
                                offset: 0.6,
                                color: '#FFF957'
                            },
                            {
                                offset: 0.7,
                                color: '#92FF58'
                            },
                            {
                                offset: 0.8,
                                color: '#57FF95'
                            },
                            {
                                offset: 0.9,
                                color: '#6AFF72'
                            },

                            {
                                offset: 1,
                                color: '#57FFB7'
                            }
                        ]
                    },
                    shadowColor: 'rgba(34,192,245,0.8)',
                    shadowBlur: 10
                }
            }
        }, {
            name: '未满足率',
            value: 0,
            label: {
                normal: {
                    show: false,
                    fontSize: 0,

                }
            },
            itemStyle: {
                normal: {

                },
                emphasis: {

                }
            },
            hoverAnimation: false
        }]
    }]
}