80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
|
//折线图
|
||
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
var chartContainer = document.getElementById('chart-container');
|
||
|
var myChart = echarts.init(chartContainer);
|
||
|
|
||
|
var timestamps = [];
|
||
|
var pressure = [];
|
||
|
|
||
|
function fetchAndUpdateData() {
|
||
|
fetch('http://127.0.0.1:8000/get_sensor_data')
|
||
|
.then(response => response.json())
|
||
|
.then(data => {
|
||
|
timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
|
||
|
pressure = data.pressure.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: 'pressure',
|
||
|
type: 'line',
|
||
|
data: data.pressure
|
||
|
|
||
|
}
|
||
|
]
|
||
|
};
|
||
|
|
||
|
myChart.setOption(option);
|
||
|
});
|
||
|
fetch('http://127.0.0.1:8000/get_latest_sensor_data')
|
||
|
.then(response => response.json())
|
||
|
.then(data => {
|
||
|
document.getElementById('pressure').textContent = `当前压力: ${data.pressure}Pa`;
|
||
|
});
|
||
|
}
|
||
|
// 每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('pressure').textContent = `当前压力: ${data.pressure}Pa`;
|
||
|
}
|
||
|
// 每5秒刷新一次数据
|
||
|
fetch('http://127.0.0.1:8000/get_latest_sensor_data')
|
||
|
.then(response => response.json())
|
||
|
.then(data => {
|
||
|
fetchLatestSensorData(); // 初始加载数据
|
||
|
document.addEventListener('DOMContentLoaded', fetchLatestSensorData);})
|