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

深碍√TFBOYSˉ_ 2022-12-12 13:54 269阅读 0赞

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）'
                }
            ]
        }]
    };

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70][]

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]
                    }
                ]
            }
        ]
    };

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70]: /images/20221123/b76d2a2841a041cf891d7f420adf9ca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/d7631b5884654f55aecd65607c12130b.png