当前位置: 首页 > article >正文

睡眠分期 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>

相关文章:

睡眠分期 html

截图 代码 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>睡眠图表</title><script src…...

Java求职者面试:Spring、Spring Boot、Spring MVC与MyBatis技术深度解析

Java求职者面试&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术深度解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释什么是Spring框架&#xff1f;它的核心功能是什么&#xff1f; JY&#xff1a;Spring是一个开源的Java/Java EE企业级应用开…...

Github 2025-05-29 Go开源项目日报Top9

根据Github Trendings的统计,今日(2025-05-29统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Go项目9Assembly项目1Ollama: 本地大型语言模型设置与运行 创建周期:248 天开发语言:Go协议类型:MIT LicenseStar数量:42421 个Fork数量:27…...

前端项目种对某个文件夹进行大小写更改,git识别不到差异导致无变化

问题背景 开发过程中可能遇到一个文件名要更改大小写&#xff0c;但是更改后之后本地会有变化&#xff0c;但是git识别不到差异化&#xff0c;正常去更改一个文件名称git差异化会出现删除了原有文件,新增了一个新文件,但是更改大小写则不会 如何解决 在终端中输入git config…...

AWS VPC 网络详解:理解云上专属内网的关键要素

全面解读 AWS VPC、子网、安全组、路由与 NAT 网关的实际应用 在使用 AWS 云服务的过程中&#xff0c;许多用户最先接触的是 EC2&#xff08;云服务器&#xff09;。但你是否曾遇到过这样的情况&#xff1a;实例启动正常&#xff0c;却无法访问公网&#xff1f;或者数据库无法…...

Ubuntu24.04.2 + kubectl1.33.1 + containerdv1.7.27 + calicov3.30.0

Ubuntu24.04.2 kubectl1.33.1 containerdv1.7.27 calicov3.30.0 安装Ubuntu24.04.2 kubectl1.33.1 containerdv1.7.27 calicov3.30.0 1.安装Ubuntu24.04.2&#xff0c;设置阿里云镜像地址 $ sudo vim /etc/apt/sources.list.d/ubuntu.sources URIs: https://mirrors.aliy…...

循环神经网络(RNN)全面教程:从原理到实践

循环神经网络(RNN)全面教程&#xff1a;从原理到实践 引言 循环神经网络(Recurrent Neural Network, RNN)是处理序列数据的经典神经网络架构&#xff0c;在自然语言处理、语音识别、时间序列预测等领域有着广泛应用。本文将系统介绍RNN的核心概念、常见变体、实现方法以及实际…...

uniapp 键盘顶起页面问题

关于uniapp中键盘顶起页面的问题。这是一个在移动应用开发中常见的问题&#xff0c;特别是当输入框位于页面底部时&#xff0c;键盘弹出会顶起整个页面&#xff0c;导致页面布局错乱。 pages.json 文件内&#xff0c;在需要处理软键盘的页面添加 softinputMode 配置&#xff1…...

利用TOA与最小二乘法直接求解

为了利用到达时间&#xff08;TOA&#xff09;和最小二乘法直接求解&#xff0c;我们首先需要理解TOA定位的基本原理和最小二乘法的应用。 步骤1: 理解TOA定位原理 到达时间&#xff08;TOA&#xff09;定位是通过测量信号从发射源到达接收器的时间来确定位置的一种方法。假设…...

SpringBoot系列之RabbitMQ 实现订单超时未支付自动关闭功能

系列博客专栏&#xff1a; JVM系列博客专栏SpringBoot系列博客 RabbitMQ 实现订单超时自动关闭功能&#xff1a;从原理到实践的全流程解析 一、业务场景与技术选型 在电商系统中&#xff0c;订单超时未支付自动关闭功能是保障库存准确性、提升用户体验的核心机制。传统定时任…...

【C++高级主题】命令空间(五):类、命名空间和作用域

目录 一、实参相关的查找&#xff08;ADL&#xff09;&#xff1a;函数调用的 “智能搜索” 1.1 ADL 的核心规则 1.2 ADL 的触发条件 1.3 ADL 的典型应用场景 1.4 ADL 的潜在风险与规避 二、隐式友元声明&#xff1a;类与命名空间的 “私密通道” 2.1 友元声明的基本规则…...

ArcGIS Pro 3.4 二次开发 - 地图创作 1

环境:ArcGIS Pro SDK 3.4 + .NET 8 文章目录 ArcGIS Pro 3.4 二次开发 - 地图创作 11 样式管理1.1 如何通过名称获取项目中的样式1.2 如何创建新样式1.3 如何向项目添加样式1.4 如何从项目中移除样式1.5 如何向样式添加样式项1.6 如何从样式中移除样式项1.7 如何判断样式是否可…...

2.1HarmonyOS NEXT开发工具链进阶:DevEco Studio深度实践

HarmonyOS NEXT开发工具链进阶&#xff1a;DevEco Studio深度实践 在HarmonyOS NEXT全栈自研的技术体系下&#xff0c;DevEco Studio作为一站式开发平台&#xff0c;通过深度整合分布式开发能力&#xff0c;为开发者提供了从代码编写到多端部署的全流程支持。本章节将围绕多设…...

MyBatis常用注解全解析:从基础CRUD到高级映射

MyBatis常用注解全解析&#xff1a;从基础CRUD到高级映射 本文全面解析MyBatis核心注解体系&#xff0c;涵盖基础操作、动态SQL、关系映射等高级特性&#xff0c;助你彻底掌握MyBatis注解开发精髓 一、MyBatis注解概述 1.1 注解 vs XML配置 MyBatis同时支持XML配置和注解两种…...

国标GB28181设备管理软件EasyGBS视频平台筑牢文物保护安全防线创新方案

一、方案背景​ 文物作为人类文明的珍贵载体&#xff0c;具有不可再生性。当前&#xff0c;盗窃破坏、游客不文明行为及自然侵蚀威胁文物安全&#xff0c;传统保护手段存在响应滞后、覆盖不全等局限。随着5G与信息技术发展&#xff0c;基于GB28181协议的EasyGBS视频云平台&…...

十二、【核心功能篇】测试用例列表与搜索:高效展示和查找海量用例

【核心功能篇】测试用例列表与搜索:高效展示和查找海量用例 前言准备工作第一步:更新 API 服务以支持分页和更完善的搜索第二步:创建测试用例列表页面组件 (`src/views/testcase/TestCaseListView.vue`)第三步:测试列表、搜索、筛选和分页总结前言 当测试用例数量逐渐增多…...

Baklib内容中台AI重构智能服务

AI驱动智能服务进化 在智能服务领域&#xff0c;Baklib内容中台通过自然语言处理技术与深度学习框架的深度融合&#xff0c;构建出具备意图理解能力的知识中枢。系统不仅能够快速解析用户输入的显性需求&#xff0c;更通过上下文关联分析算法识别会话场景中的隐性诉求&#xf…...

数据库包括哪些?关系型数据库是什么意思?

目录 一、数据库包括哪些 &#xff08;一&#xff09;关系型数据库 &#xff08;二&#xff09;非关系型数据库 &#xff08;三&#xff09;分布式数据库 &#xff08;四&#xff09;内存数据库 二、关系型数据库是什么 &#xff08;一&#xff09;关系模型的基本概念 …...

Python爬虫监控程序设计思路

最近因为爬虫程序太多&#xff0c;想要为Python爬虫设计一个监控程序&#xff0c;主要功能包括一下几种&#xff1a; 1、监控爬虫的运行状态&#xff08;是否在运行、运行时间等&#xff09; 2、监控爬虫的性能&#xff08;如请求频率、响应时间、错误率等&#xff09; 3、资…...

Edge浏览器怎样开启兼容模式

允许站点在 IE 模式下重新加载&#xff1a; 打开 Edge 浏览器&#xff0c;点击右上角的三个点图标&#xff0c;选择 “设置”&#xff08;或者按下 “Alt F” 组合键后再点击 “设置”&#xff09;。在设置页面中&#xff0c;切换到左侧的 “默认浏览器” 选项卡。在 “Intern…...

【HarmonyOS 5】Laya游戏如何鸿蒙构建发布详解

【HarmonyOS 5】Laya游戏如何鸿蒙构建发布详解 一、前言 LayaAir引擎是国内最强大的全平台引擎之一&#xff0c;当年H5小游戏火的时候&#xff0c;腾讯入股了腊鸭。我还在游戏公司的时候&#xff0c;17年曾经开发使用腊鸭的H5小游戏&#xff0c;很怀念当年和腊鸭同事一起解决…...

C++ TCP传输心跳信息

在C++ TCP程序中实现心跳机制是保持连接活跃、检测连接状态的重要手段。以下是几种常见的心跳实现方式: 1. 应用层心跳(推荐) 基本心跳实现 #include <iostream> #include <thread> #include <chrono>...

Elasticsearch | 如何将修改已有的索引字段类型并迁移数据

CodingTechWork 引言 在 Elasticsearch 中&#xff0c;一旦索引的字段类型被定义&#xff0c;就无法直接修改已有字段的类型。例如&#xff0c;如果你已经将 timestamp 字段的类型设置为 TEXT&#xff0c;并希望将其更改为 DATE 类型&#xff0c;这将需要一些额外的步骤。在这…...

c++之STL容器的学习(上)

一、泛型编程&#xff08;函数模板和类模板&#xff09; 这部分围绕泛型编程技术展开&#xff0c;C中的泛型编程主要是通过函数模板和类模板实现的&#xff0c;主要会介绍标准模板库STL的知识点。1.关于模板的理解 模板就是建立一种通用的模式&#xff0c;从而提高复用性。在生…...

Linux 环境下高效视频切帧的实用指南

Linux 环境下高效视频切帧的实用指南 在视频处理领域&#xff0c;切帧是一项基础且常用的操作&#xff0c;它能够将视频按照指定的规则提取出单帧图像&#xff0c;广泛应用于视频分析、视频缩略图生成、视频内容预览等场景。在 Linux 系统中&#xff0c;我们可以借助强大的开源…...

【鱼皮-用户中心】笔记

任务&#xff1a;完整了解做项目的思路&#xff0c;接触一些企业及的开发技术 title 企业做项目流程需求分析技术选型 计划一一、前端初始化1. **下载node.js**2. **安装yarn**3. **初始化 Ant Design Pro 脚⼿架&#xff08;关于更多可进入官网了解&#xff09;**4. **开启Umi…...

MUX-VLAN基本概述

目录 1&#xff09;技术背景&#xff1a; 2&#xff09;基本概念&#xff1a; 3&#xff09;配置&#xff1a;进vlan视图下键入 1&#xff09;技术背景&#xff1a; 在企业网络中&#xff0c;各个部门之间网络需要相互独立&#xff0c;通常使用VLAN技术可以实现这一要求。如果企…...

Cursor使用最佳实践总结

#作者&#xff1a;曹付江 文章目录 1、需求文档怎么写2. 项目文件夹选择3.技术栈的选择4.最重要&#xff1a;Cursor中的Rules&#xff08;规则&#xff09;5.对话模式与模型选择6. New Chat&#xff08;新建对话&#xff09;7.自动化测试8.前后端细调的方法9、完整Cursor项目模…...

交错推理强化学习方法提升医疗大语言模型推理能力的深度分析

核心概念解析 交错推理:灵活多变的思考方式 交错推理(Interleaved Reasoning)是一种在解决复杂问题时,不严格遵循单一、线性推理路径,而是交替、灵活应用多种推理策略的方法。这种思维方式与人类专家在处理复杂医疗问题时的思考模式更为接近,表现为一种动态、适应性强的…...

SpringBatch+Mysql+hanlp简版智能搜索

资源条件有限&#xff0c;需要支持智搜的数据量也不大&#xff0c;上es搜索有点大材小用了&#xff0c;只好写个简版mysql的智搜&#xff0c;处理全文搜素&#xff0c;支持拼音搜索&#xff0c;中文分词&#xff0c;自定义分词断词&#xff0c;地图范围搜索&#xff0c;周边搜索…...