关注女性健康，分享 echarts 绘制女性体温表源码

最新推荐文章于 2025-02-12 14:30:00 发布

Irene1991

最新推荐文章于 2025-02-12 14:30:00 发布

阅读量2.4k

点赞数 2

分类专栏：程序人生文章标签： echarts vue.js

原创文章如需转载请注明地址。

本文链接：https://blog.youkuaiyun.com/Irene1991/article/details/112979381

版权

Echarts 体温记录数据可视化基础体温图表绘制

关键词由优快云通过智能技术生成

前言

最近每天早起睁眼的第一件事就是测舌下体温（水银体温计），要想测得准，测温时间要固定，作息也要规律。

基础体温的动态变化一定程度上可以反映女性黄体功能是否正常。

医生给的纸质体温表被我画错了一格，强迫症的我就想重画，可惜没有第二张。作为现在还是程序媛的我，突然就来了灵感，那就用 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",