大屏项目,需求是做一个堆叠图,后端接口返回的数据比较拉跨,需要进行二次加工才能使用,以下是实现过程
设计图:
接口返回的数据:
存在的问题:
- 仅返回数量不为零的字段,count为零则不返回。比如下图中“2022-06”的smsItems数据中有5项,而“2022-07”的中只有3项,也就是说仅从“2022-06”或者“2022-07”中无法得到全部的分类信息,只有将它们综合遍历之后才能保证获取到全部的类别
- 堆叠图每一个类别是一组数据,而接口返回的数据是以时间为单位划分的,所以需要对接口中的数据进行处理
定义optionData用于存储图表所需的数据
let optionData = {
months: [], //接口返回了哪些月份的数据
legends: [],//接口返回了哪些类别的数据,
dataList: [] //按照legends中的类别顺序存储每一类的数据
}
如果每个月份的数据中有一个names字段记录了该月有哪些类型的数据,那当我们想要获取所有类别信息的时候,只要将每个月的类型合到一起就可以了
那么,我们就先来做第一步,用names字段记录该月有哪些数据类型
//统计每个月份的类别
let getItemNames = () => {
//第一层循环用于遍历,每个月的数据
for(let key in dataList){
let item = dataList[key].smsItems
let names = []
//第二层循环用于遍历该月的各信息服务类别数据
for(let i in item){
//将类别添加到names数组中
names.push(item[i].name)
}
//将names添加到原数组中
dataList[key].names = names
}
return dataList
}
现在的原始数组中已经存在每一月份的类别数组,我们遍历每一月份,将每个月的names合到一起就可以得到所有的类别,还可以在遍历的过程中将月份保存下来,用作图表x轴的数据
//获取所有的标签