simon/echart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 前端库整理与图表标准化

Browse Source 
库文件整理:
- 所有JS/CSS/字体库统一到lib/js/、lib/css/、lib/webfonts/
- 按名称-版本格式重命名(jquery-3.6.0.min.js等)
- 删除约80个重复/废弃的库文件副本
- 更新17个文件中的引用路径

图表模式标准化:
- moneyflow/realestate/estate3个页面从$.ajax/PHP注入转为fetch+loading overlay模式
- 新增moneyflowData/estateData两个AJAX端点
- chartmoneyflow.js、estate.js移至deprecated

README.md更新为完整功能介绍

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
simon
2026-05-26 14:34:28 +08:00
co-authored by Claude Code
parent 7e57cae242
commit f3f9d19da7
202 changed files with 580 additions and 502999 deletions
Download Patch File Download Diff File Expand all files Collapse all files
charts/estateNewTradeDaily.php
+113 -274
View File
@@ -2,37 +2,20 @@
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['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:
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' >
@@ -40,273 +23,129 @@ Daily/Monthly:
</span>
<span style="display:None;" id='mblock'>
开始月份: <input type="month" name='mst' id='mst' >&nbsp;&nbsp;
结束月份: <input type="month" name='med' id='med' >
结束月份: <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>
&nbsp;&nbsp;
<button id="submitBtn" class="btn-submit"><span>查询数据</span></button>
</div> </form>
<div >&nbsp;</div>
<div id="container" style="margin:0 auto;height: 400px;width: 1000px"></div>
<div id="container" style="width: 1000px; height:400px; margin: 0 auto 20px;">
<div class="loading-overlay" id="loadingOverlay1">
<div class="spinner"></div>
<p style="font-size:18px; color:#2c3e50;">正在加载数据，请稍候...</p>
</div>
</div>
<div >&nbsp;</div>
<div id="container2" style="margin:0 auto;height: 400px;width: 1000px"></div>
<div id="container2" style="width: 1000px; height:400px; margin: 0 auto 20px;">
<div class="loading-overlay" id="loadingOverlay2">
<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 />
* 更新时间： 每天下午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.data.datas,dataSel1); //成交面积
data2 = getRows(data.data.datas,dataSel2); //成交套数
data3 = getRows(data.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},//显示数字
},
]
};
<script>
var dataSel1 = ['td','area'];
var dataSel2 = ['td','qty'];
var legend = ['成交面积','成交套数','可售套数'];
var legend2 = ['成交面积','成交套数'];
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.data.dataTrade,dataSel3);
data4 = getRows(data2.data.dataTrade,dataSel4);
//console.log(data3);
//console.log(data4);
var dom = document.getElementById("container2");
var myChart = echarts.init(dom,'dark');
var app = {};
option = null;
$(document).ready(function() {
$("#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'); $('#mblock').css('display','none'); }
loadChartData();
$('#submitBtn').click(function(e) { e.preventDefault(); loadChartData(); });
});
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}, //显示数字
}
]
};
function loadChartData() {
$('#loadingOverlay1').addClass('active');
$('#loadingOverlay2').addClass('active');
var district = $('#district').val();
var dm = $('#dm').val();
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
}
)
var url1 = "../inc/ajax.inc.php?t=newTBD&district="+district+"&dm="+dm;
var url2 = "../inc/ajax.inc.php?t=esfTBD&district="+district+"&dm="+dm;
if(dm=='Daily') {
url1 += "&t_start="+$('#t_start').val()+"&t_end="+$('#t_end').val();
url2 += "&t_start="+$('#t_start').val()+"&t_end="+$('#t_end').val();
}
if(dm=='Monthly') {
url1 += "&t_start="+$('#mst').val()+"&t_end="+$('#med').val();
url2 += "&t_start="+$('#mst').val()+"&t_end="+$('#med').val();
}
Promise.all([fetch(url1), fetch(url2)])
.then(function(responses) { return Promise.all(responses.map(function(r) { return r.json(); })); })
.then(function(results) {
// Chart 1: 新房
var d1 = results[0].data;
var data1 = getRows(d1.datas, dataSel1);
var data2 = getRows(d1.datas, dataSel2);
var data3 = getRows(d1.dataExt, dataSel2);
var dom1 = document.getElementById("container");
var chart1 = echarts.init(dom1, 'dark');
chart1.setOption({
title: { text: '<?=$title1?>', 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: 'time', boundaryGap: false },
yAxis: [
{ type: 'value', name: legend[2], show: true },
{ type: 'value', name: legend[1], show: true, boundaryGap: false, splitLine: { show: false } }
],
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: 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 } }
]
}, true);
$('#loadingOverlay1').removeClass('active');
// Chart 2: 二手房
var d2 = results[1].data;
var data4 = getRows(d2.dataTrade, dataSel1);
var data5 = getRows(d2.dataTrade, dataSel2);
var dom2 = document.getElementById("container2");
var chart2 = echarts.init(dom2, 'dark');
chart2.setOption({
title: { text: '<?=$title2?>', 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: 'time', boundaryGap: false },
yAxis: [
{ type: 'value', name: legend2[0], show: true },
{ type: 'value', name: legend2[1], show: true, boundaryGap: false, splitLine: { show: false } }
],
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: legend2[0], type: 'line', yAxisIndex: 0, symbol: 'none', data: data4, itemStyle: { normal: { label: { show: true } } } },
{ name: legend2[1], type: 'bar', yAxisIndex: 1, symbol: 'none', data: data5, itemStyle: { normal: { label: { show: true } } } }
]
}, true);
$('#loadingOverlay2').removeClass('active');
})
.catch(function(error) { console.error('数据加载失败:', error); $('#loadingOverlay1').removeClass('active'); $('#loadingOverlay2').removeClass('active'); });
}
</script>
<?php include_once "../html/footer.php"; ?>