轻松学会ECharts雷达图制作：步骤详解+实战案例，让你快速上手！

雷达图是一种展示多变量数据的图表，它能够直观地比较不同变量之间的差异和相似性。ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型，包括雷达图。本文将详细介绍如何使用 ECharts 制作雷达图，并提供实战案例，帮助你快速上手。

准备工作

在开始制作雷达图之前，你需要以下准备工作：

1. 安装 ECharts：你可以通过 npm 或 CDN 链接来安装 ECharts。以下是使用 CDN 链接的方式：

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

1. HTML 结构：创建一个 HTML 元素来承载雷达图。

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

1. CSS 样式：为雷达图容器添加必要的样式。

#radarChart {
    margin: 50px auto;
}

雷达图制作步骤

1. 配置雷达图的基础选项

首先，我们需要配置雷达图的基础选项，包括标题、雷达图的形状、坐标轴等。

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

var option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    radar: {
        // 雷达图的形状，可选 'circle' 或 'polygon'
        shape: 'circle',
        // 雷达图的名称
        indicator: [
            { name: '销售（sales）', max: 6500 },
            { name: '管理（admin）', max: 16000 },
            { name: '信息技术（IT）', max: 30000 },
            { name: '客服（customer service）', max: 38000 },
            { name: '研发（R&D）', max: 52000 },
            { name: '市场（marketing）', max: 25000 }
        ]
    },
    series: [{
        name: '预算 vs 开销',
        type: 'radar',
        data : [
            {
                value : [6500, 16000, 30000, 38000, 52000, 25000],
                name : '预算分配（Allocated Budget）'
            },
            {
                value : [4200, 10000, 20000, 35000, 50000, 19000],
                name : '实际开销（Actual Spending）'
            }
        ]
    }]
};

2. 渲染雷达图

最后，我们将配置好的选项传递给 ECharts 实例，以渲染雷达图。

myChart.setOption(option);

实战案例

以下是一个实战案例，我们将使用 ECharts 雷达图来展示一家公司的销售数据。

var option = {
    title: {
        text: '公司销售数据雷达图'
    },
    radar: {
        shape: 'circle',
        indicator: [
            { name: '销售额', max: 100000 },
            { name: '利润率', max: 0.5 },
            { name: '客户满意度', max: 100 },
            { name: '市场占有率', max: 100 }
        ]
    },
    series: [{
        name: '第一季度',
        type: 'radar',
        data: [
            {
                value: [80000, 0.3, 85, 70]
            }
        ]
    }, {
        name: '第二季度',
        type: 'radar',
        data: [
            {
                value: [90000, 0.35, 90, 80]
            }
        ]
    }]
};

myChart.setOption(option);

在这个案例中，我们展示了两个季度的销售数据，包括销售额、利润率、客户满意度和市场占有率。

总结

通过以上步骤，你已经学会了如何使用 ECharts 制作雷达图。雷达图是一种强大的可视化工具，可以帮助你更好地理解多变量数据。希望本文能帮助你快速上手，并在实际项目中应用雷达图。