echarts之雷达图实现

图表数据

var valueType = [
  { name: "sales", index: 0, value: 4300, ratio: 20, max: 6500 }, 
  { name: "Administration", index: 1, value: 4300, ratio: 20, max: 16000 }, 
  { name: "Information Techology", index: 2, value: 4300, ratio: 20, max: 30000 }, 
  { name: "Customer Support", index: 3, value: 4300, ratio: 20, max: 38000 }, 
  { name: "Development", index: 4, value: 4300, ratio: 20, max: 52000 }, 
  { name: "Marketing", index: 5, value: 4300, ratio: 20, max: 25000 }
];
var colorList = ['#007DFF', '#FE739D', '#FFA66F', '#8CE130', '#90D5F6'];
var DynamicRich = {};
valueType.map((m,n)=> {
    DynamicRich['a'+n] = {
        align: 'center',
        fontWeight: 'bold',
        fontSize: 16,
        color: colorList[n]
    }
})

Option设置：

let option = {
    title: {
        show: false,
        text: "基础雷达图"
    },
    tooltip: {
        show: false,
    },
    legend: {
        show: false,
        data: ["Allocated Budget", "Actual Spending"]
    },
    radar: {
        center: ['50%', '50%'],
        radius: '70%',
        splitNumber: 5,
        triggerEvent: true,
        axisNameGap: 20,
        splitArea: {
            areaStyle: {
                color: [
                    '#F6F6F6', '#EDEDED', '#E5E5E5', '#DEDEDE', '#D6D6D6'
                ].reverse()
            }
        },
        splitLine: {
            lineStyle: {
                width:2,
                color: [
                '#D6D6D6', '#DEDEDE', '#E5E5E5','#EDEDED', '#F6F6F6'     
                ].reverse()
            }
        },
        axisName: {
            color: '#000000',
            fontSize: 14,
            fontWeight: 400,
            padding: -10,
            formatter: (name, point) => {
                return [
                    `{a${point.index}|${point.ratio}%}`,
                    `{a${point.index}|${point.value}}`,
                    `${name}`
                ].join('\n')
            },
            rich: DynamicRich
        },
        indicator: valueType
    },
    series: [{
        name: "",
        type: "radar",
        selectedMode: true,
        silent: false,
        lineStyle: {
            color: '#5A63FB'
        },
        symbol: 'rect',
        symbolSize: 10,
        emphasis: {
            focus: 'series',
            blurScope: 'coordinateSystem'
        },
        areaStyle: {
            color: {
            type: 'radial',
            x: 0.5, //右
            y: 0.5, //下
            r: 1,
            colorStops: [
                {
                    offset: 1,
                    color: '#5A63FB'
                },
                {
                    offset: 0,
                    color: '#5A63FB'
                }
            ],
            globalCoord: false
        },
            opacity: 0.3 // 区域透明度
        },
        data: [{
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: "因素"
        }]
    }]
};