效果如下图:
实现思路:
- 汇总数据:使用
reduce
方法遍历原始数据数组,将相同日期的数据进行合并,并计算每个日期的总和。 - 创建日期映射:创建一个映射
dateMap
,存储每个日期的对象列表。 - 排序并添加排序字段:遍历
dateMap
中的每个日期列表,按照value
降序排序,并为每个对象添加一个rank
字段,表示该对象在相同日期中的排序值。
运行这段代码后,原始的 data
数组中的每个对象都会有一个 rank
字段,表示该对象在相同日期中的排序位置。
代码:
let data = [
{ date: '2023-01-01', value: 2 },
{ date: '2023-01-02', value: 1 },
{ date: '2023-01-01', value: 3 },
{ date: '2023-01-02', value: 5 },
{ date: '2023-01-01', value: 6 },
{ date: '2023-01-01', value: 9 },
{ date: '2023-01-02', value: 7 },
];
// Step 1: 使用 reduce 方法汇总数据
const summarizedData = data.reduce((prev, cur) => {
const index = prev.findIndex(item => item.date === cur.date);
if (index !== -1) {
prev[index].value += cur.value;
} else {
prev.push({ ...cur });
}
return prev;
}, []);
// Step 2: 创建一个映射,存储每个日期的对象列表
const dateMap = {};
data.forEach(item => {
if (!dateMap[item.date]) {
dateMap[item.date] = [];
}
dateMap[item.date].push(item);
});
// Step 3: 为每个原始数据对象添加排序字段
Object.keys(dateMap).forEach(date => {
dateMap[date].sort((a, b) => b.value - a.value); // 按照 value 降序排序
dateMap[date].forEach((item, index) => {
item.rank = index + 1; // 添加 rank 字段
});
});
console.log(data);
本页实现代码(备忘,自用):
const result = await queryListRptSmokeDay({ ...where, page, limit });
if (result.length > 0) {
const summarizedData = result.reduce((prev, cur) => {
const index = prev.findIndex((item) => item.statisticsDate === cur.statisticsDate);
if (index !== -1) {
prev[index].statisticsCount += cur.statisticsCount;
} else {
prev.push({ ...cur });
}
return prev;
}, []);
// Step 2: 创建一个映射,存储每个日期的对象列表
const dateMap = {};
result.forEach((item) => {
if (!dateMap[item.statisticsDate]) {
dateMap[item.statisticsDate] = [];
}
dateMap[item.statisticsDate].push(item);
});
// Step 3: 为每个原始数据对象添加排序字段
Object.keys(dateMap).forEach((statisticsDate) => {
dateMap[statisticsDate].sort((a, b) => a.statisticsCount - b.statisticsCount); // 按照 value 降序排序
dateMap[statisticsDate].forEach((item, index) => {
item.rank = index + 1; // 添加 rank 字段
});
});
result.sort((a, b) => {
if (a.statisticsDate !== b.statisticsDate) {
return b.statisticsDate.localeCompare(a.statisticsDate); // 降序日期
} else {
return b.rank - a.rank; // 降序数量
}
});
console.log(result, 666666);
return result;
} else {
return [];
}