RQteafactory-NodeJS/static/js/sensor-2.js

// //折线图
// document.addEventListener('DOMContentLoaded', function () {
//     var chartContainer = document.getElementById('chart-container');
//     var myChart = echarts.init(chartContainer);

//     var timestamps = [];
//     var humidities = [];

//     function fetchAndUpdateData() {
//         fetchLatestSensorData()
//         fetch('http://111.230.197.156:8000/get_sensor_data')
//             .then(response => response.json())
//             .then(data => {
//                 timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
//                 humidity = data.humidities.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: '湿度',
//                             type: 'line',
//                             data: humidity

//                         }
//                     ]
//                 };

//                 myChart.setOption(option);
//             });
//         fetch('http://111.230.197.156:8000/get_latest_sensor_data')
//             .then(response => response.json())
//             .then(data => {
//                 document.getElementById('humidity').textContent = `当前湿度: ${humidity.slice(-1)}%`;
//             });
//    }

//    // 每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('humidity').textContent = `当前湿度: ${humidity.slice(-1)}%`;
//     }
//     // 每5秒刷新一次数据
document.addEventListener('DOMContentLoaded', function () {
    var chartContainer = document.getElementById('chart-container');
    var myChart = echarts.init(chartContainer);

    var timestamps = [], humidities = [];

    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; 
                console.log(maxDataPoints);// 根据屏幕宽度决定数据量
                    timestamps = data.timestamps.slice(-maxDataPoints);
                    humidities = data.humidities.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();
                    humidities.shift();
                }

                // 添加新的数据
                timestamps.push(data.timestamps);
                humidities.push(data.humidities);

                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: humidities }]
        };
        myChart.setOption(option);
        document.getElementById('humidity').textContent = `当前湿度: ${humidities[humidities.length - 1]}%`;
    }

    // 初始化时获取所有数据
    fetchInitialData();

    // 每5秒获取最新的数据
    setInterval(fetchLatestData, 1000);
});