// //折线图 // 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); });