饼图加极坐标配色优化echarts 饼配置项内容和展示

可视化配色

      /**
 * 极坐标 + 饼图组合
 */
 //如果想要修改，请点击上方克隆，然后在自己的版本上修改，不要在lz的版本上改！！
option = {
    // 背景颜色
    backgroundColor: '#0D1223',
    tooltip: {
        trigger: 'item',
        formatter: e => {
            return `
                ${e.name}<br/>
                销售: ${e.data.value}万元<br/>
                良品率: ${e.data.rate}%
            `
        }
    },
    angleAxis: {
        type: 'category',
        // 去掉边线
        axisLine: {
            show: false
        },
    },
    radiusAxis: {
        max: 100,
        // 去掉刻度线
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
    },
    polar: {
        radius: [0, '50%']
    },
    series: [
        // 饼图
        {
            type: 'pie',
            radius: [0, '50%'],
            label: {
                color: '#09F9D0',
                lineHeight: 24,
                formatter: e => {
                    return `${e.name}\n销售量: ${e.data.value}人\n良品率: ${e.data.rate}%`
                }
            },
            labelLine: {
                length: 20,
                lineStyle: {
                    color: '#09F9D0'
                }
            },
            itemStyle: {
                borderWidth: 2,
                borderColor: '#ffffff',
                // 阴影
                shadowColor: 'rgba(0, 0, 0, .2)',
                shadowBlur: 6,
                shadowOffsetY: 4
            },
            data: [
                {
                    value: 50,
                     // 因为触发的是饼图的 tooltip，这里对应放极坐标的 data 值
                    rate: 50,
                    name: '一组',
                    itemStyle: {
                        color: 'rgba(9, 249, 208, .5)',
                    }
                },
                {
                    value: 50,
                    rate: 50,
                    name: '二组',
                    itemStyle: {
                        color: 'rgba(0, 203, 205, .5)',
                    }
                },
                {
                    value: 50,
                    rate: 50,
                    name: '三组',
                    itemStyle: {
                        color: 'rgba(251, 135, 33, .5)',
                    }
                },

            ],
        },
        // 极坐标 - 玫瑰图
        {
            type: 'bar',
            name: '一组',
            max: 100, // 100 的比例
            data: [65], // 控制半径占比
            barWidth: (50 / 150) * 100 + '%', // 控制和饼图角度一致
            barGap: 0,
            itemStyle: {
                color: '#09F9D0',
                shadowColor: '#000',
                shadowBlur: 6
            },
            coordinateSystem: 'polar',
        }, {
            type: 'bar',
            name: '二组',
            data: [65],
            max: 100,
            barWidth:  (50 / 150) * 100 + '%',
            barGap: 0,
            itemStyle: {
                color: '#00CBFF',
                shadowColor: '#000',
                shadowBlur: 6
            },
            coordinateSystem: 'polar',
        }, {
            type: 'bar',
            name: '三组',
            data: [65],
            max: 100,
            barWidth:  (50 / 150) * 100 + '%',
            barGap: 0,
            itemStyle: {
                color: '#FB8721',
                shadowColor: '#000',
                shadowBlur: 6
            },
            coordinateSystem: 'polar',
        },
    ],
};