用雷达图表达综合得分
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>