echarts 睡眠时间段+日期

标签：睡眠 00 10 2024 时间段 date let echarts minute

效果图:

关键方法代码：

const initChartDataTwo = (scollectT, dataL) => {
//给一个测试的数据

scollectT = [
"2024-10-29",
"2024-10-25",
"2024-10-24",
"2024-10-22",
"2024-10-18",
"2024-10-16",
"2024-09-18"
]

dataL= 

[
{
"sleepTime": "2024-10-28 21:00:00",
"weekupTime": "2024-10-29 15:00:00",
"sleepDuration": "18.0",
},
{
"sleepTime": "2024-10-25 13:20:00",
"weekupTime": "2024-10-25 15:35:00",
"sleepDuration": "2.25",
},
{
"sleepTime": "2024-10-24 13:00:00",
"weekupTime": "2024-10-24 15:00:00",
"sleepDuration": "2.0",
},
{
"sleepTime": "2024-10-22 01:00:00",
"weekupTime": "2024-10-22 08:00:00",
"sleepDuration": "7.0",
},
{
"sleepTime": "2024-10-17 20:00:00",
"weekupTime": "2024-10-18 06:00:00",
"sleepDuration": "10.0",
},
{
"sleepTime": "2024-10-15 20:00:00",
"weekupTime": "2024-10-15 23:00:00",
"sleepDuration": "3.0",
},
{
"sleepTime": "2024-09-17 20:00:00",
"weekupTime": "2024-09-18 06:00:00",
"sleepDuration": "10.0",
}
]

  let timeData = dataL.map((item) => {     return item.endTime   })   let timeDuration = dataL.map((item) => {     return Number(item.sleepDuration)   })   let chartMain = document.getElementById('chartMain')   myChart = echarts.getInstanceByDom(chartMain)   if (!myChart) {     myChart = echarts.init(chartMain)   }   // 修改echarts 图表 option   const option = {     tooltip: {       trigger: 'axis',       axisPointer: {         type: 'shadow'       },       formatter: function (params) {         let sleepTime = dataL[params[0].dataIndex].Hours         let sleepDuration = dataL[params[0].dataIndex].sleepDuration         return (           '入睡时间：' + sleepTime + '<br/>' + '睡眠时长：' + ' : ' + Number(sleepDuration) + '小时'         )       }     },     grid: {       left: '3%',       right: '4%',       bottom: 55,       containLabel: true     },     xAxis: {       type: 'category',       data: scollectT     },     dataZoom: [       {         show: true,         height: 35,         xAxisIndex: [0],         bottom: 15,         startValue: timeData.length - 9,         endValue: timeData.length,         handleIcon:           'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',         handleSize: '110%',         handleStyle: {           color: '#d3dee5'         },         textStyle: {           color: '#fff'         },         borderColor: '#90979c'       },       {         type: 'inside',         show: true,         height: 15       }     ],     yAxis: {       type: 'value',       min: 0,       max: 24,       interval: 4,       axisLabel: {         show: true,         formatter: function (value) {           if (value - 18 < 0) {             if (Math.abs(value - 18) < 10) {               return '0' + Math.abs(value - 18) + ':00'             } else {               return Math.abs(value - 18) + ':00'             }           } else {             if (Math.abs(42 - value) < 10) {               return '0' + Math.abs(42 - value) + ':00'             } else {               return Math.abs(42 - value) + ':00'             }           }         }       }     },     series: [       {         name: 'Placeholder',         type: 'bar',         stack: 'Total',         silent: true,         itemStyle: {           borderColor: 'transparent',           color: 'transparent'         },         barWidth: '20',         emphasis: {           itemStyle: {             borderColor: 'transparent',             color: 'transparent'           }         },         data: timeData       },       {         name: 'Income',         type: 'bar',         stack: 'Total',         barWidth: '20',         label: {           show: false,           position: 'top'         },         data: timeDuration       }     ]   }   myChart.setOption(option) }

 //给两个时间的方法

const formatDateTime = (timeStamp, returnType) => {   const date = new Date(timeStamp)   //   date.setTime(timeStamp * 1000)   const y = date.getFullYear()   let m = date.getMonth() + 1   m = m < 10 ? '0' + m : m   let d = date.getDate()   d = d < 10 ? '0' + d : d   let h = date.getHours()   h = h < 10 ? '0' + h : h   let minute = date.getMinutes()   let second = date.getSeconds()   minute = minute < 10 ? '0' + minute : minute   second = second < 10 ? '0' + second : second   let dateTime = ''   if (returnType == 'hours') {     dateTime = Number(date.getHours())   } else if (returnType == 'date') {     dateTime = y + '-' + m + '-' + d   } else if (returnType == 'hoursStr') {     dateTime = h + ':' + minute   } else if (returnType == 'check-Y-D') {     dateTime = m + '/' + d   } else if (returnType == 'year') {     dateTime = y   }   return dateTime } const formatDateTimeTwo = (timeStamp, timeStampTwo, returnType) => {   let date = new Date(new Date(timeStampTwo).getTime() - new Date(timeStamp).getTime())   const y = date.getFullYear()   let m = date.getMonth() + 1   m = m < 10 ? '0' + m : m   let d = date.getDate()   d = d < 10 ? '0' + d : d   let h = date.getHours()   h = h < 10 ? '0' + h : h   let minute = date.getMinutes()   let second = date.getSeconds()   minute = minute < 10 ? '0' + minute : minute   second = second < 10 ? '0' + second : second   let dateTime = ''   if (returnType == 'hours') {     dateTime = Number(date.getHours()) - 12   }   //   else if (returnType == 'date') {   //     dateTime = y + '-' + m + '-' + d   //   }   return dateTime }

标签：睡眠,00,10,2024,时间段,date,let,echarts,minute
From： https://www.cnblogs.com/dreammiao/p/18517312