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

更新：重构多个页面代码，简化代码。实现无刷新更新数据。

Browse Source
This commit is contained in:
杨水淼
2025-07-14 12:46:48 +08:00
parent daeae185dd
commit de11c31f0b
18 changed files with 890 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index_trend.php
+118 -96
View File
@@ -2,11 +2,12 @@
/*
* @Author: 杨水淼 yangshuimiao@jsjd.cc
* @Date: 2025-07-08 08:16:01
* @LastEditors: 杨水淼 yangshuimiao@jsjd.cc
* @LastEditTime: 2025-07-09 16:02:10
* @LastEditors: Simon failsafe@163.com
* @LastEditTime: 2025-07-13 11:02:35
* @FilePath: \echarts\index_trend.php
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
include_once("inc/functions.inc.php");
$title="指数VS PE/PB/PS/市值 趋势";
include_once "html/head.php";
@@ -18,21 +19,11 @@ $ts_code = $_REQUEST['code'];
<script src="js/renderCharts.js"></script>
<form name="main" id="main" method="get"> <div style="width:100%;text-align:center">
指数代码:
<select name='code' id='code'>
<option value='000001.SH'>上证指数</option>
<option value='399001.SZ'>深圳成指</option>
<option value='399005.SZ'>中小板指</option>
<option value='399006.SZ'>创业板指</option>
<option value='000016.SH'>上证50</option>
<option value='399300.SZ'>沪深300</option>
<option value='399905.SZ'>中证500</option>
</select>&nbsp;
<script>
$('#code').val('<?=$_REQUEST['code']?>');
</script>
<?php indexList('code'); ?>&nbsp;
开始时间: <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']?>' >
<input type='submit' value="给我查!">
<button id="submitBtn" class="btn-submit"><span>查询数据</span></button>
<div >&nbsp;</div>
<input type='checkbox' id='cb_pe' onclick="hideSwitch(this.id,'pe_ttm')" checked> PE_TTM 市盈率
<input type='checkbox' id='cb_pb' onclick="hideSwitch(this.id,'pb')" checked> PB 市净率
@@ -41,94 +32,125 @@ $ts_code = $_REQUEST['code'];
</div> </form>
<div >&nbsp;</div>
<!-- 图表容器 -->
<div id="container" style="width: 1000px; margin: 0 auto 20px;">
<div style="position: relative; height: 10px;"></div>
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
<p style="font-size:18px; color:#2c3e50;">正在加载数据，请稍候...</p>
</div>
</div>
<div id="pe_ttm" style="width: 1000px; height:400px; margin: 0 auto 20px;"></div>
<div id="pb" style="width: 1000px; height:400px; margin: 0 auto 20px;"></div>
<div id="total_mv" style="width: 1000px; height:400px; margin: 0 auto 20px;"></div>
<div id="float_mv" style="width: 1000px; height:400px; margin: 0 auto 20px;"></div>
</div>
<script>
let t_start = $('#t_start').val();
let t_end = $('#t_end').val();
let code = $("#code").val();
let codeName=convertIndexCode(code);
url = "https://api.doorcome.cn/api/indexDatas/?tscode="+code;
url += "&start_date="+t_start+"&end_date="+t_end;
fetch(url)
.then(httpresponse => httpresponse.json())
.then(parsedData => {
// 图表配置:pe_ttm
var params = {};
params.chartid='pe_ttm';
params.legend = [codeName,'pe_ttm'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'pe_ttm');
dataCal = calculateStats(params.data2);
params.sub_text = "TTM PE Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
// 图表配置:pb
params = {};
params.chartid='pb';
params.legend = [codeName,'pb'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'pb');
dataCal = calculateStats(params.data2);
params.sub_text = "PB Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
// 页面加载时初始化图表
$(document).ready(function() {
// 设置默认值
$('#code').val('<?= $_REQUEST['code'] ?>');
// 加载初始数据
loadChartData();
// 绑定按钮点击事件
$('#submitBtn').click(function(e) {
e.preventDefault(); // 阻止表单提交刷新页面
loadChartData();
});
});
// 加载图表数据的函数
function loadChartData() {
// 显示加载动画
$('#loadingOverlay').addClass('active');
let t_start = $('#t_start').val();
let t_end = $('#t_end').val();
let code = $("#code").val();
let codeName=convertIndexCode(code);
url = "https://api.doorcome.cn/api/indexDatas/?tscode="+code;
url += "&start_date="+t_start+"&end_date="+t_end;
fetch(url)
.then(httpresponse => httpresponse.json())
.then(parsedData => {
// 图表配置:pe_ttm
var params = {};
params.chartid='pe_ttm';
params.legend = [codeName,'pe_ttm'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'pe_ttm');
dataCal = calculateStats(params.data2);
params.sub_text = "TTM PE Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
// 图表配置:pb
params = {};
params.chartid='pb';
params.legend = [codeName,'pb'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'pb');
dataCal = calculateStats(params.data2);
params.sub_text = "PB Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
// 图表配置:total_mv
params = {};
params.chartid='total_mv';
params.legend = [codeName,'总市值-万亿'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'total_mv');
params.data2 = params.data2.map(item => {
return {
value: [
item.value[0],
parseFloat((parseFloat(item.value[1]) / 10000 / 10000 / 10000).toFixed(2))
]
};
// 图表配置:total_mv
params = {};
params.chartid='total_mv';
params.legend = [codeName,'总市值-万亿'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'total_mv');
params.data2 = params.data2.map(item => {
return {
value: [
item.value[0],
parseFloat((parseFloat(item.value[1]) / 10000 / 10000 / 10000).toFixed(2))
]
};
});
dataCal = calculateStats(params.data2);
params.sub_text = "总市值 Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
// 图表配置:float_mv
params = {};
params.chartid='float_mv';
params.legend = [codeName,'流通市值-万亿'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'float_mv');
params.data2 = params.data2.map(item => {
return {
value: [
item.value[0],
parseFloat((parseFloat(item.value[1]) / 10000 / 10000 / 10000).toFixed(2))
]
};
});
dataCal = calculateStats(params.data2);
params.sub_text = "流通市值 Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
})
.catch(error => console.error('数据加载失败:', error))
.finally(() => {
// 隐藏加载动画
$('#loadingOverlay').removeClass('active');
});
dataCal = calculateStats(params.data2);
params.sub_text = "总市值 Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
// 图表配置:float_mv
params = {};
params.chartid='float_mv';
params.legend = [codeName,'流通市值-万亿'];
params.text = params.legend[0]+' V.S '+params.legend[1];
params.data1 = pickData(parsedData, 'trade_date', 'close');
params.data2 = pickData(parsedData, 'trade_date', 'float_mv');
params.data2 = params.data2.map(item => {
return {
value: [
item.value[0],
parseFloat((parseFloat(item.value[1]) / 10000 / 10000 / 10000).toFixed(2))
]
};
});
dataCal = calculateStats(params.data2);
params.sub_text = "流通市值 Max:"+dataCal['max'];
params.sub_text += ", Min:"+dataCal['min'];
params.sub_text += ", Average:"+dataCal['avg'];
params.sub_text += ", Recent:"+dataCal['last'];
doubleLineChart(params);
})
.catch(error => console.error('数据加载失败:', error));
}
</script>
<?php include_once "html/footer.php"; ?>