<?php
require_once "inc/functions.inc.php";
$_REQUEST['t_start']=$_REQUEST['t_start']?$_REQUEST['t_start']:'2023-08-15';
$_REQUEST['t_end']=$_REQUEST['t_end']?$_REQUEST['t_end']:date('Y-m-d');
$_REQUEST['mst']=$_REQUEST['mst']?$_REQUEST['mst']:'2023-08'; 
$_REQUEST['med']=$_REQUEST['med']?$_REQUEST['med']:date('Y-m');
$_REQUEST['dm']=$_REQUEST['dm']?$_REQUEST['dm']:'Daily';

$_REQUEST['district']=$_REQUEST['district']?$_REQUEST['district']:'合计';
$subTitle=($_REQUEST['district']=='合计')?'宁波地区':$_REQUEST['district'];
$title="新房V.S二手房每日成交量({$subTitle})";
$title1="新房每日成交量({$subTitle})";
$title2="二手房每日成交量({$subTitle})";


$urlAppend  = "t=newTBD";
if($_REQUEST['dm']=='Daily') $urlAppend.="&t_start={$_REQUEST['t_start']}&t_end={$_REQUEST['t_end']}";
if($_REQUEST['dm']=='Monthly') $urlAppend.="&t_start={$_REQUEST['mst']}&t_end={$_REQUEST['med']}";
$urlAppend .= "&district={$_REQUEST['district']}";
$urlAppend .= "&dm={$_REQUEST['dm']}";
$url = 'https://echart.doorcome.cn/inc/ajax.inc.php?'.$urlAppend;

$urlAppend2  = "t=esfTBD";
if($_REQUEST['dm']=='Daily') $urlAppend2.="&t_start={$_REQUEST['t_start']}&t_end={$_REQUEST['t_end']}";
if($_REQUEST['dm']=='Monthly') $urlAppend2.="&t_start={$_REQUEST['mst']}&t_end={$_REQUEST['med']}";
$urlAppend2 .= "&district={$_REQUEST['district']}";
$urlAppend2 .= "&dm={$_REQUEST['dm']}";
$url2 = 'https://echart.doorcome.cn/inc/ajax.inc.php?'.$urlAppend2;
include_once "html/head.php";
?>

<form name="main" id="main" method="get"> <div style="width:100%;text-align:center">
区域：
<?php districtList(); ?>&nbsp;&nbsp;
Daily/Monthly:  
    <?php byDM('dm','dblock','mblock'); ?> &nbsp;&nbsp;
<span style="display:inline;" id='dblock'>
开始时间: <input type='date' name='t_start' id='t_start' width='30px'  >
结束时间: <input type='date' name='t_end' id='t_end' width='30px'  >
</span>
<span style="display:None;" id='mblock'>
    开始月份: <input type="month" name='mst' id='mst'  >&nbsp;&nbsp;
    结束月份: <input type="month" name='med' id='med'  > 
    </span>
<input type='submit' value="给我查!">
<div >&nbsp;</div>
<script>
	$("#district").val('<?=$_REQUEST['district']?>');
	$("#t_start").val('<?=$_REQUEST['t_start']?>');
	$("#t_end").val('<?=$_REQUEST['t_end']?>');
	$("#mst").val('<?=$_REQUEST['mst']?>');
    $("#med").val('<?=$_REQUEST['med']?>');
    $("#dm").val('<?=$_REQUEST['dm']?>');
	var vdm= $('#dm').val();
    if(vdm=='Monthly'){
        $('#dblock').css('display','none');
        $('#mblock').css('display','inline');
    }
    if(vdm=='Daily'){
        $('#dblock').css('display','inline');
        $('#mdblock').css('display','none');
    }
