安居不用架高樓,書中自有黃金屋
現在的需求是這樣的,如下圖:無論我選擇的時間是多少,下面的折線圖都只展示近15天的資料:(前提是選擇時間超過15天)

經過查詢echarts官網得知,slide滑動條型資料區域縮放元件,可以自定義開始和結束位置,預設為0到100;

由此可知:end值我們可知固定設定成100,因為需求中明確規定檢視的近15天的資料;但問題是,開始值,從多少開始呢?

在此,需要計算滑塊開始的位置:分析可得,既然是把橫座標分成100份,然後開始位置需要是在近15天,可以得到如下公式:

令:(結束時間與開始時間之間的差值) = y;//根據圖1這裡的y=27
得:滑塊的開始位置=100
 
/y*(y-15) - 100/y

也就是:首先用100除以橫座標(相差的天數)得出橫座標上每個點的份數,再乘以前12天,得到前12天的開始位置,根據圖1,這裡算出來的開始位置為13號,所以,需要再減掉一個份數;最終得到開始位置在12號上;

在這裡再給出計算兩個日期之間相差天數的方法:

//兩個時間相差天數
function getDateDiff( date1, date2) {    //sDate1和sDate2是20180518格式
    //根據年 . 月 . 日的值建立Date物件
    var date1Obj = new Date(date1.substr(0,4),date1.substr(4
 
,2),date1.substr(6));
    var date2Obj = new Date(date2.substr(0,4),date2.substr(4,2),date2.substr(6));
    var t1 = date1Obj.getTime();
    var t2 = date2Obj.getTime();
    var dateTime = 1000*60*60*24; //每一天的毫秒數
    var minusDays = Math.floor(((t2-t1)/dateTime));//計算出兩個日期的天數差
    var days = Math.abs(minusDays);//取絕對值
 

    return days;
};

slideStart(滑塊開始位置) = (100 / getDateDiff(endDate ,startDate)) * (getDateDiff(endDate, startDate) - 15) - (100 / getDateDiff(endDate , startDate));

由此就可以得到,無論檢視哪個區間,都可以顯示近15天的資料;