js实现获取当前月份往前12个月份，接口返回缺少的月份自动补全12个月，格式化后重新渲染Echarts图表

1、日常开发中经常会有Echarts图表渲染近期12个月的数据，但是后端接口返回数据是错乱无序的数据，就需要前端单独做处理

例如调取后端接口，获取进12个月数据，输出的结果如下：

很明显返回的数据既没有排序，又中间又缺少月份，而我们想要的是正序排序，并且随机补全当前月份往前12个月缺少的月份，比如（当前是12月）：这种格式

['2022-12', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11']

代码实现如下：

封装排序方法

comDatepare(prop, align) {
      return function(a, b) {
        var value1 = a[prop]
        var value2 = b[prop]
        if (align == 'positive') {
          //正序
          return new Date(value1) - new Date(value2)
        } else if (align == 'inverted') {
          //倒序
          return new Date(value2) - new Date(value1)
        }
      }
    },

封装日期获取方法

getNearMonth(val) {
      let dateArr = []
      let date = new Date(val)
      date.setMonth(date.getMonth() + 1, 1) // 设置到下个月
      for (let i = 0; i < 12; i++) {
        date.setMonth(date.getMonth() - 1) //每次循环一次 月份值减1
        let m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        dateArr.push(date.getFullYear() + '-' + m)
      }
      return dateArr.reverse()
    },

 接口拿到数据后进行数组组装：

let comList = res.data.sort(this.comDatepare(日期字段, 排序类型))
      let list = this.getNearMonth(当前月份)
      let listData = []
      for (let i = 0; i < list.length; i++) {
        var hasDate = false
        for (let k = 0; k < comList.length; k++) {
          if (comList[k].months == list[i]) {
            listData.push(comList[k])
            hasDate = true
          }
        }
        if (!hasDate) {
          listData.push({  name: list[i], value: 0 ,months: list[i],sales: 0,unit: "万元" })
        }
      }

 最终输出结果如下：

 就拿到了完整的近12个月数据，核心方法再上面封装的的方法里面，封装完成后后续直接调用就可以，最终图表显示如下；