Echarts雷达图 将数值放在类目值下并根据数值大小设置不同背景色标注

Echarts雷达图 将数值放在类目值下并根据数值大小设置不同背景色标注

• 目的：将雷达图数值放在类目值下并根据数值大小设置不同背景色标注
• 实现：利用radar.name.rich.formatter
• 代码：

let valueArr = [83,53,81,70,85,48,90,10,6]
tabChartRadarData(valueArr) {
            let indicator = [{ name: '数学', max: 100, min:0 },
                        { name: '语文', max: 100, min:0 },
                        { name: '英语', max: 100, min:0 },
                        { name: '化学', max: 100, min:0 },
                        { name: '物理', max: 100, min:0 },
                        { name: '生物', max: 100, min:0 },
                        { name: '体育', max: 100, min:0 },
                        { name: '音乐', max: 100, min:0 },
                        { name: '美术', max: 100, min:0 }]
            let myChart = echarts.init(document.getElementById('chartRadar'));
            let option = {
                color: ['#6DCDFF'],
                radar: {
                    center: ['50%','50%'],//调整雷达图的位置
                    indicator: indicator,
                    splitArea: {
                        show: true,
                    },
                },
                series: [{
                    type: 'radar',
                    data: [
                        {
                            value: valueArr,
                            symbolSize: 8,
                            areaStyle: {
                                color: '#AEE4FF'
                            }
                        }
                    ]
                }]
            };
            myChart.setOption(option)
            let i = -1
            let itemValue = 0
            myChart.setOption({
                radar: [
                    {
                        name: {
                            rich: {
                                a: {
                                    color: '#000',
                                    lineHeight: 16
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#F2821D',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                },
                                c:{
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#F7C242',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                },
                                d:{
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#B0DAAA',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                },
                                e:{
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#CECECE',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                }
                            },
                            formatter: (a,b)=>{
                                let isOdd = (valueArr.length % 2 != 0)
                                let nosplitArr = isOdd?[0,parseInt(valueArr.length/2),parseInt(valueArr.length/2)+1]:[0,parseInt(valueArr.length/2)]
                                console.log('splitArr',nosplitArr);
                                i++
                                let splitStr = '\n'
                                if(nosplitArr.includes(i)){
                                    splitStr = ' '
                                }
                                itemValue = parseInt(`${valueArr[i]}`)
                                if(itemValue > 80){
                                    return `{a|${a}}${splitStr}{b|${valueArr[i]}}`
                                }else if(itemValue > 60){
                                    return `{a|${a}}${splitStr}{c|${valueArr[i]}}`
                                }else if(itemValue > 50){
                                    return `{a|${a}}${splitStr}{d|${valueArr[i]}}`
                                }else{
                                    return `{a|${a}}${splitStr}{e|${valueArr[i]}}`
                                }    
                            }
                        }
                    }
                ]
            })
        },

• 效果图：