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

更新：增加html研究报告页面，增加新的导航页

Browse Source
This commit is contained in:
杨水淼
2025-07-28 12:44:46 +08:00
parent bd82783ddb
commit 4b3a51083b
9 changed files with 4568 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index-2.php
+309
View File
@@ -0,0 +1,309 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>金融数据可视化门户</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
neutral: '#F8FAFC',
dark: '#1E293B'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-hover {
@apply transition-all duration-300 hover:shadow-lg hover:scale-[1.02] hover:-translate-y-1;
}
.card-active {
@apply bg-primary/10 border-primary;
}
}
</style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen">
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-line-chart text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-dark">金融数据可视化平台</h1>
</div>
<div class="flex items-center space-x-4">
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<div class="mb-8">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-4 flex items-center">
<i class="fa-solid fa-database text-primary mr-2"></i>数据概览
</h2>
<p class="text-gray-600 max-w-3xl">探索金融市场的各类数据可视化图表，包括股票、指数和房地产市场的趋势分析，帮助您做出更明智的投资决策。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- 股票数据卡片 -->
<div class="bg-white rounded-xl shadow-md p-6 card-hover">
<div class="flex items-center mb-6">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<i class="fa-solid fa-chart-line text-primary"></i>
</div>
<h3 class="text-lg font-semibold">股票数据分析</h3>
</div>
<div class="mb-4">
<div class="flex items-center">
<span class="text-gray-600 mr-2">个股：</span>
<div class="relative flex-1">
<input type="text" name="ts_code" id="ts_code" placeholder="输入股票代码"
class="w-full pl-3 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
<button id="search-stock" class="absolute right-2 top-1/2 -translate-y-1/2 text-primary">
<i class="fa-solid fa-search"></i>
</button>
</div>
</div>
</div>
<div class="space-y-3">
<a href="#" onclick="openurl('https://echart.doorcome.cn/stock_trend.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-arrow-trend-up text-primary w-6"></i>
<span>股价VS PE/PB/PS 趋势</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/stockep.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-balance-scale text-secondary w-6"></i>
<span>股价VS EP</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/stockmargin.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-money-bill-wave text-green-500 w-6"></i>
<span>股价VS 融资融券余额</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/hkholdbycode.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-globe-asia text-blue-500 w-6"></i>
<span>股价VS 北向资金持股</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/stock_ih.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-building-columns text-purple-500 w-6"></i>
<span>股价VS 机构持仓趋势</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/stockkeydata.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-table text-yellow-500 w-6"></i>
<span>个股基本面数据</span>
</a>
</div>
<div class="mt-6 pt-6 border-t border-gray-200">
<h4 class="font-medium mb-3">指数分析</h4>
<div class="space-y-3">
<a href="#" onclick="openurl('https://echart.doorcome.cn/index_trend.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-chart-area text-indigo-500 w-6"></i>
<span>指数VS PE/PB/PS/市值 趋势</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/index_ih.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-institution text-teal-500 w-6"></i>
<span>指数VS 机构持仓趋势</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/index_mv_all.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-chart-pie text-orange-500 w-6"></i>
<span>指数VS 两市总市值</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/index_margin.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-bank text-red-500 w-6"></i>
<span>指数VS 融资余额</span>
</a>
<a href="#" onclick="openurl('https://echart.doorcome.cn/moneyflow.php');"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-exchange text-pink-500 w-6"></i>
<span>指数VS 沪深港通资金流向</span>
</a>
</div>
</div>
</div>
<!-- 房地产数据卡片 -->
<div class="bg-white rounded-xl shadow-md p-6 card-hover">
<div class="flex items-center mb-6">
<div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center mr-3">
<i class="fa-solid fa-home text-secondary"></i>
</div>
<h3 class="text-lg font-semibold">房地产数据分析</h3>
</div>
<div class="mb-4 text-gray-600">
<p>以下数据主要聚焦于宁波地区房地产市场动态，包括挂牌数量、成交量等趋势分析。</p>
</div>
<div class="space-y-3">
<a href="https://echart.doorcome.cn/realestate.php" target="_blank"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-building text-blue-500 w-6"></i>
<span>房地产挂牌数量趋势(宁波)</span>
</a>
<a href="https://echart.doorcome.cn/estateNewTradeDaily.php" target="_blank"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-key text-green-500 w-6"></i>
<span>新房每日成交量(宁波)</span>
</a>
<a href="https://echart.doorcome.cn/estateTradeDaily.php" target="_blank"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-exchange-alt text-yellow-500 w-6"></i>
<span>二手房每日成交量(宁波)</span>
</a>
<a href="https://echart.doorcome.cn/estateListDaily.php" target="_blank"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-list-alt text-purple-500 w-6"></i>
<span>二手房每日挂牌量(宁波)</span>
</a>
</div>
<div class="mt-8 bg-blue-50 p-4 rounded-lg border border-blue-100">
<div class="flex items-start">
<i class="fa-solid fa-info-circle text-blue-500 mt-1 mr-3"></i>
<div>
<h4 class="font-medium text-blue-800 mb-1">数据更新说明</h4>
<p class="text-blue-700 text-sm">所有房地产数据每日凌晨自动更新，股票和指数数据在交易日收盘后2小时内更新。</p>
</div>
</div>
</div>
</div>
<!-- 研究报告数据卡片 -->
<div class="bg-white rounded-xl shadow-md p-6 card-hover">
<div class="flex items-center mb-6">
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
<i class="fa-solid fa-file-text text-indigo-600"></i>
</div>
<h3 class="text-lg font-semibold">研究报告</h3>
</div>
<div class="mb-4 text-gray-600">
<p>以下是最新的市场研究报告，点击可查看详情。</p>
</div>
<div class="space-y-3">
<?php
// 扫描research目录下的HTML文件并提取标题
$researchDir = __DIR__ . '/research';
$htmlFiles = glob($researchDir . '/*.html');
if (!empty($htmlFiles)) {
foreach ($htmlFiles as $file) {
$fileName = basename($file);
$filePath = 'research/' . $fileName;
// 读取文件内容
$content = file_get_contents($file);
// 提取title标签内容
preg_match('/<title>(.*?)<\/title>/i', $content, $matches);
$title = !empty($matches[1]) ? $matches[1] : $fileName;
// 输出链接
echo '<a href="' . $filePath . '" target="_blank"
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
<i class="fa-solid fa-file-pdf text-red-500 w-6"></i>
<span>' . htmlspecialchars($title) . '</span>
</a>';
}
} else {
echo '<div class="p-3 border border-gray-200 rounded-lg text-gray-500">
<i class="fa-solid fa-info-circle mr-2"></i>暂无研究报告
</div>';
}
?>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-dark text-white mt-16">
<div class="container mx-auto px-4 py-12">
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
<div style='text-align: center'>Powered by Simon Young <span style="font-family: Arial; font-size: x-small; "> &copy; </span>2019-<?=date('Y')?>
&nbsp;All Right Reserved <a href="mailto:simon.youngest@gmail.com" title='simon.youngest@gmail.com'>E-mail</a>.
</div>
<div style='text-align: center'>
<span style="color: grey; font-size: small; ">
<a href="https://beian.miit.gov.cn" target="_blank">浙ICP备18056264号-1</a>
</span>
</div>
</div>
</footer>
<script>
// 模拟打开链接的函数
function openurl(url) {
let ts_code = $("#ts_code").val();
url = url + '?ts_code='+ ts_code;
console.log(url);
window.open(url);
}
// 股票搜索功能
document.getElementById('search-stock').addEventListener('click', function() {
const stockCode = document.getElementById('ts_code').value.trim();
if (stockCode) {
alert(`搜索股票代码: ${stockCode}`);
// 这里可以添加实际的搜索逻辑
} else {
alert('请输入股票代码');
}
});
// 为链接添加点击效果
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(e) {
if (this.getAttribute('href') === '#') {
e.preventDefault();
}
// 添加点击效果
this.classList.add('card-active');
setTimeout(() => {
this.classList.remove('card-active');
}, 300);
});
});
// 模拟数据加载动画
document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
document.querySelectorAll('.card-hover').forEach(card => {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
});
}, 300);
});
</script>
</body>
</html>