新手必看！轻松上手ECharts雷达图制作，从基础到实战全解析

雷达图是一种展示多变量数据的图表，它能够直观地反映多个变量之间的对比关系。ECharts作为一款强大的数据可视化库，提供了丰富的图表类型，其中包括雷达图。对于新手来说，掌握ECharts雷达图的制作是一个循序渐进的过程。本文将带你从基础到实战，轻松上手ECharts雷达图制作。

一、ECharts雷达图简介

雷达图由多个坐标轴组成，每个坐标轴代表一个变量，通过这些坐标轴的交点绘制出多边形，然后填充颜色，形成雷达图。ECharts雷达图支持多种类型，如基础雷达图、多雷达图、堆叠雷达图等。

二、ECharts雷达图基础

1. 引入ECharts

首先，你需要引入ECharts库。可以通过CDN或者下载ECharts的源码引入。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

2. 创建图表容器

在HTML中创建一个用于显示雷达图的容器。

<div id="main" style="width: 600px;height:400px;"></div>

3. 初始化图表

在JavaScript中，使用ECharts的初始化方法创建一个图表实例。

var myChart = echarts.init(document.getElementById('main'));

4. 配置图表

配置图表的选项，包括标题、坐标轴、系列等。

var option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    },
    radar: {
        name: {
            textStyle: {
                color: '#000'
            }
        },
        indicator: [
            {name: '销售（sales）', max: 6500},
            {name: '管理（admin）', max: 16000},
            {name: '信息技术（IT）', max: 30000},
            {name: '客服（customer support）', max: 38000},
            {name: '研发（R&D）', max: 52000},
            {name: '市场（marketing）', max: 25000}
        ]
    },
    series: [
        {
            name: '预算 vs 开销',
            type: 'radar',
            data : [
                {
                    value : [4200, 3000, 20000, 35000, 50000, 18000],
                    name : '预算分配（Allocated Budget）'
                },
                {
                    value : [5000, 14000, 28000, 26000, 42000, 21000],
                    name : '实际开销（Actual Spending）'
                }
            ]
        }
    ]
};

5. 渲染图表

将配置项设置到图表实例中，并渲染图表。

myChart.setOption(option);

三、ECharts雷达图实战

1. 多雷达图

在ECharts中，你可以同时展示多个雷达图，以便对比不同数据集。

var option = {
    title: {
        text: '多雷达图'
    },
    tooltip: {},
    legend: {
        data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    },
    radar: [
        {
            name: {
                textStyle: {
                    color: '#000'
                }
            },
            indicator: [
                {name: '销售（sales）', max: 6500},
                {name: '管理（admin）', max: 16000},
                {name: '信息技术（IT）', max: 30000},
                {name: '客服（customer support）', max: 38000},
                {name: '研发（R&D）', max: 52000},
                {name: '市场（marketing）', max: 25000}
            ]
        },
        {
            name: {
                textStyle: {
                    color: '#000'
                }
            },
            indicator: [
                {name: '销售（sales）', max: 6500},
                {name: '管理（admin）', max: 16000},
                {name: '信息技术（IT）', max: 30000},
                {name: '客服（customer support）', max: 38000},
                {name: '研发（R&D）', max: 52000},
                {name: '市场（marketing）', max: 25000}
            ]
        }
    ],
    series: [
        {
            name: '预算 vs 开销',
            type: 'radar',
            data : [
                {
                    value : [4200, 3000, 20000, 35000, 50000, 18000],
                    name : '预算分配（Allocated Budget）'
                },
                {
                    value : [5000, 14000, 28000, 26000, 42000, 21000],
                    name : '实际开销（Actual Spending）'
                }
            ]
        },
        {
            name: '预算 vs 开销',
            type: 'radar',
            data : [
                {
                    value : [4200, 3000, 20000, 35000, 50000, 18000],
                    name : '预算分配（Allocated Budget）'
                },
                {
                    value : [5000, 14000, 28000, 26000, 42000, 21000],
                    name : '实际开销（Actual Spending）'
                }
            ]
        }
    ]
};

2. 堆叠雷达图

堆叠雷达图可以展示多个数据集在同一个雷达图中的对比。

var option = {
    title: {
        text: '堆叠雷达图'
    },
    tooltip: {},
    legend: {
        data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
    },
    radar: [
        {
            name: {
                textStyle: {
                    color: '#000'
                }
            },
            indicator: [
                {name: '销售（sales）', max: 6500},
                {name: '管理（admin）', max: 16000},
                {name: '信息技术（IT）', max: 30000},
                {name: '客服（customer support）', max: 38000},
                {name: '研发（R&D）', max: 52000},
                {name: '市场（marketing）', max: 25000}
            ]
        }
    ],
    series: [
        {
            name: '预算 vs 开销',
            type: 'radar',
            data : [
                {
                    value : [4200, 3000, 20000, 35000, 50000, 18000],
                    name : '预算分配（Allocated Budget）',
                    areaStyle: {normal: {}}
                },
                {
                    value : [5000, 14000, 28000, 26000, 42000, 21000],
                    name : '实际开销（Actual Spending）',
                    areaStyle: {normal: {}}
                }
            ]
        }
    ]
};

四、总结

通过本文的介绍，相信你已经对ECharts雷达图有了初步的了解。从基础到实战，你可以根据自己的需求选择合适的雷达图类型，并通过配置选项来展示数据。希望本文能帮助你轻松上手ECharts雷达图制作。