【Echarts】绘制雷达图、浏览以及多雷达图

最新推荐文章于 2025-04-23 09:34:04 发布

和小猫的下雨天

最新推荐文章于 2025-04-23 09:34:04 发布

阅读量4.1k

点赞数 7

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/2403_83182454/article/details/137226744

版权

本文介绍了雷达图的基本概念及其在ECharts库中的应用，包括销售经理考核表、浏览器占比变化和多雷达图形的实例，展示了如何使用ECharts绘制和比较不同实体在多个维度的表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

雷达图

雷达图，也称为蜘蛛网图或星形图，是一种用于可视化多个变量之间关系的图表。它以一个中心点为起点，从中心向外辐射出多条轴线，每条轴线代表一个变量。在每条轴线上，通过不同的数据点或者连线来表示不同变量的取值或者关系。

雷达图常用于比较不同实体在多个维度上的表现，例如产品的特征对比、团队成员的能力评估等。通过雷达图，我们可以直观地看到各个变量之间的相对差异和关系。

绘制雷达图的步骤如下：

确定需要比较的变量和其取值范围。
在一个平面上绘制出多条等分的轴线，每条轴线代表一个变量。
沿着每条轴线根据变量的取值范围划分出若干等分点。
根据实际数据，在相应的等分点上标记出数据点或者连线。
连接各个数据点或者连线，形成一个封闭的多边形。

通过雷达图，我们可以直观地比较不同实体在各个维度上的表现，并且可以发现各个维度之间

一、雷达图

代码实现：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 1600px; height: 800px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        option = {
  title: {
    text: '销售经理考核表'
  },
  legend: {
    data: ['王斌', '刘倩','袁波']
  },
  tooltip:{
    confine:true,
    enterable:true,
  },
  radar: {
    // shape: 'circle',只适用于雷达图
    indicator: [
      { name: '销售', max: 100 ,min:80},
      { name: '沟通', max: 100 ,min:80},
      { name: '服务', max: 100 ,m

最低0.47元/天解锁文章