今天做頁面的時候有這樣一個需求，element的時間選擇器只能選擇一星期的數(shù)據(jù)，并且根據(jù)時間選擇器選擇的時間展示echarts軸的時間。這里一般的解決的方法是把時間范圍發(fā)給后端，后端會帶著數(shù)據(jù)返回。但是，前端也可以完成時間軸的獲取。

一、時間選擇一星期

    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()
          }
        }
      },

二、獲得日期數(shù)組

    Echarts的x軸的data是一個數(shù)組，而我們只有兩個日期，還是個字符串，所以我們現(xiàn)需要把兩個日期字符串轉(zhuǎn)變?yōu)槟軌蛴嬎愕暮撩霐?shù)。

      var bd = new Date(arr[0]), be = new Date(arr[1]); //轉(zhuǎn)為中國標準時間
      var bd_time = bd.getTime(), be_time = be.getTime(), time_diff = be_time - bd_time; //轉(zhuǎn)為毫秒
      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()轉(zhuǎn)變?yōu)橹袊鴺藴蕰r間，再通過getTime轉(zhuǎn)變?yōu)楹撩霐?shù)，計算出兩個日期相差的時間，利用for循環(huán)，每次循環(huán)增加86400000ms也就是一天的時間，每次循環(huán)都返回一個“月-日”的字符串，并利用push加入到數(shù)組中，這樣就得到了數(shù)組。

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

    然后我們把d_arr作為x軸的數(shù)據(jù)就可以了。