前言

關注女性健康，分享 echarts 繪制女性體溫表原始碼，

最近每天早起睜眼的第一件事就是測舌下體溫（水銀體溫計），要想測得準，測溫時間要固定，作息也要規律，

靜息體溫的動態變化一定程度上可以反映女性黃體功能是否正常，

醫生給的紙質體溫表被我畫錯了一格，強迫癥的我就想重畫，可惜沒有第二張，作為現在還是程式媛的我，突然就來了靈感，那就用 echarts 畫一張電子版的吧，

哈哈，如果我是男生，畫給女朋友，那就是另一個版本的浪漫故事了，可惜我老公是后端開發，不會前端，

正文來了

先看效果

從程式員的角度看，下面這種形式的呈現是比較完美的，

但是，醫生一看就說不行，

于是，有了第二版本，

這個版本就很接近醫生提供的那個紙質表格了，對，重點就是表格，

橫縱最好是方格或接近方格，

x軸幾經測驗，發現放自然數最合適，表示是第幾天，

要表示一個完整的月經周期，所以是30天左右，當然，如果能保證方格，可以連續繪制更好，

原始碼

<!DOCTYPE html>

<head>

<style>

#chartBarLine{

width: 100%;

height: 800px;

}

#chartLine{

width: 100%;

height: 800px;

}

</style>

</head>

<body>

</div>

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

}

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: [{

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]

{

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: [{

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>

總結

為了兼顧可讀性，原始碼中保留了兩個版本的圖表，因為資料都是手寫的，很可能出錯，所以兩個圖表，也方便對照檢查，

外部參考檔案需要自行下載，

另，為了保護隱私，體溫資料為假資料，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/251794.html

標籤：其他

上一篇：CSS的屬性選擇器

下一篇：密碼顯示與隱藏效果 html+css+js