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

    var timestamps = [];
    var temperatures = [];

    function fetchAndUpdateData() {
        fetch('http://111.230.197.156:8000/get_sensor_data')
            .then(response => response.json())
            .then(data => {
                timestamps = data.timestamps.slice(-200); // 只保留最新的200个数据
                temperatures = data.temperatures.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: temperatures
                        }
                    ]
                };

                myChart.setOption(option);

                // 更新最新的温度
                document.getElementById('temperature').textContent = `当前温度: ${temperatures.slice(-1)}℃`;
            });
    }

    // 每5秒刷新一次数据
    setInterval(fetchAndUpdateData, 1000);
    fetchAndUpdateData(); 
});