ECharts雷达图

目录

一、什么是雷达图

二、雷达图的作用

三、雷达图的特点

1.多变量比较:

2.显示相对关系:

3.强调差异:

4.可视化维度:

5.可视化趋势:

四、实训案例

1.基础雷达图

2.浏览器占比雷达

3.多雷达


一、什么是雷达图


雷达图(Radar Chart)是一种用于显示数据多维性的图形。雷达图的不同轴代表了不同的数据维度,通常会将每个维度的数据用一个标记点表示出来,并把所有标记点之间用线段连接起来。这种图形能够很好地传达数据在不同维度上的分布情况,以及各个维度之间的关系。

二、雷达图的作用


雷达图:显示数据如何按中心点或其他数据变动。每个类别的坐标值从中心点辐射。来源于同一序列的数据同线条相连。你可以采用雷达图来绘制几个内部关联的序列,很容易地做出可视的对比。比如:你有三台具有五个相同部件的机器,在雷达图上就可以绘制出每一台机器上每一部件的磨损量。

三、雷达图的特点


1.多变量比较:


雷达图可以同时展示多个变量的数值,通过不同的轴表示不同的变量,使得比较和分析多个变量之间的关系更加直观。

2.显示相对关系:


雷达图可以显示不同变量之间的相对关系,通过不同的数据点或线条连接不同的轴,可以直观地看出各个变量之间的相对大小和趋势。

3.强调差异:


雷达图可以突出显示不同变量之间的差异,通过不同的数据点或线条的长度、颜色或填充等方式,可以直观地比较各个变量之间的差异程度。

4.可视化维度:


雷达图可以展示多个维度的数据,每个维度对应一个轴,可以将复杂的多维数据转化为直观的图形,方便理解和分析。

5.可视化趋势:


雷达图可以展示数据的趋势和变化,通过观察数据点或线条在不同轴上的位置和走势,可以判断出数据的趋势和变化情况。

四、实训案例


1.基础雷达图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/echarts.js"></script>
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 800px; height: 400px"></div>
		<script type="text/javascript">
			var myChart=echarts.init(document.getElementById("main"));
			option = {
          title: {
            text: '销售经理能力考核'
          },
          legend: {
            data: ['王斌', '刘倩','袁波'],
            type:'scroll',
            width:'20%',
            pageButtonItemGap:4, 
          },
          
          radar: {
            // shape: 'circle',
            indicator: [
              { name: '销售', max: 100 },
              { name: '沟通', max: 100 },
              { name: '服务', max: 100 },
              { name: '协作', max: 100 },
              { name: '培训', max: 100 },
            ]
          },
          tooltip:{
 
          },
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              itemStyle:{
                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.21, 88.75, 92.50, 91.25],
                  name: '袁波'
                }
              ]
            }
          ]
        };
              myChart.setOption(option);
            </script>
          </body>
        </html>

效果:

2.浏览器占比雷达

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/echarts.js"></script>
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 800px; height: 400px"></div>
		<script type="text/javascript">
			var myChart=echarts.init(document.getElementById("main"));
			option = {
  title: {
    text: 'Proportion of Browsers',
    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: 'IE8-', max: 400 },
      { text: 'IE9+', max: 400 },
      { text: 'Safari', max: 400 },
      { text: 'Firefox', max: 400 },
      { text: 'Chrome', 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>

 效果:

3.多雷达

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/echarts.js"></script>
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 800px; height: 400px"></div>
		<script type="text/javascript">
			var myChart=echarts.init(document.getElementById("main"));
			option = {
  title: {
    text: '销售经理能力考核',
    subtext: '多雷达',
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    type:'scroll',
            width:'20%',
            pageButtonItemGap:4,
    left: 'center',
    data: [
      '王斌',
      '刘倩',
      '袁波',
      '总销售额',
      '总营业额'
    ]
  },
  radar: [
  {
      indicator: [
            { name: '销售', max: 100 },
            { name: '沟通', max: 100 },
            { name: '服务', max: 100 },
            { name: '协作', max: 100 },
            { name: '培训', max: 100 },
      ],
      radius: 80,
      center: ['25%', '50%']
    },
    
    {
      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: [
    {
      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.21, 88.75, 92.50, 91.25],
                  name: '袁波'
                }
              ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      areaStyle: {},
      tooltip: {
        trigger: 'item'
      },
      data: [
        {
          value: [82,70,65,88,55,65,87,97,87,56,98,34],
          name: '总销售额'
        },
        {
          value: [45,56,75,90,93,78,66,98,78,79,83,58],
          name: '总营业额'
        }
      ]
    },
 
  ]
};
              myChart.setOption(option);
            </script>
          </body>
        </html>

效果:

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值