百度雷达图radar区域图不同颜色

const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
const indicator = [
    {
        text: '北京',
        min: 0,
        max: 100
    },
    {
        text: '上海',
        min: 0,
        max: 100
    },
    {
        text: '天津',
        min: 0,
        max: 100
    },
    {
        text: '深圳',
        min: 0,
        max: 100
    },
    {
        text: '重庆',
        min: 0,
        max: 100
    }
]
const Data = [80,61,10,86,77]

function setData() {
    return [
        {
            value: Data,
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#4BFFFC',
                        shadowColor: '#4BFFFC',
                        shadowBlur: 5
                    },
                    shadowColor: '#4BFFFC',
                    shadowBlur: 5
                }
            },
            areaStyle: {
                normal: {
                    // 单项区域填充样式
                    color: {
                        type: 'radial',
                        x: 0.5, //右
                        y: 0.5, //下
                        r: 1,
                        colorStops: [
                            {
                                offset: 1,
                                color: '#4BFFFC'
                            },
                            {
                                offset: 0,
                                color: 'rgba(0,0,0,0)'
                            }
                        ],
                        globalCoord: false
                    },
                    opacity: 0.8 // 区域透明度
                }
            }
        }
    ]
}

function setgauge(i) {
    return {
        type: 'gauge',
        detail: false,
        splitNumber: 10, //刻度数量
        radius: '80%', //图表尺寸
        center: ['50%', '50%'],
        startAngle: 90 + 72 * i + 18, //开始刻度的角度
        endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
        axisLine: {
            show: false
        },
        axisTick: {
            show: true,
            lineStyle: {
                color: '#66ccff',
                width: 1
            },
            length: 6,
            splitNumber: 1
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    }
}
function setSpot() {
    var scatterData = []
    Data.map((o, i) => {
        scatterData.push({
            value: [o, i],
            itemStyle: {
                normal: {
                    color: color[i],
                    borderColor: '#fff',
                    borderWidth: 1,
                    shadowColor: color[i],
                    shadowBlur: 8
                }
            }
        })
    })
    return scatterData
}

option = {
    backgroundColor: '#0E1327',
    polar: {
        center: ['50%', '50%'],
        radius: '60%'
    },
    radar: {
        shape: 'circle',
        center: ['50%', '50%'],
        radius: '60%',
        indicator: indicator,
        axisName: {
            color: '#b7e9fd',
            fontSize: 24,
            padding: -10
        },
        nameGap: 45,
        splitNumber: 4,
        splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
                // 分隔区域的样式设置。
                color: ['rgba(27, 50, 66, 0.4)']
            }
        },
        axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
                color: '#5aa3d0'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(99,192,251,0.2)', // 分隔线颜色
                width: 2 // 分隔线线宽
            }
        }
    },
    angleAxis: {
        type: 'category',
        data: name,
        minInterval: 1,
        boundaryGap: false,
        clockwise: false,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    radiusAxis: {
        min: 0,
        max: 100,
        interval: 25,
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            //指向外圈文本的分隔线样式
            lineStyle: {
                color: '#5aa3d0'
            }
        },
        axisLabel: {
            fontSize: 12,
            color: '#5aa3d0',
            align: 'left',
            margin: -5
        }
    },
    series: [
        setgauge(0),
        setgauge(1),
        setgauge(2),
        setgauge(3),
        setgauge(4),
        {
            type: 'radar',
            silent: true,
            lineStyle: {
                color: '#66ffff'
            },
            areaStyle: {
                color: 'rgba(102, 255, 255, 0.31)'
            },
            data: setData()
        },
        {
            type: 'scatter',
            coordinateSystem: 'polar',
            symbolSize: 20,
            data: setSpot()
        }
    ]
};
radarData = echarts.init(document.getElementById("main"));
radarData.setOption(option);
window.addEventListener("resize", function() {
	radarData.resize();
})

点击运行 》