83 lines
2.8 KiB
JavaScript
83 lines
2.8 KiB
JavaScript
|
//折线图
|
||
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
var chartContainer = document.getElementById('chart-container');
|
||
|
var myChart = echarts.init(chartContainer);
|
||
|
|
||
|
var timestamps = [];
|
||
|
var humidities = [];
|
||
|
|
||
|
function fetchAndUpdateData() {
|
||
|
fetch('http://127.0.0.1:8000/get_sensor_data')
|
||
|
.then(response => response.json())
|
||
|
.then(data => {
|
||
|
timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
|
||
|
temperatures = data.humidities.slice(-200); // 只保留最新的200个数据
|
||
|
|
||
|
var option = {
|
||
|
title: {
|
||
|
text: '湿度数据',
|
||
|
textStyle: {
|
||
|
color: 'white'
|
||
|
}
|
||
|
},
|
||
|
tooltip: {
|
||
|
trigger: 'axis'
|
||
|
},
|
||
|
legend: {
|
||
|
data: ['湿度'],
|
||
|
textStyle: {
|
||
|
color: 'white'
|
||
|
}
|
||
|
},
|
||
|
xAxis: {
|
||
|
type: 'category',
|
||
|
data: data.timestamps,
|
||
|
axisLabel: {
|
||
|
color: 'white'
|
||
|
}
|
||
|
},
|
||
|
yAxis: {
|
||
|
type: 'value',
|
||
|
axisLabel: {
|
||
|
color: 'white'
|
||
|
}
|
||
|
},
|
||
|
series: [
|
||
|
{
|
||
|
name: '湿度',
|
||
|
type: 'line',
|
||
|
data: data.humidities
|
||
|
|
||
|
}
|
||
|
]
|
||
|
};
|
||
|
|
||
|
myChart.setOption(option);
|
||
|
});
|
||
|
fetch('http://127.0.0.1:8000/get_latest_sensor_data')
|
||
|
.then(response => response.json())
|
||
|
.then(data => {
|
||
|
document.getElementById('humidity').textContent = `当前湿度: ${data.humidity}°C`;
|
||
|
});
|
||
|
}
|
||
|
|
||
|
// 每5秒刷新一次数据
|
||
|
setInterval(fetchAndUpdateData, 1000);
|
||
|
fetchAndUpdateData(); // 初始加载数据
|
||
|
});
|
||
|
|
||
|
|
||
|
|
||
|
//获取当前的湿度
|
||
|
async function fetchLatestSensorData() {
|
||
|
const response = await fetch('http://127.0.0.1:8000/get_latest_sensor_data');
|
||
|
const data = await response.json();
|
||
|
document.getElementById('humidity').textContent = `当前湿度: ${data.humidity}%`;
|
||
|
}
|
||
|
// 每5秒刷新一次数据
|
||
|
fetch('http://127.0.0.1:8000/get_latest_sensor_data')
|
||
|
.then(response => response.json())
|
||
|
.then(data => {
|
||
|
fetchLatestSensorData(); // 初始加载数据
|
||
|
document.addEventListener('DOMContentLoaded', fetchLatestSensorData);})
|