<?php
include_once "../inc/functions.inc.php";
$_REQUEST['t_start']=$_REQUEST['t_start']?$_REQUEST['t_start']:'2023-06-20';
$_REQUEST['t_end']=$_REQUEST['t_end']?$_REQUEST['t_end']:date('Y-m-d');
$title="房地产挂牌数量趋势(宁波)";
include_once "../html/head.php";
?>

<form name="main" id="main" method="get"> <div style="width:100%;text-align:center">
开始时间: <input type='date' name='t_start' id='t_start' width='30px' value='<?=$_REQUEST['t_start']?>' >
结束时间: <input type='date' name='t_end' id='t_end' width='30px' value='<?=$_REQUEST['t_end']?>' >
 &nbsp;&nbsp;
 <button id="submitBtn" class="btn-submit"><span>查询数据</span></button>
</div> </form>
<div >&nbsp;</div>

<div id="container" style="width: 1000px; height:400px; margin: 0 auto 20px;">
    <div class="loading-overlay" id="loadingOverlay">
        <div class="spinner"></div>
        <p style="font-size:18px; color:#2c3e50;">正在加载数据，请稍候...</p>
    </div>
</div>
<div >&nbsp;</div>
<div style="margin:0 auto;width: 1000px ">
<span style="color:grey">
* 数据来源：<a href='https://www.cnnbfdc.com/' target='_blank'>宁波市房产交易服务信息网</a><br />
* 更新时间：每天上午9:00</span></div>

<script>
    $(document).ready(function() {
        loadChartData();
        $('#submitBtn').click(function(e) {
            e.preventDefault();
            loadChartData();
        });
    });

    function loadChartData() {
        $('#loadingOverlay').addClass('active');
        var t_start = $('#t_start').val();
        var t_end = $('#t_end').val();
        var url = "../inc/ajax.inc.php?t=estateData&t_start="+t_start+"&t_end="+t_end;

        fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(resp) {
                var data = resp.data;
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom, 'dark');
                var option = {
                    title: { text: '<?=$title?>', textAlign: 'center', left: '50%' },
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['挂牌数(套)'], right: '20' },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    toolbox: { feature: { saveAsImage: {} } },
                    xAxis: { type: 'time', boundaryGap: false },
                    yAxis: { type: 'value', name: '挂牌数(套)', show: true, scale: true },
                    dataZoom: [
                        { type: 'inside', start: 0, end: 100 },
                        { start: 0, end: 100, handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }
                    ],
                    series: [{
                        name: '挂牌数(套)', type: 'line', symbol: 'none',
                        data: data,
                        itemStyle: { normal: { label: { show: true } } }
                    }]
                };
                myChart.setOption(option, true);
            })
            .catch(function(error) { console.error('数据加载失败:', error); })
            .finally(function() {
                $('#loadingOverlay').removeClass('active');
            });
    }
</script>
<?php include_once "../html/footer.php"; ?>
