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

最新推荐文章于 2024-01-25 00:00:56 发布

Irene1991

最新推荐文章于 2024-01-25 00:00:56 发布

阅读量2.3k

点赞数 2

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

本文链接：https://blog.csdn.net/irene1991/article/details/112979381

版权

程序人生专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

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

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

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