</script>
</div> </form>
<div >&nbsp;</div>
<div id="container" style="margin:0 auto;height: 400px;width: 1000px"></div>
<div >&nbsp;</div>
<div id="container2" style="margin:0 auto;height: 400px;width: 1000px"></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 />
* 更新时间： 每天下午5:30</span></div>
<script type="text/javascript">
   	var dataSel1=['td','area'];
	var dataSel2=['td','qty'];
	var data1;
	var data2;
	var data3;
	var legend =['成交面积','成交套数','可售套数'];
	var headtxt = '<?=$title1?>';
	$.ajax(
		{
			type:'GET',
			url:'<?=$url?>',
			dataType:'json',
			success:function(data){
				console.log(data)
				data1 = getRows(data.datas,dataSel1); //成交面积
				data2 = getRows(data.datas,dataSel2); //成交套数
				data3 = getRows(data.dataExt,dataSel2); //存量套数
				//console.log(data1);
				//console.log(data2);
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom,'dark');
				var app = {};
				option = null;

				option = {
					title: {
						//text: legend[0]+' V.S '+legend[2],
						text: headtxt,
						//subtext: subtxt,
						textAlign:'center',
						left:'50%'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:legend,
						right:'20'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						//type: 'category',
						type: 'time',
						boundaryGap: false
					},
					yAxis: [{
						type: 'value',
						name:legend[2], //图列
						show:true
					},
					{
						type: 'value',
						name:legend[1], //图列
						show:true,
						boundaryGap:false,
						splitLine:{
							show:false, //Y2 坐标刻度横线
						},
					}
					],
					dataZoom: [{
						type: 'inside',   //or slider
						start: 0,
						end: 100
					}, {
						start: 0,
						end: 100,
						handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '80%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}],
					series: [
						/*
						{
							name:legend[0],
							type:'line',
							yAxisIndex:0,
							symbol:'none',
							data:data1,
							itemStyle:{normal:{label:{show:true}}}, //显示数字
						},*/
						{
							name:legend[2],
							type:'line',
							yAxisIndex:0,
							symbol:'none',
							data:data3,
							label:{show:true,position:'top',},//显示数字
						},
						{
							name:legend[1],
							type:'bar',
							yAxisIndex:1,
							symbol:'none',
							data:data2,
							label:{show:true},//显示数字
						},
						
				]
				};

				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}
		}
	)
//二手房
	var dataSel3=['td','area'];
	var dataSel4=['td','qty'];
	var data3;
	var data4;
	var legend2 =['成交面积','成交套数'];
	var headtxt2 = '<?=$title2?>';
	$.ajax(
		{
			type:'GET',
			url:'<?=$url2?>',
			dataType:'json',
			success:function(data2){
				console.log(data2)
				data3 = getRows(data2.dataTrade,dataSel3);
				data4 = getRows(data2.dataTrade,dataSel4);
				//console.log(data3);
				//console.log(data4);
				var dom = document.getElementById("container2");
				var myChart = echarts.init(dom,'dark');
				var app = {};
				option = null;

				option = {
					title: {
						//text: legend[0]+' V.S '+legend[2],
						text: headtxt2,
						//subtext: subtxt,
						textAlign:'center',
						left:'50%'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data:legend2,
						right:'20'
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						//type: 'category',
						type: 'time',
						boundaryGap: false
					},
					yAxis: [{
						type: 'value',
						name:legend2[0], //图列
						show:true
					},
					{
						type: 'value',
						name:legend2[1], //图列
						show:true,
						boundaryGap:false,
						splitLine:{
							show:false, //Y2 坐标刻度横线
						},
					}
					],
					dataZoom: [{
						type: 'inside',   //or slider
						start: 0,
						end: 100
					}, {
						start: 0,
						end: 100,
						handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '80%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}],
					series: [
						{
							name:legend2[0],
							type:'line',
							yAxisIndex:0,
							symbol:'none',
							data:data3,
							label:{show:true}, //显示数字
						},
						{
							name:legend2[1],
							type:'bar',
							yAxisIndex:1,
							symbol:'none',
							data:data4,
							label:{show:true}, //显示数字
						}
				]
				};

				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			}
		}
	)
</script>
<?php include_once "html/footer.php"; ?>

