后端只返回了部分数据,要把它补全后才能使用,下面封装了一个通用方法,该方法按天和按年进行了补全处理,其他的直接返回了原数据
1.方法
export interface dateType {
type: 'day' | 'week' | 'month' | 'year'
}
interface IdataType {
x: string | number,
y: string | number
}
//柱状图补全日期
export function completionData(data: any[], type: dateType["type"], dataType: IdataType) {
if (type === 'day' || type === 'year') {
const newArr = []
let startNum = type === 'day' ? 0 : 1
let cycleNum = type === 'day' ? 23 : 12
for (let i = startNum; i <= cycleNum; i++) {
const b = data.find((item: any) => item[dataType.x] == i)
let obj: any = {}
if (b) {
obj[dataType.x] = b[dataType.x]
obj[dataType.y] = b[dataType.y]
} else {
obj[dataType.x] = i
obj[dataType.y] = 0
}
newArr.push(obj)
}
return newArr
} else {
return data
}
}
2.使用该方法
import { completionData, dateType } from '@/utils/utils'
const selectValue: Ref<dateType["type"]> = ref('day');
let data = res.data //请求后端接口返回的数据
data = completionData(data, selectValue.value, { x: 'day', y: 'weight' }) //最后一个传参对象根据后端返回的数据来决定