根据时间选择器展示echarts轴时间

    今天做页面的时候有这样一个需求，element的时间选择器只能选择一星期的数据，并且根据时间选择器选择的时间展示echarts轴的时间。这里一般的解决的方法是把时间范围发给后端，后端会带着数据返回。但是，前端也可以完成时间轴的获取。

一、时间选择一星期

    Element有一个叫picker-options的属性，可以控制禁止选取的日期。

        它绑定data中的一个对象，对象中可以设置方法。直接上代码。

 pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = ''
        },
        disabledDate: time => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 6 * 24 * 3600 * 1000
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              // 限制不能选择今天及以后
              time.getTime() > Date.now()
            )
          } else {
            // 如果没有选择日期，就要限制不能选择今天及以后
            return time.getTime() > Date.now()
          }
        }
      },

二、获得日期数组

    Echarts的x轴的data是一个数组，而我们只有两个日期，还是个字符串，所以我们现需要把两个日期字符串转变为能够计算的毫秒数。

      var bd = new Date(arr[0]), be = new Date(arr[1]); //转为中国标准时间
      var bd_time = bd.getTime(), be_time = be.getTime(), time_diff = be_time - bd_time; //转为毫秒
      var d_arr = [];
      for (var i = 0; i <= time_diff; i += 86400000) {
        var ds = new Date(bd_time + i);
        d_arr.push((ds.getMonth() + 1) + '-' + ds.getDate())
      }

    首先通过new Date()转变为中国标准时间，再通过getTime转变为毫秒数，计算出两个日期相差的时间，利用for循环，每次循环增加86400000ms也就是一天的时间，每次循环都返回一个“月-日”的字符串，并利用push加入到数组中，这样就得到了数组。

    如果需要补0就判断ds.getMonth和ds.getDate的大小，如果小于10就+‘0’。

    然后我们把d_arr作为x轴的数据就可以了。