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

本文介绍如何使用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天的数据;
这里写图片描述

在微信小程序中,ECharts的数据区域缩放(DataZoom)默认是以滑动条的形式展示的,如果想要将它转换成点击事件,你需要自定义一些步骤。以下是基本的实现方法: 1. 首先,在创建ECharts实例时,保持DataZoom组件的启用,并设置其显示形式为内置(内部的滑块),例如: ```javascript var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ dataZoom: { show: true, type: 'inside', // 内置滑块 start: 0, end: 100 // 起始和结束比例 }, ...其他配置项... }); ``` 2. 然后,你需要监听DataZoom的`dataZoom`事件,当用户点击滑块时,这个事件会被触发。在回调函数中,你可以获取到当前的缩放范围并处理它。例如: ```javascript myChart.on('dataZoom', function (params) { var startPercent = params.start; var endPercent = params.end; // 这里可以做你想做的操作,比如更新数据、改变图表视图等 console.log('Start zoom:', startPercent, '% - End zoom:', endPercent, '%'); }); ``` 3. 如果你想在特定的区域响应点击,可以在`onInit`或`onClick`事件中,检查点击位置是否在DataZoom区域内,然后触发相应的操作。 ```javascript // 假设mousedown和mouseup事件分别表示开始和结束点击 document.addEventListener('mousedown', function(e){ if(myChart.getZr().containPixel(...)) { // 检查点击点是否在图表内 myChart.dataZoom.start = e.offsetX / canvas.clientWidth; // 计算起始缩放比例 myChart.dataZoom.end = e.offsetY / canvas.clientHeight; // 计算结束缩放比例 } }); document.addEventListener('mouseup', function(e){ // 在这里处理鼠标松开后的后续操作 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值