实用指南：睡眠分期 html
截图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>睡眠图表</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<style>
#chart-container {
height: 400px;
}
</style>
</head>
<body>
<div id="chart-container"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart-container'
)
)
;
var xData = [2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,3
,4
,4
,4
,4
,4
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,4
,4
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,1
,1
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,2
,2
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,1
,1
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,2
,2
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,1
,1
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,2
,2
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,1
,1
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,2
,2
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,1
,1
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,2
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,4
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,3
,2
,2]
;
var xData_High = []
;
var xData_Low = []
;
for (
var i = 0
; i < xData.length; i++
) {
xData_Low.push(0.85
)
;
xData_High.push(xData[i]-1+0.05
)
;
}
console.log(' xData ====>'
,xData_Low, xData_High)
var option;
option = {
color: ['#80FFA5'
, '#80FFA5']
,
tooltip: {
trigger: 'axis'
, formatter:
function (params
) {
let value = Math.floor(params[0].value)
return `<div>
${value
} </div>
`
}
}
,
grid: {
left: '3%'
,
right: '4%'
,
bottom: '3%'
,
containLabel: true
}
,
xAxis: [
{
type: 'category'
,
boundaryGap: false
}
]
,
yAxis: [
{
type: 'value'
,
min: 0
,
max: 4
,
interval: 1
, // 每个整数有一个刻度
axisLabel: {
formatter:
function (value
) {
if (value >= 0 && value <
1
)
return '清醒'
;
if (value >= 1 && value <
2
)
return '浅睡'
;
if (value >= 2 && value <
3
)
return '深睡'
;
if (value >= 3 && value <= 4
)
return '离床'
;
return ''
;
}
,
margin: 20 // 可适当调整间距
}
,
axisTick: {
alignWithLabel: true
}
}
,
]
,
series: [
{
type: 'line'
,
stack: 'Total'
,
smooth: true
,
showSymbol: false
,
data: xData_High
}
,
{
type: 'line'
,
stack: 'Total'
,
smooth: true
,
showSymbol: false
,
areaStyle: {
opacity: 0.8
,
color: '#80FFA5'
}
,
data:xData_Low
}
]
}
;
option && myChart.setOption(option)
;
</script>
</body>
</html>
浙公网安备 33010602011771号