百度雷达图radar拐点根据不同值显示不同颜色

var color=['#0277FF', '#FF3877', '#FFBB32', '#06D3C4'];
var data= [{
        name: "Vue版本",
        value: 15
    },
    {
        name: "UI组件库",
        value: 86
    },
    {
        name: "css3规范",
        value: 35
    },
    {
        name: "Eslint检查",
        value: 55
    }
];
    
var value=[];
var nameA=[];
var indicator=[];
var radarData=[];
var scatterData=[];
data.map(function(e,i){
    value.push(e.value);
    nameA.push(e.name);
    var cor=color[0];
    if(e.value<25){
        cor=color[2]
    }else if(e.value > 24 && e.value < 50){
        cor=color[1]
    }else if(e.value > 49 && e.value < 75){
        cor=color[3]
    }else{
		cor=color[0]
	}
    indicator.push({
        text:e.name,
        max:100,
        color:cor
    });
    scatterData.push({
        value:[e.value,i],
        itemStyle: {
            normal: {
                color: cor,
                borderColor: cor,
                borderWidth: 2,
            }
        },
    },)
});
radarData.push({value:value})
option = {
    backgroundColor:'#030c2b',
    tooltip: {
        trigger: 'axis'
    },
    radar: [{
        indicator: indicator,
        name: {
            show: true,
            textStyle: {
                fontWeight: "bold",
                fontSize: 14,
            }
        },
    
        center: ['50%', '50%'],
        radius: '80%',
        shape:'circle',
        axisLine: { 
            lineStyle: {
                color: 'rgba(255,255,255,0.3)'
            }
        },
        axisTick:{ 
            show:false,
            lineStyle: {
                color: 'rgba(255,255,255,0.3)'
            }
        },
        splitArea: {
            show: true,
            areaStyle: {
                color: ["transparent"] 
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                width: 1,
                color: 'rgba(255,255,255,0.3)' 
            }
        }
    }],
     polar: {},
    angleAxis: {
        type: 'category',
        data: nameA,
        boundaryGap: false,
        clockwise: false,
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    
    },
    radiusAxis: {
        min: 0,
        max: 100,
        interval: 20,
        splitLine: {
            show: false
        },
         axisTick: {
            show: false
        },
        axisLabel: {
            color:'#bfbfbe'
        },
    },
    series: [{
        name: '',
        type: 'radar',
        tooltip: {
            trigger: 'item'
        },
        symbol:'none',
        symbolSize: 6,
        itemStyle: {
            normal: {
                color: '#fff',
                borderColor: '#009afe',
                borderWidth: 2,
            }
        },
       lineStyle: {
                color: "#ff9100",
                width: 2
            },
        areaStyle: {
            opacity:1,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                    [{
                            offset: 1,
                            color: 'rgba(0, 154, 254, 0.6)',
                        },
                        {
                            offset: 0,
                            color: 'rgba(84, 114, 211, 0.6)',
                        }
                    ], false),
            type: 'default',
        },
        data: radarData
    },
    {
        name: '',
        type: 'scatter',
        coordinateSystem: 'polar',
        symbolSize: 10,
        data: scatterData
    }]
};

radarData = echarts.init(document.getElementById("main"));
radarData.setOption(option);
window.addEventListener("resize", function() {
	radarData.resize();
})