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

最新推荐文章于 2025-07-10 10:50:17 发布

原创最新推荐文章于 2025-07-10 10:50:17 发布 · 6.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #Echarts滑块 #Echarts拖动 #Echarts缩放

Echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ECharts的滑动条组件实现图表数据区域的缩放功能，确保无论选择的时间范围如何，始终能展示最近15天的数据，并提供了一个计算滑动条开始位置的具体公式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安居不用架高楼,书中自有黄金屋
现在的需求是这样的,如下图:无论我选择的时间是多少,下面的折线图都只展示近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天的数据;
这里写图片描述