雷达图按照权重和排名计算出每项得分，并且按照综合得分排序

最新推荐文章于 2025-10-06 06:51:34 发布

原创最新推荐文章于 2025-10-06 06:51:34 发布 · 4.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts雷达图展示人员各项指标得分，并通过计算综合得分进行排序。具体实现包括计算单项指标得分、综合得分，以及根据得分排序。

用雷达图表达综合得分

radar

echarts的雷达图大家都不陌生吧，就长上面那样子。

现在的需求是：用雷达图表达每位人员的各项得分，并且按照综合得分排序。

已知：雷达图中有N个指标，每个指标对应不同的权重，指标数量及指标权重是不定的。

1.首先需要计算每个legend中每个指标的得分。
单独指标得分=指标权重/指标排名。例如UserA 的Sales指标排名第2，Sales指标权重为20，则UserA的该指标得分为20/2=10分。
每个指标的排名需要单独计算(每个name的数据进行排名)

2.然后需要计算综合指标得分。综合指标得分为每项指标得分加和。

3.最后需要输出按照综合得分降序排列的数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#main{
				width: 800px;
				height: 600px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script src="./echarts.min.js"></script>
		<script>
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option;
			
			var AllData={
				indicator:[
				  { name: 'zb1', weight: 10 },
				  { name: 'zb2', weight: 15 },
				  { name: 'zb3', weight: 16 },
				
				],
				legend:['a', 'b'],
				seriesData: [
					{
					  value: [1, 14, 13],
					  name: 'a'
					},
					{
					  value: [3, 14, 8],
					  name: 'b'
					}
				  ]
			}
			
			option = {
			  title: {
				text: '综合得分'
			  },
			  legend: {
				data: AllData.legend
			  },
			  radar: {
				indicator:AllData.indicator
			  },
			  series: [
				{
				  name: '指标数量',
				  type: 'radar',
				  data:AllData.seriesData
				}
			  ]
			};
			
			option && myChart.setOption(option);
			
			var newResData=returnClass(AllData.seriesData,AllData.indicator)
				//入口方法  data参数为echarts的seriesData数据,weight为echarts的indicator数据
			function returnClass(data,weight){
				var arr=[];
				var resArr=[];
				for(var j=0;j<data[0].value.length;j++){
					for(var i=0;i<data.length;i++){
						arr.push({
							index:i,
							val:data[i].value[j]
						})
					}
					resArr.push(arr)
					arr=[];
				}
				
				var resData=[];
				for(var n=0;n<resArr.length;n++){
					resData.push(returnRank(resArr[n],weight[n].weight))
				}
				return resData;
			}
			
			
			//输出结果   data为 returnClass方法返回值  方法内根据需求可以随便对返回值进行操作
			console.log(outputRes(newResData,AllData.legend)) 
			function outputRes(data,legend){
				var resArr=[];
				for(var j=0;j<legend.length;j++){
					var num=0;
					for(var i=0;i<data.length;i++){
						num+=parseFloat(data[i][j].res)
					}
					resArr.push({
						name:legend[j],
						res:num
					})
				}
				return resArr
			}
			
			//排名加计算结果
			function returnRank(data,weight){
				data=objValueSort(data,'val',true)
				var oldData;
				for(var n=0;n<data.length;n++){
					if(data[n-1]&&oldData==data[n].val){
						data[n].val=n
					}else{
						oldData=data[n].val
						data[n].val=n+1
					}
					data[n].res=(weight/data[n].val).toFixed(2)
				}
				data=objValueSort(data,'index')
				return data;
			}
			
			
			// 根据对象某个属性值进行升序降序
			/*
			    obj: 需要排序的对象
			    key: 按某个属性进行排序
			    sortType: 升序/降序
			*/
			function objValueSort(obj, key, sortType) { // 排序的函数
			  // 1.排序后的key，return y-x 表示降序  x-y 表示升序
			  const newObj = obj.sort((a, b) => {
			    let x = Number(a[key]);
			    let y = Number(b[key]);
			    if (sortType) {
			      return y - x;
			    } else {
			      return x - y;
			    }
			  });
			  return newObj;// 返回排好序的新对象
			}
		</script>
	</body>
</html>

综合得分