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

//     var timestamps = [];
//     var co2 = [];

// function fetchAndUpdateData() {
//     fetch('http://111.230.197.156:8000/get_sensor_data')
//         .then(response => response.json())
//         .then(data => {
//             timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
//             co2 = data.co2.slice(-200); // 只保留最新的200个数据
//             var option = {
//                 title: {
//                     text: 'co2数据',
//                     textStyle: {
//                         color: 'white'
//                     }
//                 },
//                 tooltip: {
//                     trigger: 'axis'
//                 },
//                 legend: {
//                     data: ['co2'],
//                     textStyle: {
//                         color: 'white'
//                     }
//                 },
//                 xAxis: {
//                     type: 'category',
//                     data: timestamps,
//                     axisLabel: {
//                         color: 'white'
//                     }
//                 },
//                 yAxis: {
//                     type: 'value',
//                     axisLabel: {
//                         color: 'white'
//                     }
//                 },
//                 series: [
//                     {
//                         name: 'co2',
//                         type: 'line',
//                         data: co2
                        
//                     }
//                 ]
//             };
//             myChart.setOption(option);
//         });
//         fetch('http://111.230.197.156:8000/get_latest_sensor_data')
//             .then(response => response.json())
//             .then(data => {
//                 document.getElementById('co2').textContent = `当前co2: ${co2.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('co2').textContent = `当前co2: ${co2.slice(-1)}%`;
//     }
//     // 每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 = [], co2 = [];

    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);
                    co2 = data.co2.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();
                    co2.shift();
                }

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

                updateChart();
            });
    }

    function updateChart() {
        var option = {
            title: { text: 'CO2数据', textStyle: { color: 'white' } },
            tooltip: { trigger: 'axis' },
            legend: { data: ['CO2'], textStyle: { color: 'white' } },
            xAxis: { type: 'category', data: timestamps, axisLabel: { color: 'white' } },
            yAxis: { type: 'value', axisLabel: { color: 'white' } },
            series: [{ name: 'CO2', type: 'line', data: co2 }]
        };
        myChart.setOption(option);
        document.getElementById('co2').textContent = `当前CO2: ${co2[co2.length - 1]}%`;
    }

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

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