135 lines
4.9 KiB
JavaScript
135 lines
4.9 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);})
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var chartContainer = document.getElementById('chart-container');
|
|
var myChart = echarts.init(chartContainer);
|
|
|
|
var timestamps = [], pressure = [];
|
|
|
|
function fetchInitialData() {
|
|
fetch('http://111.230.197.156:8000/get_sensor_data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
var maxDataPoints = window.innerWidth <= 768 ? 50 : 200; // 根据屏幕宽度决定数据量
|
|
timestamps = data.timestamps.slice(-maxDataPoints);
|
|
pressure = data.pressure.slice(-maxDataPoints);
|
|
|
|
updateChart();
|
|
});
|
|
}
|
|
|
|
function fetchLatestData() {
|
|
fetch('http://111.230.197.156:8000/get_latest_sensor_data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// 如果已有200个数据则移除最旧的一条
|
|
if (timestamps.length >= 50) {
|
|
timestamps.shift();
|
|
pressure.shift();
|
|
}
|
|
|
|
// 添加新的数据
|
|
timestamps.push(data.timestamps);
|
|
pressure.push(data.pressure);
|
|
|
|
updateChart();
|
|
});
|
|
}
|
|
|
|
function updateChart() {
|
|
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: '压力', type: 'line', data: pressure }]
|
|
};
|
|
myChart.setOption(option);
|
|
document.getElementById('pressure').textContent = `当前压力: ${pressure[pressure.length - 1]}Pa`;
|
|
}
|
|
|
|
// 初始化时获取所有数据
|
|
fetchInitialData();
|
|
|
|
// 每5秒获取最新的数据
|
|
setInterval(fetchLatestData, 1000);
|
|
}); |