LPR
This commit is contained in:
parent
03f8eb02a9
commit
64c4a03241
134
pages/data.js
134
pages/data.js
@ -4,7 +4,7 @@ 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'
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
|
||||||
|
|
||||||
const bondData = [
|
const chinaBondData = [
|
||||||
{ month: '2024-01', oneYear: 1.85, fiveYear: 2.45, tenYear: 2.65 },
|
{ 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-02', oneYear: 1.82, fiveYear: 2.42, tenYear: 2.62 },
|
||||||
{ month: '2024-03', oneYear: 1.78, fiveYear: 2.38, tenYear: 2.58 },
|
{ month: '2024-03', oneYear: 1.78, fiveYear: 2.38, tenYear: 2.58 },
|
||||||
@ -19,6 +19,36 @@ const bondData = [
|
|||||||
{ month: '2024-12', oneYear: 1.48, fiveYear: 2.08, tenYear: 2.28 }
|
{ month: '2024-12', oneYear: 1.48, fiveYear: 2.08, tenYear: 2.28 }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const usBondData = [
|
||||||
|
{ month: '2024-01', oneYear: 4.85, fiveYear: 4.25, tenYear: 3.95 },
|
||||||
|
{ month: '2024-02', oneYear: 4.82, fiveYear: 4.22, tenYear: 3.92 },
|
||||||
|
{ month: '2024-03', oneYear: 4.78, fiveYear: 4.18, tenYear: 3.88 },
|
||||||
|
{ month: '2024-04', oneYear: 4.65, fiveYear: 4.05, tenYear: 3.75 },
|
||||||
|
{ month: '2024-05', oneYear: 4.55, fiveYear: 3.95, tenYear: 3.65 },
|
||||||
|
{ month: '2024-06', oneYear: 4.45, fiveYear: 3.85, tenYear: 3.55 },
|
||||||
|
{ month: '2024-07', oneYear: 4.35, fiveYear: 3.75, tenYear: 3.45 },
|
||||||
|
{ month: '2024-08', oneYear: 4.25, fiveYear: 3.65, tenYear: 3.35 },
|
||||||
|
{ month: '2024-09', oneYear: 4.15, fiveYear: 3.55, tenYear: 3.25 },
|
||||||
|
{ month: '2024-10', oneYear: 4.05, fiveYear: 3.45, tenYear: 3.15 },
|
||||||
|
{ month: '2024-11', oneYear: 3.95, fiveYear: 3.35, tenYear: 3.05 },
|
||||||
|
{ month: '2024-12', oneYear: 3.85, fiveYear: 3.25, tenYear: 2.95 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const chinaLPRData = [
|
||||||
|
{ month: '2024-01', oneYear: 3.45, fiveYear: 3.95 },
|
||||||
|
{ month: '2024-02', oneYear: 3.45, fiveYear: 3.95 },
|
||||||
|
{ month: '2024-03', oneYear: 3.45, fiveYear: 3.95 },
|
||||||
|
{ month: '2024-04', oneYear: 3.40, fiveYear: 3.90 },
|
||||||
|
{ month: '2024-05', oneYear: 3.40, fiveYear: 3.90 },
|
||||||
|
{ month: '2024-06', oneYear: 3.40, fiveYear: 3.90 },
|
||||||
|
{ month: '2024-07', oneYear: 3.35, fiveYear: 3.85 },
|
||||||
|
{ month: '2024-08', oneYear: 3.35, fiveYear: 3.85 },
|
||||||
|
{ month: '2024-09', oneYear: 3.35, fiveYear: 3.85 },
|
||||||
|
{ month: '2024-10', oneYear: 3.30, fiveYear: 3.80 },
|
||||||
|
{ month: '2024-11', oneYear: 3.30, fiveYear: 3.80 },
|
||||||
|
{ month: '2024-12', oneYear: 3.30, fiveYear: 3.80 }
|
||||||
|
]
|
||||||
|
|
||||||
export default function Data() {
|
export default function Data() {
|
||||||
const [selectedIndicator, setSelectedIndicator] = useState('bond-china-treasury')
|
const [selectedIndicator, setSelectedIndicator] = useState('bond-china-treasury')
|
||||||
|
|
||||||
@ -26,7 +56,14 @@ export default function Data() {
|
|||||||
{
|
{
|
||||||
group: '债券',
|
group: '债券',
|
||||||
items: [
|
items: [
|
||||||
{ id: 'bond-china-treasury', name: '中国国债' }
|
{ id: 'bond-china-treasury', name: '中国国债' },
|
||||||
|
{ id: 'bond-us-treasury', name: '美国国债' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
group: '贷款',
|
||||||
|
items: [
|
||||||
|
{ id: 'loan-china-lpr', name: '中国LPR' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -77,7 +114,7 @@ export default function Data() {
|
|||||||
|
|
||||||
<div className="chart-container">
|
<div className="chart-container">
|
||||||
<ResponsiveContainer width="100%" height={500}>
|
<ResponsiveContainer width="100%" height={500}>
|
||||||
<LineChart data={bondData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
<LineChart data={chinaBondData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||||
<CartesianGrid strokeDasharray="3 3" />
|
<CartesianGrid strokeDasharray="3 3" />
|
||||||
<XAxis dataKey="month" />
|
<XAxis dataKey="month" />
|
||||||
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
|
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
|
||||||
@ -102,7 +139,7 @@ export default function Data() {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{bondData.map((row, index) => (
|
{chinaBondData.map((row, index) => (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td>{row.month}</td>
|
<td>{row.month}</td>
|
||||||
<td>{row.oneYear.toFixed(2)}</td>
|
<td>{row.oneYear.toFixed(2)}</td>
|
||||||
@ -115,6 +152,95 @@ export default function Data() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{selectedIndicator === 'bond-us-treasury' && (
|
||||||
|
<div className="indicator-detail">
|
||||||
|
<h2 className="indicator-title">美国国债收益率走势</h2>
|
||||||
|
<p className="indicator-description">展示一年期、五年期、十年期国债收益率的变化趋势</p>
|
||||||
|
|
||||||
|
<div className="chart-container">
|
||||||
|
<ResponsiveContainer width="100%" height={500}>
|
||||||
|
<LineChart data={usBondData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" />
|
||||||
|
<XAxis dataKey="month" />
|
||||||
|
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
|
||||||
|
<Tooltip />
|
||||||
|
<Legend />
|
||||||
|
<Line type="monotone" dataKey="oneYear" name="一年期" stroke="#ff7300" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||||
|
<Line type="monotone" dataKey="fiveYear" name="五年期" stroke="#0088fe" strokeWidth={2} />
|
||||||
|
<Line type="monotone" dataKey="tenYear" name="十年期" stroke="#00C49F" 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>
|
||||||
|
{usBondData.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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedIndicator === 'loan-china-lpr' && (
|
||||||
|
<div className="indicator-detail">
|
||||||
|
<h2 className="indicator-title">中国LPR走势</h2>
|
||||||
|
<p className="indicator-description">展示一年期和五年期贷款市场报价利率(LPR)的变化趋势</p>
|
||||||
|
|
||||||
|
<div className="chart-container">
|
||||||
|
<ResponsiveContainer width="100%" height={500}>
|
||||||
|
<LineChart data={chinaLPRData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" />
|
||||||
|
<XAxis dataKey="month" />
|
||||||
|
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
|
||||||
|
<Tooltip />
|
||||||
|
<Legend />
|
||||||
|
<Line type="monotone" dataKey="oneYear" name="一年期LPR" stroke="#e6194b" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||||
|
<Line type="monotone" dataKey="fiveYear" name="五年期LPR" stroke="#3cb44b" strokeWidth={2} />
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="data-table-container">
|
||||||
|
<h3 className="table-title">详细数据</h3>
|
||||||
|
<table className="data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>月份</th>
|
||||||
|
<th>一年期LPR(%)</th>
|
||||||
|
<th>五年期LPR(%)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{chinaLPRData.map((row, index) => (
|
||||||
|
<tr key={index}>
|
||||||
|
<td>{row.month}</td>
|
||||||
|
<td>{row.oneYear.toFixed(2)}</td>
|
||||||
|
<td>{row.fiveYear.toFixed(2)}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user