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

更新：添加每日和每月数据选项，修改相关URL参数，更新JavaScript文件，增加股票指数历史数据获取功能

Browse Source
This commit is contained in:
杨水淼
2025-07-09 07:36:50 +08:00
parent 5d135b24f1
commit 43a202c789
12 changed files with 734 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index_trend.php
+185 -38
View File
@@ -1,56 +1,203 @@
<?php
$_REQUEST['code']=$_REQUEST['code']?$_REQUEST['code']:'sh'; #code:sh sz zx cy
$_REQUEST['t_start']=$_REQUEST['t_start']?$_REQUEST['t_start']:'2015-01-01';
$_REQUEST['t_end']=$_REQUEST['t_end']?$_REQUEST['t_end']:'';
$title="指数VS PE/PB/PS/市值 趋势";
include_once "html/head.php";
$_REQUEST['code'] = $_REQUEST['code']?$_REQUEST['code']:'000001.SH';
$_REQUEST['t_start']= $_REQUEST['t_start']?$_REQUEST['t_start']:'2020-01-01';
$_REQUEST['t_end'] = $_REQUEST['t_end']?$_REQUEST['t_end']:date('Y-m-d');
$ts_code = $_REQUEST['code'];
?>
<form name="main" id="main" method="get"> <div style="width:100%;text-align:center">
指数代码:
<select name='code' id='code'>
<option value='sh'>上证指数</option>
<option value='sz'>深圳成指</option>
<option value='zx'>中小板指</option>
<option value='cy'>创业板指</option>
<option value='000001.SH'>上证指数</option>
<option value='399001.SZ'>深圳成指</option>
<option value='399005.SZ'>中小板指</option>
<option value='399006.SZ'>创业板指</option>
<option value='000016.SZ'>上证50</option>
<option value='399300.SZ'>沪深300</option>
<option value='399905.SZ'>中证500</option>
</select>&nbsp;
<script>
document.getElementById('code').value='<?=$_REQUEST['code']?>';
$('#code').val('<?=$_REQUEST['code']?>');
</script>
开始时间: <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="给我查!">
<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')" > PB 市净率
<input type='checkbox' id='cb_ps' onclick="hideSwitch(this.id,'ps')" > PS 市销率
<input type='checkbox' id='cb_total_mv' onclick="hideSwitch(this.id,'total_mv')" > 总市值
<input type='checkbox' id='cb_circ_mv' onclick="hideSwitch(this.id,'circ_mv')" > 流通市值
<input type='checkbox' id='cb_pb' onclick="hideSwitch(this.id,'pb')" checked> PB 市净率
<input type='checkbox' id='cb_total_mv' onclick="hideSwitch(this.id,'total_mv')" checked> 总市值
</div> </form>
<div >&nbsp;</div>
<!--https://echart.doorcome.cn/chartFive.php?s=20071001&code=sz&item=total_mv-->
<div style="width:100%; text-align:center" id='pe_ttm'>
<iframe src="https://echart.doorcome.cn/chartFive.php?s=<?=$_REQUEST['t_start']?>&item=pe_ttm&code=<?=$_REQUEST['code']?>&e=<?=$_REQUEST['t_end']?>"
height="400px" width="1000px"></iframe>
</div>
<div >&nbsp;</div>
<div style="width:100%; text-align:center; display:None;" id='pb'>
<iframe src="https://echart.doorcome.cn/chartFive.php?s=<?=$_REQUEST['t_start']?>&item=pb&code=<?=$_REQUEST['code']?>&e=<?=$_REQUEST['t_end']?>"
height="400px" width="1000px"></iframe>
</div>
<div >&nbsp;</div>
<div style="width:100%; text-align:center; display:None;" id='ps'>
<iframe src="https://echart.doorcome.cn/chartFive.php?s=<?=$_REQUEST['t_start']?>&item=ps&code=<?=$_REQUEST['code']?>&e=<?=$_REQUEST['t_end']?>"
height="400px" width="1000px"></iframe>
</div>
<div >&nbsp;</div>
<div style="width:100%; text-align:center; display:None;" id='total_mv'>
<iframe src="https://echart.doorcome.cn/chartFive.php?s=<?=$_REQUEST['t_start']?>&item=total_mv&code=<?=$_REQUEST['code']?>&e=<?=$_REQUEST['t_end']?>"
height="400px" width="1000px"></iframe>
</div>
<div >&nbsp;</div>
<div style="width:100%; text-align:center; display:None;" id='circ_mv'>
<iframe src="https://echart.doorcome.cn/chartFive.php?s=<?=$_REQUEST['t_start']?>&item=circ_mv&code=<?=$_REQUEST['code']?>&e=<?=$_REQUEST['t_end']?>"
height="400px" width="1000px"></iframe>
</div>
<?php include_once "html/footer.php"; ?>
<!-- 图表容器 -->
<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>
<script>
let start_date=formatDateToYYYYMMDD("<?=$_REQUEST['t_start'] ?>");
let end_date=formatDateToYYYYMMDD("<?=$_REQUEST['t_end'] ?>");
url = "https://api.doorcome.cn/api/indexDatas/?tscode=<?=$_REQUEST['code'] ?>";
url += "&start_date="+start_date+"&end_date="+end_date;
fetch(url)
.then(httpresponse => httpresponse.json())
.then(parsedData => {
// 图表配置:pe_ttm
var params = {};
params.chartid='pe_ttm';
codeName=convertIndexCode("<?=$_REQUEST['code'] ?>");
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.data1);
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';
codeName=convertIndexCode("<?=$_REQUEST['code'] ?>");
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.data1);
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);
// 图表配置:total_mv
params = {};
params.chartid='total_mv';
codeName=convertIndexCode("<?=$_REQUEST['code'] ?>");
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.data1);
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);
})
.catch(error => console.error('数据加载失败:', error));
// 窗口大小自适应
window.addEventListener('resize', () => {
[pe_ttm, pb, total_mv].forEach(chart => chart.resize());
});
function doubleLineChart(params){
/*
需要外部提供:
chartid: div container id
legend: array
unit: str
sub_text: str
data:data1,data2, array
*/
var dom = document.getElementById(params.chartid);
var myChart = echarts.init(dom,'dark');
option = null;
option = {
title: {
text: params.text,
subtext: params.sub_text,
textAlign:'center',
left:'50%'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:params.legend,
right:'20'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: [{
type: 'value',
name:params.legend[0], //图列
show:true
},
{
type:'value',
name:params.legend[1], //图例
//scale:true,
boundaryGap:false,
show:true,
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:params.legend[0],
type:'line',
yAxisIndex:0,
symbol:'none',
data:params.data1
},
{
name:params.legend[1],
type:'line',
yAxisIndex:1,
symbol:'none', //数据圆点
smooth:false,
data:params.data2
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>
<?php include_once "html/footer.php"; ?>