根据daterangepicker选择的时间范围来决定echart图X轴的坐标

有一个需求是,根据daterangepicker选择的时间范围来决定echart图X轴的坐标,比如6小时以内是这范围内的每一分钟为刻度,6小时到7天内的则是以每小时为刻度。

我把初版代码放上来,有些变量是修改后不需要的,没删,删后的就不放上来了在这里插入图片描述

获取小时的数组

function timeSlot (step,start,end) {   //  step = 间隔的分钟
                var date = new Date(start)
                const num=(Date.parse(end)-Date.parse(start))/(1000*60*60) 
                var arr = [], timeArr = [];
                var slotNum = num*60/step   // 算出多少个间隔
                for (var f = 0; f <= slotNum; f++) {   //  stepM * f = 24H*60M
                    var time = new Date(Number(date.getTime()) + Number(step*60*1000*f))  // 获取:零点的时间 + 每次递增的时间
                    var hour = '', sec = '';
                    time.getHours() < 10 ? hour = '0' + time.getHours() : hour = time.getHours()  // 获取小时
                    time.getMinutes() < 10 ? sec = '0' + time.getMinutes() : sec = time.getMinutes()   // 获取分钟
                    timeArr.push(time.toLocaleDateString()+" " + hour + ':' + sec)
                }
                return timeArr
            }

获取两个时间戳之间相差分钟数的数组

 function miniteSlot (step,start,end) {   //  step = 间隔的分钟
                var date = new Date(start)
                const num=(Date.parse(end)-Date.parse(start))/(1000*60)
                var arr = [], timeArr = [];
                var slotNum = num/step   // 算出多少个间隔
                for (var f = 1; f <= slotNum; f++) {   //  stepM * f = 24H*60M
                    var time = new Date(Number(date.getTime()) + Number(step*60*1000*f))  // 获取:零点的时间 + 每次递增的时间
                    var hour = '', sec = '';
                    time.getHours() < 10 ? hour = '0' + time.getHours() : hour = time.getHours()  // 获取小时
                    time.getMinutes() < 10 ? sec = '0' + time.getMinutes() : sec = time.getMinutes()   // 获取分钟
                    timeArr.push(hour + ':' + sec)
                }
                return timeArr
            }

获取两个日期之间的数组

 function  getDaysBetween(dateString1,dateString2){
      var  startDate = Date.parse(dateString1);
       var  endDate = Date.parse(dateString2);
       var days=(endDate - startDate)/(1*24*60*60*1000);
       return  days;
}
 // 获取两个日期之间的数组
  function daysSlot (start,end) {   //  step = 间隔的分钟
      const num=getDaysBetween(start,end) 
      var arr = [], timeArr = [];
      for (var f = 0; f <= num; f++) {   //  stepM * f = 24H*60M
          var time = new Date(Number(new Date(start)) + Number(24*60*60*1000*f))  // 获取:零点的时间 + 每次递增的时间
          var hour = '', sec = '';
          timeArr.push(time.toLocaleDateString())
      }
      return timeArr
  }

初始化时间框,并判断时间选择范围

$(".es-daterange-time").each(function () {
                    let that = this
                    const id = $(that).attr("id")
                    $(that).daterangepicker({
                            autoUpdateInput: true,
                            alwaysShowCalendars: true,
                            drops: 'down',
                            opens: 'left',
                            timePicker: true, //是否显示time选择
                            timePicker24Hour: true, //小时分钟
                            timePickerSeconds: id === "es_seconds_daterangetime" ? true : false, //秒
                            ranges: {
                                '24小时': [moment().format('YYYY-MM-DD HH:mm:ss'), moment()],
                                '3天内': [moment().subtract('days', 2), moment()],
                                '7天内': [moment().subtract('days', 6), moment()],
                                '30天内': [moment().subtract('days', 29), moment()],
                                '90天内': [moment().subtract('days', 89), moment()],
                                '180天内': [moment().subtract('days', 179), moment()]
                            },
                            locale: {
                                format: id === "es_seconds_daterangetime" ? "YYYY-MM-DD HH:mm:ss" :"YYYY-MM-DD HH:mm",
                            },
                            maxDate: new Date(), //当前最新时间
                            startDate: moment().subtract('hour', 6).format('YYYY-MM-DD HH:mm'),
                            endDate: moment().format('YYYY-MM-DD HH:mm'),
                        },
                        function (start, end) {
                            $(that).val(start.format('YYYY-MM-DD') + ' ~ ' + end.format('YYYY-MM-DD'));
                        }
                    ).on('apply.daterangepicker', function (ev, picker) {
                        // 判断选择的时间范围
                        const timeDifference = Date.parse(picker.endDate.format('YYYY-MM-DD HH:mm'))-Date.parse(picker.startDate.format('YYYY-MM-DD HH:mm'))
                        //大于0小于6小时
                        if(timeDifference > 0 && timeDifference<= 60* 60 * 1000*6){
                            dateData=miniteSlot(1,picker.startDate.format('YYYY-MM-DD HH:mm'),picker.endDate.format('YYYY-MM-DD HH:mm'))
                        }else if(timeDifference> 60* 60 * 1000*6 &&timeDifference<= 60* 60 * 1000*24*7){
                            dateData = timeSlot(60,picker.startDate.format('YYYY-MM-DD HH:mm'),picker.endDate.format('YYYY-MM-DD HH:mm')) 
                        }
                        else if(timeDifference> 60* 60 * 1000*24*7){
                            dateData = daysSlot(picker.startDate.format('YYYY-MM-DD'),picker.endDate.format('YYYY-MM-DD')) 
                        }else{
                            dateData=[new Date().toLocaleTimeString()]
                        }


                        if(id==="failed_summary_input"){
                            initESLineChart("es_failed_chart",esFailedData,dateData)
                            $(that).val(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
                        }else if(id==="es_request_input"){
                            initESLineChart("es_request_line_chart",esRequestData, dateData)
                            $(that).val(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
                        }else{
                            $(that).parents(".panel").find(".hexdots-loader").show()
                            $(that).parents(".panel").find(".table-responsive").hide()
                            $(that).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
                            setTimeout(function () {
                                $(that).parents(".panel").find(".hexdots-loader").hide()
                                $(that).parents(".panel").find(".table-responsive").show()
                            },1500)
                        }

                    });
                })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值