Echarts滑块缩放组件默认展示固定区域

爱被打了一巴掌 2022-05-24 13:27 665阅读 0赞

**安居不用架高楼,书中自有黄金屋**  
现在的需求是这样的,如下图:无论我选择的时间是多少,下面的折线图都只展示近15天的数据:(前提是选择时间超过15天)  
![这里写图片描述][70]  
经过查找echarts官网得知,slide滑动条型数据区域缩放组件,可以自定义开始和结束位置,默认为0到100;  
![这里写图片描述][70 1]

由此可知: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天的数据;  
![这里写图片描述][70 2]

[70]: /images/20220524/5d13ef77f11f466586475cc978487394.png
[70 1]: /images/20220524/321aa5ae900d4a568bb8915339b99af1.png
[70 2]: /images/20220524/ca7df92e871d410888dc2cef86dd0ec5.png