JavaScript 生成日期格式坐标

准备工作

// 在 String.prototype 上添加 _padStart 
String.prototype._padStart = function (maxLen, fillStr) {
    return this.length < maxLen ? this.padStart(maxLen, fillStr) : this.toString()
  }

// 创建工具对象
const utilObj = {
    date: new Date(),
    year () {
      return this.date.getFullYear()
    },
    month () {
      return this.date.getMonth() + 1
    },
    day () {
      return this.date.getDate()
    },
    /* 天数转换成毫秒数 */
    toMs (days) {
      return days * 24 * 60 * 60 * 1000
    },
    /* 日期字符串转换成时间戳 */
    toTimeStamp (dateStr) {
      return new Date(dateStr).getTime()
    },
    /* 上一年 */
    prevYear () {
      let y = this.year()
      y = y - 1
      return [`${y}-01-01`, `${y}-12-31`]
    },
    /* 本年 */
    currentYear () {
      const y = this.year()
      return [`${y}-01-01`, `${y}-${this.month()}-${this.day()}`]
    },
    /* 最近几天 */
    pastDays (days) {
      const end = this.date.getTime()
      const start = end - this.toMs(days - 1)
      return [
        this.format(new Date(start)),
        this.format(new Date(end))
      ]
    },
    /* 格式化日期 */
    format (date, format = 'YYYY-mm-dd') {
      const obj = {
        "YYYY": date.getFullYear().toString(),        // 年
        "mm": (date.getMonth() + 1).toString()._padStart(2, '0'),     // 月
        "dd": date.getDate().toString()._padStart(2, '0'),            // 日
        "HH": date.getHours().toString()._padStart(2, '0'),           // 时
        "MM": date.getMinutes().toString()._padStart(2, '0'),         // 分
        "SS": date.getSeconds().toString()._padStart(2, '0')          // 秒
      };
      for (let k in obj) {
        format = format.replace(k, obj[k])
      };
      return format;
    }
  }

实现 MakeXDataMap 类

class MakeXDataMap {
    constructor () {
      this.xData = []
      // 只有一个参数
      if (arguments.length === 1) {
        if (Array.isArray(arguments[0])) {
          // 直接传入xData
          this.xData = arguments[0]
        } else {
          // 传入日期类型数字
          this.xData = this.getXData(...this.getDateRangeByDateType(arguments[0]))
        }
      }
      // 有两个参数（实例时可以传startDate和endDate）
      if (arguments.length === 2) {
        this.xData = this.getXData(...arguments)
      }
    }

    /**
     * @function 根据日期类型生成开始日期和结束日期组成的数组
     * @param dateType {number} 日期类型
     * @return [startDate: string, endDate: string]
     * */
    getDateRangeByDateType (dateType) {
      switch (dateType) {
        // 上一年
        case 0:
          return utilObj.prevYear()
        // 本年
        case 1:
          return utilObj.currentYear()
        // 近半年
        case 2:
          return utilObj.pastDays(180)
        // 近一季度
        case 3:
          return utilObj.pastDays(90)
        // 近一月
        case 4:
          return utilObj.pastDays(30)
        // 近一周
        case 5:
          return utilObj.pastDays(7)
      }
    }

    /**
     * @function 根据开始日期，结束日期生成横坐标
     * @param startDate {能转成日期对象的字符串或者日期对象}
     * @param endDate {能转成日期对象的字符串或者日期对象}
     * */
    getXData (startDate, endDate) {
      const xData = []
      startDate = new Date(startDate).getTime()
      endDate = new Date(endDate).getTime()
      while (startDate <= endDate) {
        xData.push(utilObj.format(new Date(startDate)))
        // 开始日期加一天
        startDate = startDate + 24 * 60 * 60 * 1000
      }
      return xData
    }

    /**
     * @description 生成横坐标对应的map格式数据，值默认为0。每次都返回一个新的map，这在有一个横坐标，多个纵坐标时很有用
     * */
    getXDataMap () {
      const map = new Map()
      this.xData.forEach(x => {
        map.set(x, 0)
      })
      return map
    }
  }

测试

  /* 最近一周 */
  const obj = new MakeXDataMap(5)
  // 最近一周横坐标数组
  console.log(obj.xData) // ['2022-05-24', '2022-05-25', '2022-05-26', '2022-05-27', '2022-05-28', '2022-05-29', '2022-05-30']

  // 补齐数据
  const map = obj.getXDataMap()
  const data = [
    { date: '2022-05-28', value: '4' },
    { date: '2022-05-30', value: '8' },
  ]
  data.forEach(item => {
    map.set(item.date, item.value)
  })
  const xData = obj.xData // 或者[...map.keys()]
  const yData = [...map.values()]
  console.log(xData) // ['2022-05-24', '2022-05-25', '2022-05-26', '2022-05-27', '2022-05-28', '2022-05-29', '2022-05-30']
  console.log(yData) // [0, 0, 0, 0, '4', 0, '8']