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

最新推荐文章于 2024-04-28 08:55:06 发布

和小猫的下雨天

最新推荐文章于 2024-04-28 08:55:06 发布

阅读量1k

点赞数 7

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

本文链接：https://blog.csdn.net/2403_83182454/article/details/137226744

版权

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

摘要由CSDN通过智能技术生成

雷达图

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

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

绘制雷达图的步骤如下：

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

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

一、雷达图

代码实现：

<!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 ,min:80},
      { name: '协作', max: 100 ,min:80},
      { name: '培训', max: 100 ,min:80},
    ]
  },
  series: [
    {
      name: '雷达图',
      type: 'radar',
      Symbol:'triangle',
      itemStyle:{
        normal:{lineStyle:{width:1},opacity:0.2},
        emphasis:{lineStyle:{width:5},opacity:1}
      },
      data: [
        {
          value: [87.50, 87.50, 90.00, 91.25, 85.00],
          name: '王斌'
        },
        {
          value: [90.00, 88.75, 85.00, 87.50, 88.75],
          name: '刘倩'
        },
        {
          value: [92.50, 91.25, 88.75, 92.50, 91.25,],
          name: '袁波'
        }
      ]
    }
  ]
};

        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

效果展示：

二.浏览器占比变化图形绘制

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8"> 
    <!--引入ECharts脚本-->
    <!-- <第一步引入脚本> -->
    <script src="js/echarts.js"></script> 
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
        var option = {
  title: {
    text: '销售经理能力考核表',
    subtext: 'Fake Data',
    top: 10,
    left: 10
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    type: 'scroll',
    bottom: 10,
    data: (function () {
      var list = [];
      for (var i = 1; i <= 28; i++) {
        list.push(i + 2000 + '');
      }
      return list;
    })()
  },
  visualMap: {
    top: 'middle',
    right: 10,
    color: ['red', 'yellow'],
    calculable: true
  },
  radar: {
    indicator: [
      { text: '销售', max: 400 },
      { text: '沟通', max: 400 },
      { text: '服务', max: 400 },
      { text: '协作', max: 400 },
      { text: '培训', max: 400 }
    ]
  },
  series: (function () {
    var series = [];
    for (var i = 1; i <= 28; i++) {
      series.push({
        type: 'radar',
        symbol: 'none',
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: 'rgba(0,250,0,0.3)'
          }
        },
        data: [
          {
            value: [
              (40 - i) * 10,
              (38 - i) * 4 + 60,
              i * 5 + 10,
              i * 9,
              (i * i) / 2
            ],
            name: i + 2000 + ''
          }
        ]
      });
    }
    return series;
  })()
};
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

三.将两个图形绘制成多雷达图形

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8"> 
    <!--引入ECharts脚本-->
    <!-- <第一步引入脚本> -->
    <script src="js/echarts.js"></script> 
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
        var option = {
  title: {
    text: '销售经理能力考核'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    type:'scroll',
    width:'20%',
    pageButtonItemGap:4,
    left: 'center',
    data: [
    '王斌',
    '刘倩',
    '袁波',
    '张三',
    '李四',
    ]
  },
  radar: [
    {
      indicator: [
      { text: '销售', max: 100 },
        { text: '沟通', max: 100 },
        { text: '服务', max: 100 },
        { text: '协作', max: 100 },
        { text: '培训', max: 100 }
      ],
      center: ['25%', '40%'],
      radius: 80
    },
    {
      indicator: (function () {
        var res = [];
        for (var i = 1; i <= 12; i++) {
          res.push({ text: i + '月', max: 100 });
        }
        return res;
      })(),
      center: ['75%', '40%'],
      radius: 80
    }
  ],
  series: [
    {
        radarIndex: 0,
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {},
      data: [
        {
            value: [87.50, 87.50, 90.00, 91.25, 85.00],
          name: '王斌'
        },
        {
            value: [90.00, 88.75,85.00,87.50,88.75],
          name: '刘倩'
        },
        {
            value: [92.50, 91.25,88.75,92.50,91.25],
          name: '袁波'
        },
      ]
     
    },
   
    {
    radarIndex: 1,
      type: 'radar',
      tooltip: {
        trigger: 'item'
      },
      areaStyle: {},
      data: [
        {
          name: '张三',
          value: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: '李四',
          value: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
          ]
        }
      ]
    }
  ]
};
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

和小猫的下雨天

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Echarts】绘制雷达图、浏览以及多雷达图

雷达图，也称为蜘蛛网图或星形图，是一种用于可视化多个变量之间关系的图表。它以一个中心点为起点，从中心向外辐射出多条轴线，每条轴线代表一个变量。在每条轴线上，通过不同的数据点或者连线来表示不同变量的取值或者关系。雷达图常用于比较不同实体在多个维度上的表现，例如产品的特征对比、团队成员的能力评估等。通过雷达图，我们可以直观地看到各个变量之间的相对差异和关系。通过雷达图，我们可以直观地比较不同实体在各个维度上的表现，并且可以发现各个维度之间。
复制链接

扫一扫