中国国债
This commit is contained in:
parent
7d83069100
commit
03f8eb02a9
1163
package-lock.json
generated
1163
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "^14.2.3",
|
"next": "^14.2.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0",
|
||||||
|
"recharts": "^3.8.1"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
|
|||||||
109
pages/data.js
109
pages/data.js
@ -1,8 +1,36 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import Navbar from '../components/Navbar'
|
import Navbar from '../components/Navbar'
|
||||||
import Footer from '../components/Footer'
|
import Footer from '../components/Footer'
|
||||||
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
|
||||||
|
|
||||||
|
const bondData = [
|
||||||
|
{ month: '2024-01', oneYear: 1.85, fiveYear: 2.45, tenYear: 2.65 },
|
||||||
|
{ month: '2024-02', oneYear: 1.82, fiveYear: 2.42, tenYear: 2.62 },
|
||||||
|
{ month: '2024-03', oneYear: 1.78, fiveYear: 2.38, tenYear: 2.58 },
|
||||||
|
{ month: '2024-04', oneYear: 1.75, fiveYear: 2.35, tenYear: 2.55 },
|
||||||
|
{ month: '2024-05', oneYear: 1.72, fiveYear: 2.32, tenYear: 2.52 },
|
||||||
|
{ month: '2024-06', oneYear: 1.68, fiveYear: 2.28, tenYear: 2.48 },
|
||||||
|
{ month: '2024-07', oneYear: 1.65, fiveYear: 2.25, tenYear: 2.45 },
|
||||||
|
{ month: '2024-08', oneYear: 1.62, fiveYear: 2.22, tenYear: 2.42 },
|
||||||
|
{ month: '2024-09', oneYear: 1.58, fiveYear: 2.18, tenYear: 2.38 },
|
||||||
|
{ month: '2024-10', oneYear: 1.55, fiveYear: 2.15, tenYear: 2.35 },
|
||||||
|
{ month: '2024-11', oneYear: 1.52, fiveYear: 2.12, tenYear: 2.32 },
|
||||||
|
{ month: '2024-12', oneYear: 1.48, fiveYear: 2.08, tenYear: 2.28 }
|
||||||
|
]
|
||||||
|
|
||||||
export default function Data() {
|
export default function Data() {
|
||||||
|
const [selectedIndicator, setSelectedIndicator] = useState('bond-china-treasury')
|
||||||
|
|
||||||
|
const indicators = [
|
||||||
|
{
|
||||||
|
group: '债券',
|
||||||
|
items: [
|
||||||
|
{ id: 'bond-china-treasury', name: '中国国债' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<Head>
|
<Head>
|
||||||
@ -21,25 +49,72 @@ export default function Data() {
|
|||||||
各种经济数据和图表
|
各种经济数据和图表
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="grid">
|
<div className="data-layout">
|
||||||
<div className="card">
|
<div className="data-sidebar">
|
||||||
<h2>GDP 数据</h2>
|
{indicators.map((group, groupIndex) => (
|
||||||
<p>国内生产总值及其增长趋势</p>
|
<div key={groupIndex} className="indicator-group">
|
||||||
|
<h3 className="group-title">{group.group}</h3>
|
||||||
|
<ul className="indicator-list">
|
||||||
|
{group.items.map((item) => (
|
||||||
|
<li
|
||||||
|
key={item.id}
|
||||||
|
className={`indicator-item ${selectedIndicator === item.id ? 'active' : ''}`}
|
||||||
|
onClick={() => setSelectedIndicator(item.id)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card">
|
<div className="data-content">
|
||||||
<h2>通货膨胀</h2>
|
{selectedIndicator === 'bond-china-treasury' && (
|
||||||
<p>消费者价格指数和通胀率</p>
|
<div className="indicator-detail">
|
||||||
</div>
|
<h2 className="indicator-title">中国国债收益率走势</h2>
|
||||||
|
<p className="indicator-description">展示一年期、五年期、十年期国债收益率的变化趋势</p>
|
||||||
<div className="card">
|
|
||||||
<h2>失业率</h2>
|
<div className="chart-container">
|
||||||
<p>劳动力市场数据和就业趋势</p>
|
<ResponsiveContainer width="100%" height={500}>
|
||||||
</div>
|
<LineChart data={bondData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" />
|
||||||
<div className="card">
|
<XAxis dataKey="month" />
|
||||||
<h2>贸易数据</h2>
|
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
|
||||||
<p>进出口贸易和国际收支</p>
|
<Tooltip />
|
||||||
|
<Legend />
|
||||||
|
<Line type="monotone" dataKey="oneYear" name="一年期" stroke="#8884d8" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||||
|
<Line type="monotone" dataKey="fiveYear" name="五年期" stroke="#82ca9d" strokeWidth={2} />
|
||||||
|
<Line type="monotone" dataKey="tenYear" name="十年期" stroke="#ffc658" strokeWidth={2} />
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="data-table-container">
|
||||||
|
<h3 className="table-title">详细数据</h3>
|
||||||
|
<table className="data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>月份</th>
|
||||||
|
<th>一年期(%)</th>
|
||||||
|
<th>五年期(%)</th>
|
||||||
|
<th>十年期(%)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{bondData.map((row, index) => (
|
||||||
|
<tr key={index}>
|
||||||
|
<td>{row.month}</td>
|
||||||
|
<td>{row.oneYear.toFixed(2)}</td>
|
||||||
|
<td>{row.fiveYear.toFixed(2)}</td>
|
||||||
|
<td>{row.tenYear.toFixed(2)}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -117,3 +117,127 @@ main {
|
|||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Data page layout */
|
||||||
|
.data-layout {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-sidebar {
|
||||||
|
width: 250px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 2px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-item {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-item:hover {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-item.active {
|
||||||
|
background-color: #333;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-detail {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-description {
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: #fafafa;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table-container {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table th,
|
||||||
|
.data-table td {
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table th {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table tbody tr:hover {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.data-layout {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-sidebar {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user