refactor: 前端库整理与图表标准化
库文件整理: - 所有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:
Claude Code
+61
-126
@@ -5,147 +5,82 @@ $_REQUEST['t_end']=$_REQUEST['t_end']?$_REQUEST['t_end']:date('Y-m-d');
|
||||
$_REQUEST['district']=$_REQUEST['district']?$_REQUEST['district']:'合计';
|
||||
$subTitle=($_REQUEST['district']=='合计')?'宁波地区':$_REQUEST['district'];
|
||||
$title="二手房每日新增挂牌量({$subTitle})";
|
||||
|
||||
|
||||
$urlAppend = "t=esfListDaily&t_start={$_REQUEST['t_start']}&t_end={$_REQUEST['t_end']}";
|
||||
$urlAppend .= "&district={$_REQUEST['district']}";
|
||||
$urlAppend .= "&dm=Daily";
|
||||
$url = 'https://echart.doorcome.cn/inc/ajax.inc.php?'.$urlAppend;
|
||||
include_once "../html/head.php";
|
||||
?>
|
||||
|
||||
<form name="main" id="main" method="get"> <div style="width:100%;text-align:center">
|
||||
区域：
|
||||
<?php districtList(); ?>
|
||||
<?php districtList(); ?>
|
||||
开始时间: <input type='date' name='t_start' id='t_start' width='30px' >
|
||||
结束时间: <input type='date' name='t_end' id='t_end' width='30px' >
|
||||
<input type='submit' value="给我查!">
|
||||
<div > </div>
|
||||
<script>
|
||||
$("#district").val('<?=$_REQUEST['district']?>');
|
||||
$("#t_start").val('<?=$_REQUEST['t_start']?>');
|
||||
$("#t_end").val('<?=$_REQUEST['t_end']?>');
|
||||
</script>
|
||||
|
||||
<button id="submitBtn" class="btn-submit"><span>查询数据</span></button>
|
||||
</div> </form>
|
||||
<div > </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="loadingOverlay">
|
||||
<div class="spinner"></div>
|
||||
<p style="font-size:18px; color:#2c3e50;">正在加载数据，请稍候...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div > </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','price'];
|
||||
var dataSel2=['td','qty'];
|
||||
var data1;
|
||||
var data2;
|
||||
var legend =['挂牌均价','挂牌数量'];
|
||||
var headtxt = '<?=$title?>';
|
||||
$.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);
|
||||
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[0], //图列
|
||||
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[1],
|
||||
type:'bar',
|
||||
yAxisIndex:1,
|
||||
symbol:'none',
|
||||
data:data2,
|
||||
itemStyle:{normal:{label:{show:true}}}, //显示数字
|
||||
}
|
||||
]
|
||||
};
|
||||
<script>
|
||||
var dataSel1 = ['td','price'];
|
||||
var dataSel2 = ['td','qty'];
|
||||
var legend = ['挂牌均价','挂牌数量'];
|
||||
|
||||
if (option && typeof option === "object") {
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
$(document).ready(function() {
|
||||
$("#district").val('<?=$_REQUEST['district']?>');
|
||||
$("#t_start").val('<?=$_REQUEST['t_start']?>');
|
||||
$("#t_end").val('<?=$_REQUEST['t_end']?>');
|
||||
loadChartData();
|
||||
$('#submitBtn').click(function(e) { e.preventDefault(); loadChartData(); });
|
||||
});
|
||||
|
||||
function loadChartData() {
|
||||
$('#loadingOverlay').addClass('active');
|
||||
var district = $('#district').val();
|
||||
var t_start = $('#t_start').val();
|
||||
var t_end = $('#t_end').val();
|
||||
var url = "../inc/ajax.inc.php?t=esfListDaily&district="+district+"&t_start="+t_start+"&t_end="+t_end+"&dm=Daily";
|
||||
|
||||
fetch(url)
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(resp) {
|
||||
var d = resp.data;
|
||||
var data1 = getRows(d.datas, dataSel1);
|
||||
var data2 = getRows(d.datas, dataSel2);
|
||||
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: 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[0], 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[0], type: 'line', yAxisIndex: 0, symbol: 'none', data: data1, itemStyle: { normal: { label: { show: true } } } },
|
||||
{ name: legend[1], type: 'bar', yAxisIndex: 1, symbol: 'none', data: data2, 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"; ?>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user