ECharts_雷达图

3.7 雷达图

3.7.1 实现步骤

  • ECharts最基本的代码结构

    • 引入js文件

    • DOM容器

    • 初始化对象

    • 设置option

  • 定义各个维度的最大值 indicator

  • 准备具体产品的数据

  • 图表类型

    在 series 下设置 type: 'radar'

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>
    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var dataMax = [
            {
                name: '易用性',
                max: 100
            },
            {
                name: '功能',
                max: 100
            },
            {
                name: '拍照',
                max: 100
            },
            {
                name: '跑分',
                max: 100
            },
            {
                name: '续航',
                max: 100
            }
        ]
        var option = {
            radar: {
                indicator: dataMax
            },
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            name: '华为手机1',
                            value: [80, 90, 80, 82, 90]
                        },
                        {
                            name: '中兴手机1',
                            value: [72, 82, 75, 70, 78]

                        }
                    ]
              }
            ]
        }

        mCharts.setOption(option);
    </script>
</body>
</html>
复制代码

 

 

3.7.2 常用配置

  • 显示数值

    label: {
    show: true
}

  • 区域面积

    areaStyle: {}

    将每一个产品的雷达图形成阴影的面积

  • 绘制类型

    radar: {
    shape: 'circle'
}

    配置雷达图最外层的图形 circle polygon

posted @   Gazikel  阅读(325)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae