效果圖:
關鍵方法程式碼：
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
}