从零开始，轻松学会echarts雷达图制作：入门到精通全解析

了解雷达图

雷达图，又称为蜘蛛图或星型图，是一种用于展示多个变量之间关系的图表。它将多维数据映射到二维平面，可以直观地展示多个指标之间的比较。ECharts 雷达图作为一种可视化工具，被广泛应用于各种领域的数据分析。

准备工作

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

环境搭建：确保你的开发环境已经安装了 ECharts 库。
基本概念：了解 ECharts 基本使用方法，包括图表类型、配置项等。
数据准备：准备好需要展示的数据，通常为多维数据。

入门教程

1. 引入 ECharts

在 HTML 文件中引入 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>

编写 JavaScript 代码初始化 ECharts 实例，并配置雷达图：

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

var option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data:['预算分配（分配/实际）']
    },
    radar: {
        name: {
            textStyle: {
                color: '#000'
            }
        },
        indicator: [
            {name: '销售', max: 6500},
            {name: '管理', max: 16000},
            {name: '信息技术', max: 30000},
            {name: '客服', max: 38000},
            {name: '研发', max: 52000},
            {name: '市场', max: 25000}
        ]
    },
    series: [{
        name: '预算分配（分配/实际）',
        type: 'radar',
        data : [
            {
                value : [4200, 3000, 20000, 35000, 50000, 18000]
            }
        ]
    }]
};

myChart.setOption(option);

3. 饱满型雷达图

通过设置 areaStyle 属性，可以制作出饱满型的雷达图：

series: [{
    name: '预算分配（分配/实际）',
    type: 'radar',
    data : [
        {
            value : [4200, 3000, 20000, 35000, 50000, 18000],
            areaStyle: {
                opacity: 0.1
            }
        }
    ]
}]

4. 多雷达图

在同一图表中展示多组数据，只需在 series 数组中添加多个对象即可：

series: [{
    name: '预算分配（分配/实际）',
    type: 'radar',
    data : [
        {
            value : [4200, 3000, 20000, 35000, 50000, 18000],
            areaStyle: {
                opacity: 0.1
            }
        },
        {
            value : [5000, 3400, 23000, 40000, 50000, 19000],
            areaStyle: {
                opacity: 0.1
            }
        }
    ]
}]

精通进阶

1. 动态数据

使用 AJAX 或 Fetch API 从服务器获取数据，并实时更新雷达图：

function fetchData() {
    fetch('data.json')
        .then(response => response.json())
        .then(data => {
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        });
}

setInterval(fetchData, 5000); // 每 5 秒更新一次数据

2. 颜色与样式

自定义雷达图的颜色与样式，使其更美观：

series: [{
    name: '预算分配（分配/实际）',
    type: 'radar',
    itemStyle: {
        color: '#f9713c'
    },
    areaStyle: {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
            }, {
                offset: 1, color: 'blue' // 100% 处的颜色
            }],
            globalCoord: false
        }
    },
    data : [
        // ...数据
    ]
}]

3. 数据交互

实现雷达图的数据交互，例如点击图表元素查看详细信息：

myChart.on('click', function (params) {
    console.log(params);
});

总结

通过本文的介绍，相信你已经对 ECharts 雷达图有了全面的认识。从入门到精通，雷达图制作其实并不复杂。希望你能将所学知识应用到实际项目中，提升数据分析与可视化的能力。祝你学习愉快！