echart pie label.rich 颜色设置与项目同色

<v-chart ref="chartRef" :option="option" :autoresize="{ throttle: 1000 }" />

var data = [
    { name: '一般风险', value: 3 },
    { name: '中等风险', value: 59 },
    { name: '严重风险', value: 48 },
];
const option = computed(() => {
    return {
        color: ['#28C0FF', '#FACD66', '#FF8080'],
        series: [
            // 边框的设置
            {
                name: '第一层环',
                type: 'pie',
                z: 2,
                tooltip: {
                    show: false,
                },
                center: ['50%', '50%'],
                radius: [85, 100],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'radial', // 径向渐变
                            x: 0.5,
                            y: 0.5,
                            r: 0.9,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(255,239,224)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(255,239,224,0.3)', // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                    },
                    emphasis: {
                        color: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.9,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(255,239,224)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(255,239,224,0.3)', // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                    },
                },
                label: {
                    show: false,
                },
                data: [100],
            },
            // 真实数据环
            {
                type: 'pie',
                radius: [65, 85],
                // top: top + '%',
                height: '100%',
                left: 'center',
                width: 900,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1,
                },
                label: {
                    formatter: '{icon|●}{b|{b}} \n{hr|}\n{c} {unit|个}    {per|{d}%}  ',
                    // backgroundColor: '#F6F8FC',
                    // borderColor: '#8C8D8E',
                    // borderWidth: 1,
                    // borderRadius: 4,
                    position: 'outer',
                    padding: [0, 0], // 消除内边距
                    distanceToLabelLine: 0, // 消除label和项目连线之间的距离
                    // alignTo: 'edge',
                    margin: 0,
                    show: true,
                    fontSize: 16,
                    rich: {
                        icon: {
                            fontSize: 18,
                            color: 'auto', // 使用auto是可以默认是该项目的颜色
                            align: 'left',
                            padding: [0, 5, 0, 0],
                        },
                        hr: {
                            // borderColor: '#EFEFEF',
                            borderColor: 'auto', // 该项目的颜色
                            width: '100%',
                            borderWidth: 1,
                            height: 0,
                        },
                        b: {
                            color: '#333',
                            fontSize: 16,
                            lineHeight: 33,
                            align: 'left',
                        },
                        unit: {
                            fontSize: 16,
                            color: '#999',
                        },
                        per: {
                            color: '#333',
                            fontSize: 16,
                            lineHeight: 33,
                        },
                    },
                },
                labelLine: {
                    length: 20,
                    length2: 30,
                    maxSurfaceAngle: 80,
                },
                data: data,
            },
        ],
    };
});

实现关键点

• 外层的圆环，使用了一个serie，多绘制了一层没有交互的环；
• 实现名称左侧点，并保持和项目同色，使用color: 'auto',
• distanceToLabelLine： 设置为0消除label和项目连线之间的距离；
• 中间的图片是通过绝对定位的一张图片；

补充知识echart径向渐变

径向渐变：colorStops - radial

type：‘radial’，径向渐变
x,y，代表圆心，数值范围 0-1；
r，代表半径，数值范围 0-1；
colorStops，类似颜色线性梯度，数值范围 0-1；
global，默认false