当前位置：首页 > java >正文

睡眠分期 html

java 2025/7/26 22:29:49

截图

在这里插入图片描述

代码

<!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>