• 学习:知识的初次邂逅
  • 复习:知识的温故知新
  • 练习:知识的实践应用

目录

一,雷达图的来历

二,雷达图概述

三,雷达图的特点

四,雷达图的应用场景

五,代码绘制与效果展示


一,雷达图的来历

  • 雷达图(Radar Chart)又称为蜘蛛网图(Spider Chart),其起源可以追溯到 20 世纪初。它最初是被用于心理和教育领域的评估工具,例如用于评估学生在多个学科领域的表现或者个体在多种心理特质方面的状况。
  • 通过在一个平面上展示多个变量的取值,从而方便对个体或对象进行综合比较和评估。后来,雷达图在商业、体育、数据分析等众多领域得到了广泛应用,主要用于展示多维度的数据以及对复杂对象进行综合评价。

二,雷达图概述

  • 雷达图是一种将多个变量的数据点连接起来构成多边形的可视化图表。
  • 它以一个中心点为起点,将每个变量以射线的形式向外辐射,每个变量在射线上都有对应的刻度,数据点则表示变量的具体取值。通过将这些数据点依次连接起来,就形成了一个类似于蜘蛛网的多边形,这个多边形的形状和大小反映了对象在多个维度上的综合情况。例如,在评估一款汽车时,可以将汽车的动力、油耗、安全性、舒适性等多个指标作为变量,通过雷达图展示这款汽车在这些指标上的表现。

三,雷达图的特点

  • 多维度展示能力强
    • 能够同时展示多个变量的数据,直观地反映对象在多个维度上的表现。这使得雷达图在需要综合评估多个指标的情况下非常有用,避免了使用多个单变量图表的繁琐。例如,在分析企业的竞争力时,可以在一张雷达图中展示企业的市场份额、盈利能力、创新能力、品牌影响力等多个维度的数据,方便对企业的整体竞争力进行快速评估。
  • 易于比较
    • 当有多组数据时,通过将它们绘制在同一张雷达图中,可以很容易地比较不同对象在各个维度上的差异。例如,在比较不同品牌的智能手机时,可以将它们的屏幕质量、拍照效果、处理器性能、电池续航等指标绘制在雷达图上,这样就能清晰地看出各品牌手机在不同方面的优劣。
  • 直观的图形形状传达信息
    • 雷达图的多边形形状能够直观地传达对象的综合特征。如果多边形面积较大且形状较为规则,通常表示对象在多个维度上的表现较为均衡且优秀;反之,如果多边形面积较小或者形状不规则,可能意味着对象在某些维度上存在不足或者表现不均衡。例如,在比较运动员的综合身体素质时,多边形饱满的运动员可能在各项身体素质指标上都比较出色,而多边形有明显凹陷的运动员则可能在对应的身体素质维度上较弱。
  • 数据标准化要求高
    • 由于不同变量的取值范围和单位可能不同,为了使雷达图能够准确地展示数据,通常需要对数据进行标准化处理。否则,取值范围大的变量可能会在视觉上掩盖取值范围小的变量的差异。例如,在评估产品质量时,如果一个变量是产品的重量(取值范围可能是几十克到几千克),另一个变量是产品的缺陷率(取值范围可能是 0 - 100%),不进行标准化处理,重量变量在雷达图上的视觉影响会过大,导致缺陷率变量的差异难以被观察到。

