【封装通用方法】对象数组根据天或年数据补全

89 阅读1分钟

后端只返回了部分数据,要把它补全后才能使用,下面封装了一个通用方法,该方法按天和按年进行了补全处理,其他的直接返回了原数据

image.png image.png

image.png image.png

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' }) //最后一个传参对象根据后端返回的数据来决定