80 lines
2.7 KiB
JavaScript
80 lines
2.7 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://111.230.197.156: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: timestamps,
|
|
axisLabel: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: 'white'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'pressure',
|
|
type: 'line',
|
|
data: pressure
|
|
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
});
|
|
fetch('http://111.230.197.156:8000/get_latest_sensor_data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`;
|
|
});
|
|
}
|
|
// 每5秒刷新一次数据
|
|
setInterval(fetchAndUpdateData, 1000);
|
|
fetchAndUpdateData(); // 初始加载数据
|
|
});
|
|
|
|
|
|
//获取当前的湿度
|
|
async function fetchLatestSensorData() {
|
|
const response = await fetch('http://111.230.197.156:8000/get_latest_sensor_data');
|
|
const data = await response.json();
|
|
document.getElementById('pressure').textContent = `当前压力: ${pressure.slice(-1)}Pa`;
|
|
}
|
|
// 每5秒刷新一次数据
|
|
fetch('http://111.230.197.156:8000/get_latest_sensor_data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
fetchLatestSensorData(); // 初始加载数据
|
|
document.addEventListener('DOMContentLoaded', fetchLatestSensorData);}) |