四,雷达图的应用场景

  • 企业综合评估
    • 竞争力分析
      • 用于评估企业在市场竞争中的综合实力。通过将企业的产品质量、价格竞争力、客户服务、技术创新等多个竞争因素绘制在雷达图上,可以直观地比较企业与竞争对手在各方面的优势和劣势,为企业制定竞争策略提供参考。
    • 财务状况评估
      • 展示企业的偿债能力、盈利能力、运营能力、发展能力等财务指标,帮助投资者和管理者全面了解企业的财务健康状况。例如,银行在评估企业的贷款风险时,可以使用雷达图综合分析企业的财务指标,判断企业的偿债能力和财务稳定性。
  • 产品评价与比较
    • 多属性产品评估
      • 对于具有多个属性的产品,如电子产品、汽车、化妆品等,雷达图可以用于综合评价产品在不同属性上的表现。例如,在评价一款汽车时,可以将动力性能、燃油经济性、舒适性、安全性、内饰品质等属性作为变量,通过雷达图展示汽车在这些属性上的优劣,帮助消费者做出购买决策。
    • 产品优化方向确定
      • 企业可以通过雷达图比较自己产品与竞争对手产品或者与理想产品标准之间的差距,从而确定产品的优化方向。例如,通过雷达图发现产品在某个属性上的表现明显低于竞争对手,就可以将该属性作为产品改进的重点。
  • 个人能力评估与人才选拔
    • 个人综合素质评估
      • 在教育和人力资源领域,雷达图可用于评估个人的综合素质。例如,在学校可以用雷达图展示学生的学习成绩、社会实践、创新能力、团队协作等多个方面的表现,帮助教师和家长全面了解学生的发展情况。在企业人才选拔中,可以用雷达图评估应聘者在专业技能、沟通能力、领导能力、适应能力等多个维度的能力,为招聘决策提供更全面的依据。
  • 体育数据分析
    • 运动员综合能力评估
      • 用于评估运动员在力量、速度、耐力、技巧、心理素质等多个方面的能力。例如,在评估篮球运动员时,可以将得分能力、篮板能力、助攻能力、防守能力、运动速度等作为变量,通过雷达图展示运动员的综合能力,帮助教练制定训练计划和比赛策略。
    • 团队综合实力对比
      • 在体育赛事中,雷达图可以用于对比不同团队在多个方面的实力,如进攻能力、防守能力、团队协作、战术执行等。通过比较不同团队的雷达图,能够直观地看出各团队的优势和劣势,预测比赛结果。

五,代码绘制与效果展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Title</title>
    <script src="../echarts.js"></script>
    <!--  雷达图  也就是数值分析图  也就是蛛网图-->
    <!--  分析陈陈和刘和田的data综合实例对比
    补刀   击杀  mvp  助攻  魂  金钱
    -->
</head>
<body>
<div id="root" style="width: 50%;height: 400px;"></div>
<script>
    var mychart = echarts.init(document.getElementById('root'));
    var option = {
        title: {
            text: "dota",
            subtext: "实力",
            left: '45%',
        },
        tooltip: {},

        //蛛网图也没有x和y轴效果  但是他有一个专门设置他的组件
        radar: {
            //默认是蛛网形式polygon
            // shape:"circle",  //设置成圆形
            //雷达图的维度  也就是设置雷达图的属性
            indicator: [
                {name: "补刀", max: "1000", color: "pink"},
                {name: "击杀", max: "100"},
                {name: "MVP", max: "100"},
                {name: "助攻", max: "100"},
                {name: "魂", max: "100"},
                {name: "经济", max: "1000", color: "red"},
            ]
        },
        legend: {
            bottom: 0,
        },
        series: [
            {
                type: "radar",  //雷达图的类型
                name: "综合实力对比",
                data: [
                    {
                        value: [100, 30, 30, 20, 30, 150],
                        name: "田"
                    },
                    {
                        value: [900, 80, 70, 70, 76, 850],
                        name: "陈"
                    },
                    {
                        value: [800, 90, 50, 40, 25, 950],
                        name: "刘",
                        symbol: "roundRect",
                        areaStyle: {
                            color: "red"
                        }
                    }
                ],
                // symbol:"roundRect",  //外面也可以设置 内部也可以设置
                label: {},
                areaStyle: {
                    show: true
                },


            },
        ],
    };
    mychart.setOption(option)
</script>
</body>
</html>

  • 学习:知识的初次邂逅
  • 复习:知识的温故知新
  • 练习:知识的实践应用
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