工作中经常遇到渲染echarts的情况，echarts是需要一层一层去渲染的，后端会按照一个柱子一个柱子去返回数据。这种情况下就需要前端进行分组。（之前因为这个跟后端吵了好几次😂，现在看来也确实是他懒也是我菜）
本次就简单记录一下reduce分组的解决方式
这一段是我要处理的数据
let data = {
"code": 200,
"message": "成功",
"data": [
{
"time": "2024-08-21 09:00:00",
"vos": [
{
"time": "2024-08-21 09:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "***001",
"unit": "μg/m3"
},
{
"time": "2024-08-21 09:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "***002",
"unit": "μg/m3"
},
{
"time": "2024-08-21 09:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionID": "1724510742855_2_3_1_1",
"pollutionName": "***003",
"unit": "μg/m3"
},
{
"time": "2024-08-21 09:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "***004",
"unit": "μg/m3"
},
{
"time": "2024-08-21 09:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "**005",
"unit": "μg/m3"
}
]
},
{
"time": "2024-08-21 03:00:00",
"vos": [
{
"time": "2024-08-21 03:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionID": "1724510742855_2_1_1_1",
"pollutionName": "***001",
"unit": "μg/m3"
},
{
"time": "2024-08-21 03:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "***002",
"unit": "μg/m3"
},
{
"time": "2024-08-21 03:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "***003",
"unit": "μg/m3"
},
{
"time": "2024-08-21 03:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "***003",
"unit": "μg/m3"
},
{
"time": "2024-08-21 03:00:00",
"factorID": "1",
"factorName": null,
"value": "0.000000",
"percent": null,
"isdelete": null,
"addTime": null,
"addUser": null,
"editTime": null,
"editUser": null,
"timeType": null,
"forecastDate": null,
"pollutionName": "***005",
"unit": "μg/m3"
}
]
}
]
}
下面就是我要处理数据的js代码，后端是根据一个时间一个时间返回的数据，我需要的是根据一个站点一个站点的数据，所以进行下边的处理
//按照名称分组
let endName = {}
endName = alldata.reduce((acc, pre) => {
//acc是之前的{}，pre是现在的
//看下之前的内容中有没有这个数据没有的话，新建一个[]
if (!acc[pre.pollutionName]) {
acc[pre.pollutionName] = []
}
//有的话直接push数据
acc[pre.pollutionName].push(pre)
return acc
}, {})
//返回的不是我想要的json形式，所以进行如下处理
const objData = Object.entries(endName).map(([pollutionName, list]) => ({
pollutionName,
list
}))
结束啦～～哈哈reduce的功能我目前还在探索中...加油奥利给
