今天做頁(yè)面的時(shí)候有這樣一個(gè)需求，element的時(shí)間選擇器只能選擇一星期的數(shù)據(jù)，并且根據(jù)時(shí)間選擇器選擇的時(shí)間展示echarts軸的時(shí)間。這里一般的解決的方法是把時(shí)間范圍發(fā)給后端，后端會(huì)帶著數(shù)據(jù)返回。但是，前端也可以完成時(shí)間軸的獲取。
一、時(shí)間選擇一星期
Element有一個(gè)叫picker-options的屬性，可以控制禁止選取的日期。
它綁定data中的一個(gè)對(duì)象，對(duì)象中可以設(shè)置方法。直接上代碼。
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
// 把選擇的第一個(gè)日期賦值給一個(gè)變量。
this.choiceDate = minDate.getTime()
// 如何你選擇了兩個(gè)日期了，就把那個(gè)變量置空
if (maxDate) this.choiceDate = ''
},
disabledDate: time => {
// 如何選擇了一個(gè)日期
if (this.choiceDate) {
// 7天的時(shí)間戳
const one = 6 * 24 * 3600 * 1000
// 當(dāng)前日期 - one = 7天之前
const minTime = this.choiceDate - one
// 當(dāng)前日期 + one = 7天之后
const maxTime = this.choiceDate + one
return (
time.getTime() < minTime ||
time.getTime() > maxTime ||
// 限制不能選擇今天及以后
time.getTime() > Date.now()
)
} else {
// 如果沒(méi)有選擇日期，就要限制不能選擇今天及以后
return time.getTime() > Date.now()
}
}
}, 
二、獲得日期數(shù)組
Echarts的x軸的data是一個(gè)數(shù)組，而我們只有兩個(gè)日期，還是個(gè)字符串，所以我們現(xiàn)需要把兩個(gè)日期字符串轉(zhuǎn)變?yōu)槟軌蛴?jì)算的毫秒數(shù)。
var bd = new Date(arr[0]), be = new Date(arr[1]); //轉(zhuǎn)為中國(guó)標(biāo)準(zhǔn)時(shí)間
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())
}首先通過(guò)new Date()轉(zhuǎn)變?yōu)橹袊?guó)標(biāo)準(zhǔn)時(shí)間，再通過(guò)getTime轉(zhuǎn)變?yōu)楹撩霐?shù)，計(jì)算出兩個(gè)日期相差的時(shí)間，利用for循環(huán)，每次循環(huán)增加86400000ms也就是一天的時(shí)間，每次循環(huán)都返回一個(gè)“月-日”的字符串，并利用push加入到數(shù)組中，這樣就得到了數(shù)組。
如果需要補(bǔ)0就判斷ds.getMonth和ds.getDate的大小，如果小于10就+‘0’。
然后我們把d_arr作為x軸的數(shù)據(jù)就可以了。
