今天做頁面的時候有這樣一個需求,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軸的數據就可以了。
上一篇: echarts巧用箭頭函數獲取Vue實例
下一篇: 營銷型網站設計的特征和注意事項
)
)
)
