睡眠分期 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/[email protected]/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>
相关推荐
&白帝&2 小时前
前端实现截图的几种方法
前端
动能小子ohhh3 小时前
html实现登录与注册功能案例(不写死且只使用js)
开发语言·前端·javascript·python·html
小小小小宇3 小时前
大文件断点续传笔记
前端
Jimmy3 小时前
理解 React Context API: 实用指南
前端·javascript·react.js
保持学习ing3 小时前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery
李明一.4 小时前
Java 全栈开发学习:从后端基石到前端灵动的成长之路
java·前端·学习
观默4 小时前
我用AI造了个“懂我家娃”的育儿助手
前端·人工智能·产品
crary,记忆4 小时前
微前端MFE:(React 与 Angular)框架之间的通信方式
前端·javascript·学习·react.js·angular
星空寻流年4 小时前
javaScirpt学习第七章(数组)-第一部分
前端·javascript·学习
巴巴_羊5 小时前
React JSX语法
javascript·react.js·ecmascript