资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

ECharts 雷达图示例

创作时间:

作者:

@小白创作中心

ECharts 雷达图示例

引用

CSDN

https://blog.csdn.net/qq_22182989/article/details/145370344

本文将详细介绍如何使用ECharts实现雷达图，并自定义样式和交互功能。雷达图适合展示多维度数据的对比情况，能够为你的数据可视化项目增添更多可能性。

1. 前言

雷达图是一种用于展示多维度数据的图表类型，适合用于对比多个实体的多个指标。ECharts 提供了强大的配置项，能够轻松实现雷达图，并支持丰富的样式和交互功能。本文将基于 ECharts 实现一个雷达图，并在此基础上自定义样式和交互。

2. 雷达图简介

雷达图通过多个轴（通常为 3 个或更多）展示数据，每个轴代表一个维度。数据点通过连线形成一个多边形，多边形的面积表示数据的综合表现。雷达图常用于对比多个实体的多个指标，如产品性能、用户画像等。

3. 实现步骤

3.1 初始化 ECharts 实例

首先，我们需要初始化一个 ECharts 实例，并绑定到一个 DOM 容器上。

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

3.2 配置标题

通过 title 配置项，我们可以为图表添加标题。

title: {
    text: '雷达图示例', // 主标题
    left: 'center' // 标题居中
}

3.3 配置提示框（Tooltip）

通过 tooltip 配置项，我们可以设置鼠标悬停时的提示框内容。

tooltip: {
    trigger: 'item' // 触发类型为数据项
}

3.4 配置图例（Legend）

通过 legend 配置项，我们可以设置图例的位置和数据。

legend: {
    left: 'center', // 图例居中
    top: 'bottom', // 图例位于底部
    data: ['实体 A', '实体 B'] // 图例数据
}

3.5 配置雷达图指示器（Indicator）

通过 radar 配置项，我们可以设置雷达图的指示器（即每个维度的名称和最大值）。

radar: {
    indicator: [ // 雷达图指示器
        { name: '维度 1', max: 100 },
        { name: '维度 2', max: 100 },
        { name: '维度 3', max: 100 },
        { name: '维度 4', max: 100 },
        { name: '维度 5', max: 100 }
    ]
}

3.6 配置数据系列（Series）

通过 series 配置项，我们可以添加多个数据系列。每个系列可以设置不同的名称、数据和样式。

series: [
    {
        name: '实体 A', // 系列名称
        type: 'radar', // 图表类型为雷达图
        data: [ // 数据内容
            {
                value: [80, 90, 70, 85, 95], // 每个维度的值
                name: '实体 A'
            }
        ]
    },
    {
        name: '实体 B', // 系列名称
        type: 'radar', // 图表类型为雷达图
        data: [ // 数据内容
            {
                value: [70, 85, 75, 90, 80], // 每个维度的值
                name: '实体 B'
            }
        ]
    }
]

4. 自定义样式与交互

4.1 自定义雷达图区域颜色

通过 areaStyle 配置项，我们可以为雷达图的区域设置自定义颜色。

areaStyle: {
    color: 'rgba(84, 112, 198, 0.5)' // 区域颜色
}

4.2 自定义标签样式

通过 label 配置项，我们可以自定义标签的样式和内容。

label: {
    show: true, // 显示标签
    position: 'top', // 标签位置在顶部
    fontSize: 12, // 字体大小
    fontWeight: 'bold', // 字体加粗
    color: '#333' // 字体颜色
}

4.3 添加动画效果

通过 animation 和 animationDuration 配置项，我们可以为图表添加动画效果。

animation: true, // 开启动画
animationDuration: 1000, // 动画时长 1000ms
animationEasing: 'cubicInOut' // 动画缓动效果

5. 完整代码示例（带详细注释）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 雷达图示例</title>
    <!-- 引入 ECharts 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 创建一个 div 容器，用于放置 ECharts 图表 -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script>
        // 初始化 ECharts 实例，绑定到 id 为 'main' 的 DOM 元素上
        var myChart = echarts.init(document.getElementById('main'));
        // 配置项
        var option = {
            // 标题配置
            title: {
                text: '雷达图示例', // 主标题
                left: 'center' // 标题居中
            },
            // 提示框配置
            tooltip: {
                trigger: 'item' // 触发类型为数据项
            },
            // 图例配置
            legend: {
                left: 'center', // 图例居中
                top: 'bottom', // 图例位于底部
                data: ['实体 A', '实体 B'] // 图例数据
            },
            // 雷达图指示器配置
            radar: {
                indicator: [ // 雷达图指示器
                    { name: '维度 1', max: 100 },
                    { name: '维度 2', max: 100 },
                    { name: '维度 3', max: 100 },
                    { name: '维度 4', max: 100 },
                    { name: '维度 5', max: 100 }
                ]
            },
            // 数据系列配置
            series: [
                {
                    name: '实体 A', // 系列名称
                    type: 'radar', // 图表类型为雷达图
                    data: [ // 数据内容
                        {
                            value: [80, 90, 70, 85, 95], // 每个维度的值
                            name: '实体 A'
                        }
                    ],
                    areaStyle: {
                        color: 'rgba(84, 112, 198, 0.5)' // 区域颜色
                    },
                    label: {
                        show: true, // 显示标签
                        position: 'top', // 标签位置在顶部
                        fontSize: 12, // 字体大小
                        fontWeight: 'bold', // 字体加粗
                        color: '#333' // 字体颜色
                    }
                },
                {
                    name: '实体 B', // 系列名称
                    type: 'radar', // 图表类型为雷达图
                    data: [ // 数据内容
                        {
                            value: [70, 85, 75, 90, 80], // 每个维度的值
                            name: '实体 B'
                        }
                    ],
                    areaStyle: {
                        color: 'rgba(145, 204, 117, 0.5)' // 区域颜色
                    },
                    label: {
                        show: true, // 显示标签
                        position: 'top', // 标签位置在顶部
                        fontSize: 12, // 字体大小
                        fontWeight: 'bold', // 字体加粗
                        color: '#333' // 字体颜色
                    }
                }
            ],
            // 动画配置
            animation: true, // 开启动画
            animationDuration: 1000, // 动画时长 1000ms
            animationEasing: 'cubicInOut' // 动画缓动效果
        };
        // 将配置项应用到图表中，渲染图表
        myChart.setOption(option);
    </script>
</body>
</html>