睡眠分期 html - 技术栈

截图

代码

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>