关注女性健康，分享 echarts 绘制女性体温表源码
2024-05-05 22:38:33
前言
最近每天早起睁眼的第一件事就是测舌下体温（水银体温计），要想测得准，测温时间要固定，作息也要规律。
基础体温的动态变化一定程度上可以反映女性黄体功能是否正常。
医生给的纸质体温表被我画错了一格，强迫症的我就想重画，可惜没有第二张。作为现在还是程序媛的我，突然就来了灵感，那就用 echarts 画一张电子版的吧。
如何记录体温
1.使用传统的水银温度计，不要用电子的，精度记录保留2位小数即可，如 36.65 ℃。
2.睡醒后还躺在床上，还没坐起来前，不要说话，立即舌下测温，保持5分钟。
3.定好闹钟，每天在同一时间测量，测好温度后马上读取记录，不要隔很久才看。
4.记录哪几天因为环境因素导致结果不准，比如睡眠（失眠、晚睡）方式变化、时差影响、过量饮酒、疾病或药物等。
正文来了
初期效果
从程序员的角度看，下面这种形式的呈现是比较完美的。
但是，医生一看就说不行。
于是，有了第二版本。
体温表第二版本
这个版本就很接近医生提供的那个纸质表格了。对，重点就是表格。
横纵最好是方格或接近方格。
x轴几经测试，发现放自然数最合适，表示是第几天。
要表示一个完整的月经周期，所以是30天左右。当然，如果能保证方格，可以连续绘制更好。
源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>体温记录</title><script src="jquery-3.1.1.min.js"></script><script src="vue.js"></script><script src="echarts.min.js"></script><style>#chartBarLine{width: 100%;height: 800px;}#chartLine{width: 100%;height: 800px;}</style></head><body><div id="root"><div class="container"><div class="echarts"><!-- 方格折线图 --><div id="chartLine"></div><!-- 折线柱状图 --><div id="chartBarLine"></div></div></div></div><script>new Vue({el: "#root",data() {return {}},methods: {chartBarLine() {// 基于准备好的dom，初始化echarts实例var chartBarLine = echarts.init(document.getElementById('chartBarLine'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',axisPointer: {label: {backgroundColor: '#283b56'}}},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},dataZoom: {show: false,start: 0,end: 100},grid: {left: '100px',bottom: '100px',top: '10%'},xAxis: [{type: 'category',boundaryGap: true,axisLabel: {interval: 0,rotate: 40},data: ["2020-12-28", "2020-12-29", "2020-12-30", "2020-12-31", "2021-01-01", "2021-01-02", "2021-01-03", "2021-01-04", "2021-01-05","2021-01-06" ,"2021-01-07","2021-01-08","2021-01-09","2021-01-10","2021-01-11","2021-01-12","2021-01-13","2021-01-14","2021-01-15","2021-01-16","2021-01-17","2021-01-18","2021-01-19","2021-01-20","2021-01-21","2021-01-22"]},{type: 'category',boundaryGap: true,axisLabel: {interval: 0,rotate: 40},data: ["2020-12-28", "2020-12-29", "2020-12-30", "2020-12-31", "2021-01-01", "2021-01-02", "2021-01-03", "2021-01-04", "2021-01-05","2021-01-06" ,"2021-01-07","2021-01-08","2021-01-09","2021-01-10","2021-01-11","2021-01-12","2021-01-13","2021-01-14","2021-01-15","2021-01-16","2021-01-17","2021-01-18","2021-01-19","2021-01-20","2021-01-21","2021-01-22"]}],yAxis: [{type: 'value',scale: true,max: 37.5,min: 35.5,interval:0.1,boundaryGap: [10, 10]},{type: 'value',scale: true,max: 37.5,min: 35.5,interval:0.1,boundaryGap: [10, 10]}],series: [{name: '体温',type: 'bar',xAxisIndex: 1,yAxisIndex: 1,barWidth:20,itemStyle:{normal:{color:'#4c9d44'}},data: [36.4, 36.3, 36.2, 36.4, 36.1, 36.5, 36.4, 36.7, 36.5, 36.7,36.6,36.7,36.95,36.85,36.7,36.5,36.5,36.7,36.4,36.3,36.3,36.35,36.1,36.55,36.5,36.45]},{name: '体温',type: 'line',itemStyle:{normal:{color:'#e4393c',lineStyle:{color:'#e4393c'}}},data: [36.4, 36.3, 36.2, 36.4, 36.1, 36.5, 36.4, 36.7, 36.5, 36.7,36.6,36.7,36.95,36.85,36.7,36.5,36.5,36.7,36.4,36.3,36.3,36.35,36.1,36.55,36.5,36.45]}]};// 使用刚指定的配置项和数据显示图表。chartBarLine.setOption(option);},chartLine() {// 基于准备好的dom，初始化echarts实例var chartLine = echarts.init(document.getElementById('chartLine'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',axisPointer: {label: {backgroundColor: '#283b56',precision:0 //保留多少位}}},grid: {left: '100px',bottom: '100px',top: '10%'},xAxis: {max: 31,//约束的X轴最大值，可按需调整min: 0,interval:1,//type : 'category'//没有小数点，也没有分割线了，而且位置居中不在刻度点上了。},yAxis: {max: 37.5,min: 35.5,interval:0.1,type : 'value'},series: [{name: '体温',type: 'line',data: [[1,36.4], [2,36.3], [3,36.2],[4,36.4],[5,36.1],[6,36.5],[7,36.4],[8,36.7],[9,36.5],[10,36.7],[11,36.6],[12,36.7],[13,36.95],[14,36.85,],[15,36.7],[16,36.5],[17,36.5],[18,36.7],[19,36.4],[20,36.3],[21,36.3],[22,36.35],[23,36.1],[24,36.55],[25,36.5],[26,36.45]]}]};// 使用刚指定的配置项和数据显示图表。chartLine.setOption(option);}},mounted() {this.chartBarLine()this.chartLine()},})</script></body></html>体温表第三个版本
更新日志
1、Y轴增加基准线（36.6），方便对照。
2、X轴文字增加倾斜度，垂直显示。
3、使用面积折线图，变化更直观。
4、不再展示全部数据，仅截取一个周期内的数据，方便观察变化。
5、气泡显示周期内最高和最低体温。
效果
源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>体温记录</title><script src="jquery-3.1.1.min.js"></script><script src="vue.js"></script><script src="echarts.min.js"></script><style>#chartBarLine{width: 100%;height: 800px;}</style></head><body><div id="root"><div class="container"><div class="echarts"><!-- 折线柱状图 --><div id="chartBarLine"></div></div></div></div><script>new Vue({el: "#root",data() {return {}},methods: {chartBarLine() {// 基于准备好的dom，初始化echarts实例var chartBarLine = echarts.init(document.getElementById('chartBarLine'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'axis',axisPointer: {label: {backgroundColor: '#283b56'}}},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},dataZoom: {show: false,start: 0,end: 100},grid: {left: '100px',bottom: '100px',top: '10%'},xAxis: [{type: 'category',axisLabel: {interval: 0,rotate: 90},data: ["2021-01-14","2021-01-15","2021-01-16","2021-01-17","2021-01-18","2021-01-19","2021-01-20","2021-01-21","2021-01-22","2021-01-23","2021-01-24","2021-01-25","2021-01-26","2021-01-27","2021-01-28","2021-01-29","2021-01-30","2021-01-31","2021-02-01","2021-02-02","2021-02-03","2021-02-04","2021-02-05","2021-02-06","2021-02-07","2021-02-08","2021-02-09","2021-02-10","2021-02-11","2021-02-12","2021-02-13","2021-02-14","2021-02-15","2021-02-16","2021-02-17","2021-02-18"]}],yAxis: [{type: 'value',scale: true,max: 37.5,min: 35.5,interval:0.1,},{type: 'value',scale: true,max: 37.5,min: 35.5,interval:0.1,}],series: [{name: '体温',type: 'line',data: [36.7,36.4,36.3,36.3,36.35,36.1,36.55,36.5,36.45,36.25,36.45,36.2,36,36.05,36.3,36.1,36.3,36.1,36.3,36.4,36.6,36.5,36.55,36.8,36.6,36.8,36.8,36.85,36.6,36.7,36.7,36.98,36.85,36.7,36.45,36.35,36.45],areaStyle: {},markLine: {silent: true,lineStyle: {normal: {color: '#e4393c',// 设置线颜色type: "solid" // 实线，不写默认虚线}},data: [{yAxis: 36.6 //定义基准线的数值}],label: {normal: {formatter: ''}}},markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},}]};// 使用刚指定的配置项和数据显示图表。chartBarLine.setOption(option);},},mounted() {this.chartBarLine()},})</script></body></html>体温表终极版本
更新日志
1、外部引用文件使用官方cdn版本，一个HTML文件就可以看到效果了，使用更简单。
2、去掉背景颜色，选取区域色块显示经期更直观。
3、新增右上角的工具栏，可以看条目形式的记录，导出图片。
效果
源码
<!DOCTYPE html><html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><!-- Uncomment this line if you want to dataTool extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>--><!-- Uncomment this line if you want to use gl extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>--><!-- Uncomment this line if you want to echarts-stat extension<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>--><!-- Uncomment this line if you want to use map<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>--><!-- Uncomment these two lines if you want to use bmap extension<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>--><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option;option = {tooltip: {trigger: 'axis',axisPointer: {label: {backgroundColor: '#283b56'}}},toolbox: {show: true,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},dataZoom: {show: false,start: 0,end: 100},grid: {left: '100px',bottom: '100px',top: '10%'},xAxis: {type: 'category',boundaryGap: false,axisLabel: {interval: 0,rotate: 90},},yAxis: [{type: 'value',max: 37.5,min: 35.5,interval:0.1,},{type: 'value',max: 37.5,min: 35.5,interval:0.1,}],visualMap: {type: 'piecewise',show: false,dimension: 0,seriesIndex: 0,pieces: [{gt: 2,lt: 6,color: 'rgba(238, 22, 40, 0.8)'}, {gt: 34,lt: 38,color: 'rgba(238, 22, 40, 0.8)'}]},series: [{type: 'line',lineStyle: {color: '#5470C6',width: 5},markLine: {symbol: ['none', 'none'],label: {show: true},data: [{xAxis: 2},{xAxis: 6},{xAxis: 34},{xAxis: 38}]},areaStyle: {},data: [["2021-01-13","36.5"],["2021-01-14","36.7"],["2021-01-15","36.4"],["2021-01-16","36.3"],["2021-01-17","36.3"],["2021-01-18","36.35"],["2021-01-19","36.1"],["2021-01-20","36.55"],["2021-01-21","36.5"],["2021-01-22","36.45"],["2021-01-23","36.25"],["2021-01-24","36.45"],["2021-01-25","36.2"],["2021-01-26","36"],["2021-01-27","36.05"],["2021-01-28","36.3"],["2021-01-29","36.1"],["2021-01-30","36.3"],["2021-01-31","36.1"],["2021-02-01","36.3"],["2021-02-02","36.4"],["2021-02-03","36.6"],["2021-02-04","36.5"],["2021-02-05","36.55"],["2021-02-06","36.8"],["2021-02-07","36.6"],["2021-02-08","36.8"],["2021-02-09","36.85"],["2021-02-10","36.6"],["2021-02-11","36.7"],["2021-02-12","36.7"],["2021-02-13","36.98"],["2021-02-14","36.85"],["2021-02-15","36.7"],["2021-02-16","36.45"],["2021-02-17","36.35"],["2021-02-18","36.45"],["2021-02-19","36.49"],["2021-02-20","36.5"]],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},},{type: 'line',markLine: {silent: true,lineStyle: {normal: {color: '#e4393c',// 设置线颜色type: "solid" // 实线，不写默认虚线}},data: [{yAxis: 36.6 //定义基准线的数值}],label: {normal: {formatter: ''}}},}]};if (option && typeof option === 'object') {myChart.setOption(option);}</script></body></html>总结
推荐使用终极版本。另，为了保护隐私，体温数据为假数据。
关注女性健康，分享 echarts 绘制女性体温表源码相关推荐
- 分享112个ASP信息管理源码，总有一款适合您
分享112个ASP信息管理源码,总有一款适合您 112个ASP信息管理源码下载链接:https://pan.baidu.com/s/1kWkzvIrb9EmzAHNibqnHWw?pwd=2bt3 ...
- 分享66个ASP电子商务源码，总有一款适合您
分享66个ASP电子商务源码,总有一款适合您 66个ASP电子商务源码下载链接:https://pan.baidu.com/s/1O_QlpdQfudAvn9ioBlOJRQ?pwd=3gye 提取 ...
- C++ Opengl 绘制图像字符源码
C++ Opengl 绘制图像字符源码 项目开发环境 项目功能 项目演示 项目源码传送门 项目开发环境 开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1, ...
- C++ Opengl 绘制纹理字符源码
C++ Opengl 绘制纹理字符源码 项目开发环境 项目功能 项目演示 项目源码传送门 项目开发环境 开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1, ...
- 计算机毕业设计ssm基于SSM的美妆分享网站vf952系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于SSM的美妆分享网站vf952系统+程序+源码+lw+远程部署 计算机毕业设计ssm基于SSM的美妆分享网站vf952系统+程序+源码+lw+远程部署 本源码技术栈: 项目架构 ...
- 分享88个ASP.NET源码，总有一款适合您
分享88个ASP.NET源码,总有一款适合您 88个ASP.NET源码下载链接:https://pan.baidu.com/s/1jf4rcro_f5rncUd6E-IxrQ?pwd=ou78 提取 ...
- 计算机毕业设计ssm儿童成长记录与分享系统cc35g系统+程序+源码+lw+远程部署
计算机毕业设计ssm儿童成长记录与分享系统cc35g系统+程序+源码+lw+远程部署 计算机毕业设计ssm儿童成长记录与分享系统cc35g系统+程序+源码+lw+远程部署 本源码技术栈: 项目架构:B ...
- 【朝花夕拾】Android自定义View之（一）手把手教你看懂View绘制流程——向源码要答案
前言 原文:Android自定义View之(一)手把手教你看懂View绘制流程--向源码要答案 View作为整个app的颜值担当,在Android体系中占有重要的地位.深入理解Android View ...
- 分享99个ASP电子商务源码，总有一款适合您
分享99个ASP电子商务源码,总有一款适合您 99个ASP电子商务源码下载链接:https://pan.baidu.com/s/1cj5sd3JmxgHHYz5uerwFMw?pwd=skc2 提取 ...
最新文章
- 现有模型还「不懂」自然语言：20多位研究者谈NLP四大开放性问题
- keybd_event 被 SendInput 替代
- JAVA学习笔记——常量与变量
- linux-常用指令3
- 端口和进程的关系（详解）
- [NLP] TextCNN模型原理和实现
- Linux防火墙Firewall和Iptables的使用
- python创意小作品-全国青少年创意编程与智能设计大赛Python创意编程比赛
- 释放空间后将指针置空
- Java进制转换工具类
- PSP战神 斯巴达勇士 游戏ISO文件和完美通关存档和金手指
- 微软 rms服务器端,RMS 客户端部署说明 - Azure 信息保护 | Microsoft Docs
- Brainfuck语言入门
- 哪个求职App最容易找到好工作？2019在线求职招聘市场研究报告
- C# 处理PPT水印（三）—— 在PPT中添加多行（平铺）文本水印效果
- R6034错误的解决（转）
- 关于vue中采用scoped时，组件的中css优先级
- HTTP之URL详解
- 软件测试学习中的一些有用网站
- 认识emu8086仿真内存