前言
關注女性健康，分享 echarts 繪製女性體溫表源碼。
最近每天早起睜眼的第一件事就是測舌下體溫（水銀體溫計），要想測得準，測溫時間要固定，作息也要規律。
靜息體溫的動態變化一定程度上可以反映女性黃體功能是否正常。
醫生給的紙質體溫表被我畫錯了一格，強迫症的我就想重畫，可惜沒有第二張。作爲現在還是程序媛的我，突然就來了靈感，那就用 echarts 畫一張電子版的吧。
哈哈，如果我是男生，畫給女朋友，那就是另一個版本的浪漫故事了，可惜我老公是後端開發，不會前端。
正文來了
先看效果
從程序員的角度看，下面這種形式的呈現是比較完美的。
但是，醫生一看就說不行。
於是，有了第二版本。
這個版本就很接近醫生提供的那個紙質表格了。對，重點就是表格。
橫縱最好是方格或接近方格。
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: '10%',
bottom: '26%',
top: '30%'
},
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 //保留多少位
}
}
},
xAxis: {
max: 31,
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>
總結
爲了兼顧可讀性，源碼中保留了兩個版本的圖表。因爲數據都是手寫的，很可能出錯，所以兩個圖表，也方便對照檢查。
外部引用文件需要自行下載。
另，爲了保護隱私，體溫數據爲假數據。