今天在做后台的时候，遇到一个需求，就是要展示近6个月/近7天的数据。

下面封装一下近几天和近几个月的时间获取函数：

1.近几天的时间函数封装

注意一下，比如今天是8月12日，则近7天的初始时间是8月6日凌晨。此处后端要求的时间格式是年月日

函数封装如下：

getDayBefore(day) {
    var date = new Date();
    var timeBefore = date.getTime() + 1000 * 60 * 60 * 24 * day;
    date = new Date(timeBefore);
    var year = date.getFullYear().toString().padStart(4, "0");
    var month = (date.getMonth() + 1).toString().padStart(2, "0");
    var day = (date.getDate() + 1).toString().padStart(2, "0");
    return `${year}-${month}-${day}`;
},

如果要看7天前的数据，则getDayBefore(-7)即可得到初始时间，然后在获取当前时间，就拿到近7天的时间区间了。当前时间的年月日格式可以参照上一篇博客。

用上面的代码获取年月都没有问题，获取天的时候可能会遇到问题

比如：date.getDate()拿到的是某个月份的最后一天，我直接+1，就会出现一个不存在的天数，因此需要进行判断后再显示天数。

var date = new Date();
var timeBefore = date.getTime() + 1000 * 60 * 60 * 24 * day;
date = new Date(timeBefore);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
//获取当前月份的最后一天
var d = new Date(year, month, 0);
var lastDay = d.getDate();
if (day > lastDay) {
    day = '01';
    if (month == 12) {
        month = '01';
        year += 1;
    } else {
        month += 1;
    }
} else {
    day += 1;
}
month = month.toString().padStart(2, "0");
day = day.toString().padStart(2, "0");
return `${year}-${month}-${day}`;

2.近6个月时间函数封装

近6个月的时间初始值，这个计算的时候需要注意，如果跨年了，则需要把年份减一。而且月份是从0开始的。

getMonthDiff(year, month, day, mon) {
      if (month - mon < 0) {
        month = 12 + (month - mon);
        year -= 1;
      } else if (month - mon > 12) {
        month = month - mon - 12;
        year += 1;
      } else {
        month = month - mon;
      }
      var days = new Date(year, month, 0).getDate();
      if (day > days - 1) {
        day = days - 1;
      }
      return `${year}-${month}-${day}`;
    }

如果是获取近6个月的时间，则可以通过getMonthBefore(6)即可，当然上面的函数可以封装成跟近几天的一样，区分一下前几个月和后几个月，也就是将代码中的-mon变成mon就可以了，传参的时候需要传-6。

3.多条折线图的数据处理

对于多条折线图，需要注意以下几点：

1.需要有图例，否则无法知道每条折线代表的含义

option初始化： 指定图例的位置，还可以定义颜色

var optionRate: {
         title: {
              text: '交期准时率',
              subtext: ''
          },
          grid: {
              left: "8%"
          },
          legend: {
              left: 'center',
          },
          color: ['#f90','#67c23a'],
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: []
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                  show: true,
                  interval: 'auto'
              }
          },
          series: []
      },
}

2.给series赋值时，需要注意，每条折线都需要有name type data 等参数，否则折线不会展示

这个就是我吃的大亏，最终就是这个问题导致的，没有给每条折线都赋值name type等。

4.饼图不展示

今天在做饼图时，发现标题可以出来，但是饼图一直不显示，为了保证数据没有问题，我都把echarts官网中的示例代码都拷贝了。

饼图不展示，需要判断一下是哪种情况引起的。

1.没有给对应的div设置宽高，这个也是非常重要的。

2.确保数据没有问题，可以将echarts官网中示例的数据拷贝过去，进行渲染，借此排除数据问题。

3.如果上面的两种情况都排除了，则需要看下echarts是否是js引入的方式。

因为js如果是本地引入的，则需要在官网上下载echarts.js

我这边是在线定制化的

当初下载echart时，为了能够将文件体积缩小，因此在定制时，只选择了柱状图和折线图。

所以，即便我的饼图数据没有问题，依然导致饼图显示不出来。重新定制echart之后，在此引入echart.js。饼图就显示出来了。

多多练习，多多积累。