Echarts：10-7-5:雷达图+多雷达图

1-基础雷达图

option = {
    title: {
        text: '雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                borderRadius: 3,
                padding: [3, 9]
            }
        },
        indicator: [
            { name: '销售（sales）', max: 6500},
            { name: '管理（Administration）', max: 16000},
            { name: '信息技术（Information Techology）', max: 30000},
            { name: '客服（Customer Support）', max: 38000},
            { name: '研发（Development）', max: 52000},
            { name: '市场（Marketing）', max: 25000}
        ]
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配（Allocated Budget）'
            },
            {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '实际开销（Actual Spending）'
            }
        ]
    }]
};

 

2-多雷达图

option = {
    title: {
        text: '多雷达图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        left: 'center',
        data: ['某软件', '某主食', '某水果', '降水量', '蒸发量']
    },
    radar: [
        {
            indicator: [
                {text: '品牌', max: 100},
                {text: '内容', max: 100},
                {text: '可用性', max: 100},
                {text: '功能', max: 100}
            ],
            center: ['20%', '50%'],
            radius: 150
        },
        {
            indicator: [
                {text: '外观', max: 100},
                {text: '拍照', max: 100},
                {text: '系统', max: 100},
                {text: '性能', max: 100},
                {text: '屏幕', max: 100}
            ],
            radius: 150,
            center: ['50%', '50%'],
        },
        {
            indicator: (function (){
                var res = [];
                for (var i = 1; i <= 12; i++) {
                    res.push({text: i + '月', max: 100});
                }
                return res;
            })(),
            center: ['80%', '50%'],
            radius: 150
        }
    ],
    series: [
        {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            areaStyle: {},
            data: [
                {
                    value: [40, 73, 62, 40],
                    name: '某软件'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 1,
            areaStyle: {},
            data: [
                {
                    value: [65, 90, 80, 95, 28],
                    name: '某主食'
                },
                {
                    value: [30, 80, 55, 48, 93],
                    name: '某水果'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            data: [
                {
                    name: '降水量',
                    value: [23.6, 51.9,49.0, 69.4, 78.7, 70.7, 75.6, 82.2, 88.7, 58.8, 88.0, 52.3],
                },
                {
                    name: '蒸发量',
                    value: [32.0, 82.9, 70.0, 53.2, 45.6, 76.7, 65.6, 62.2, 53.6, 70.0, 61.4, 43.3]
                }
            ]
        }
    ]
};