This commit is contained in:
parent
92fee2174c
commit
3a14d3a1a4
221
pages/data.js
221
pages/data.js
@ -49,6 +49,58 @@ const chinaLPRData = [
|
||||
{ month: '2024-12', oneYear: 3.30, fiveYear: 3.80 }
|
||||
]
|
||||
|
||||
// 中国黄金储备月度数据（单位：吨）
|
||||
const chinaGoldReserveMonthly = [
|
||||
{ month: '2024-01', reserves: 2245.4 },
|
||||
{ month: '2024-02', reserves: 2255.2 },
|
||||
{ month: '2024-03', reserves: 2267.5 },
|
||||
{ month: '2024-04', reserves: 2276.9 },
|
||||
{ month: '2024-05', reserves: 2285.3 },
|
||||
{ month: '2024-06', reserves: 2296.1 },
|
||||
{ month: '2024-07', reserves: 2305.8 },
|
||||
{ month: '2024-08', reserves: 2316.2 },
|
||||
{ month: '2024-09', reserves: 2325.7 },
|
||||
{ month: '2024-10', reserves: 2336.5 },
|
||||
{ month: '2024-11', reserves: 2345.9 },
|
||||
{ month: '2024-12', reserves: 2356.3 }
|
||||
]
|
||||
|
||||
// 美国黄金储备月度数据（单位：吨）
|
||||
const usGoldReserveMonthly = [
|
||||
{ month: '2024-01', reserves: 8133.5 },
|
||||
{ month: '2024-02', reserves: 8133.5 },
|
||||
{ month: '2024-03', reserves: 8133.5 },
|
||||
{ month: '2024-04', reserves: 8133.5 },
|
||||
{ month: '2024-05', reserves: 8133.5 },
|
||||
{ month: '2024-06', reserves: 8133.5 },
|
||||
{ month: '2024-07', reserves: 8133.5 },
|
||||
{ month: '2024-08', reserves: 8133.5 },
|
||||
{ month: '2024-09', reserves: 8133.5 },
|
||||
{ month: '2024-10', reserves: 8133.5 },
|
||||
{ month: '2024-11', reserves: 8133.5 },
|
||||
{ month: '2024-12', reserves: 8133.5 }
|
||||
]
|
||||
|
||||
// 中国黄金储备年度数据（单位：吨）
|
||||
const chinaGoldReserveYearly = [
|
||||
{ year: '2019', reserves: 1948.3 },
|
||||
{ year: '2020', reserves: 1948.3 },
|
||||
{ year: '2021', reserves: 1948.3 },
|
||||
{ year: '2022', reserves: 1948.3 },
|
||||
{ year: '2023', reserves: 2190.2 },
|
||||
{ year: '2024', reserves: 2356.3 }
|
||||
]
|
||||
|
||||
// 美国黄金储备年度数据（单位：吨）
|
||||
const usGoldReserveYearly = [
|
||||
{ year: '2019', reserves: 8133.5 },
|
||||
{ year: '2020', reserves: 8133.5 },
|
||||
{ year: '2021', reserves: 8133.5 },
|
||||
{ year: '2022', reserves: 8133.5 },
|
||||
{ year: '2023', reserves: 8133.5 },
|
||||
{ year: '2024', reserves: 8133.5 }
|
||||
]
|
||||
|
||||
export default function Data() {
|
||||
const [selectedIndicator, setSelectedIndicator] = useState('bond-china-treasury')
|
||||
|
||||
@ -65,6 +117,15 @@ export default function Data() {
|
||||
items: [
|
||||
{ id: 'loan-china-lpr', name: '中国LPR' }
|
||||
]
|
||||
},
|
||||
{
|
||||
group: '央行数据',
|
||||
items: [
|
||||
{ id: 'central-bank-china-gold-monthly', name: '中国黄金储备（月）' },
|
||||
{ id: 'central-bank-us-gold-monthly', name: '美国黄金储备（月）' },
|
||||
{ id: 'central-bank-china-gold-yearly', name: '中国黄金储备（年）' },
|
||||
{ id: 'central-bank-us-gold-yearly', name: '美国黄金储备（年）' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -241,6 +302,166 @@ export default function Data() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedIndicator === 'central-bank-china-gold-monthly' && (
|
||||
<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={chinaGoldReserveMonthly} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="month" />
|
||||
<YAxis domain={['dataMin - 20', 'dataMax + 20']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="reserves" name="黄金储备(吨)" stroke="#ffd700" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="data-table-container">
|
||||
<h3 className="table-title">详细数据</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>月份</th>
|
||||
<th>黄金储备(吨)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{chinaGoldReserveMonthly.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td>{row.month}</td>
|
||||
<td>{row.reserves.toFixed(1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedIndicator === 'central-bank-us-gold-monthly' && (
|
||||
<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={usGoldReserveMonthly} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="month" />
|
||||
<YAxis domain={[8130, 8140]} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="reserves" name="黄金储备(吨)" stroke="#333333" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="data-table-container">
|
||||
<h3 className="table-title">详细数据</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>月份</th>
|
||||
<th>黄金储备(吨)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{usGoldReserveMonthly.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td>{row.month}</td>
|
||||
<td>{row.reserves.toFixed(1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedIndicator === 'central-bank-china-gold-yearly' && (
|
||||
<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={chinaGoldReserveYearly} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 50', 'dataMax + 50']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="reserves" name="黄金储备(吨)" stroke="#ffd700" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="data-table-container">
|
||||
<h3 className="table-title">详细数据</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>年份</th>
|
||||
<th>黄金储备(吨)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{chinaGoldReserveYearly.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td>{row.year}</td>
|
||||
<td>{row.reserves.toFixed(1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedIndicator === 'central-bank-us-gold-yearly' && (
|
||||
<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={usGoldReserveYearly} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={[8130, 8140]} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="reserves" name="黄金储备(吨)" stroke="#333333" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="data-table-container">
|
||||
<h3 className="table-title">详细数据</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>年份</th>
|
||||
<th>黄金储备(吨)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{usGoldReserveYearly.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td>{row.year}</td>
|
||||
<td>{row.reserves.toFixed(1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -1,8 +1,45 @@
|
||||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
|
||||
|
||||
const usDebtData = [
|
||||
{ year: '2019', debt: 22.7, gdp: 21.4, debtToGdp: 106.1, interestToGdp: 1.8 },
|
||||
{ year: '2020', debt: 26.9, gdp: 20.9, debtToGdp: 128.7, interestToGdp: 1.6 },
|
||||
{ year: '2021', debt: 28.4, gdp: 23.0, debtToGdp: 123.5, interestToGdp: 1.5 },
|
||||
{ year: '2022', debt: 30.9, gdp: 25.4, debtToGdp: 121.6, interestToGdp: 1.6 },
|
||||
{ year: '2023', debt: 33.1, gdp: 26.9, debtToGdp: 123.0, interestToGdp: 1.9 },
|
||||
{ year: '2024', debt: 35.3, gdp: 28.5, debtToGdp: 123.9, interestToGdp: 2.1 },
|
||||
{ year: '2025', debt: 37.5, gdp: 30.2, debtToGdp: 124.2, interestToGdp: 2.3 },
|
||||
{ year: '2026', debt: 39.8, gdp: 31.9, debtToGdp: 124.8, interestToGdp: 2.5 }
|
||||
]
|
||||
|
||||
const chinaDebtData = [
|
||||
{ year: '2019', debt: 8.8, gdp: 14.3, debtToGdp: 61.5, interestToGdp: 1.9 },
|
||||
{ year: '2020', debt: 10.3, gdp: 14.7, debtToGdp: 70.1, interestToGdp: 1.8 },
|
||||
{ year: '2021', debt: 11.7, gdp: 16.1, debtToGdp: 72.7, interestToGdp: 1.7 },
|
||||
{ year: '2022', debt: 13.1, gdp: 17.9, debtToGdp: 73.2, interestToGdp: 1.6 },
|
||||
{ year: '2023', debt: 14.5, gdp: 19.4, debtToGdp: 74.7, interestToGdp: 1.6 },
|
||||
{ year: '2024', debt: 15.9, gdp: 21.0, debtToGdp: 75.7, interestToGdp: 1.5 },
|
||||
{ year: '2025', debt: 17.3, gdp: 22.8, debtToGdp: 75.9, interestToGdp: 1.5 },
|
||||
{ year: '2026', debt: 18.8, gdp: 24.7, debtToGdp: 76.1, interestToGdp: 1.4 }
|
||||
]
|
||||
|
||||
export default function Strategy() {
|
||||
const [selectedStrategy, setSelectedStrategy] = useState('us-debt-gdp')
|
||||
|
||||
const strategies = [
|
||||
{
|
||||
id: 'us-debt-gdp',
|
||||
name: '美国政府债务/GDP'
|
||||
},
|
||||
{
|
||||
id: 'china-debt-gdp',
|
||||
name: '中国政府债务/GDP'
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<Head>
|
||||
@ -21,25 +58,220 @@ export default function Strategy() {
|
||||
按照经济理论组织的相关数据和图表的对比
|
||||
</p>
|
||||
|
||||
<div className="grid">
|
||||
<div className="card">
|
||||
<h2>宏观经济策略</h2>
|
||||
<p>基于宏观经济理论的数据分析和对比</p>
|
||||
<div className="strategy-layout">
|
||||
<div className="strategy-sidebar">
|
||||
<h3 className="sidebar-title">策略列表</h3>
|
||||
<ul className="strategy-list">
|
||||
{strategies.map((strategy) => (
|
||||
<li
|
||||
key={strategy.id}
|
||||
className={`strategy-item ${selectedStrategy === strategy.id ? 'active' : ''}`}
|
||||
onClick={() => setSelectedStrategy(strategy.id)}
|
||||
>
|
||||
{strategy.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>货币政策分析</h2>
|
||||
<p>货币供应量与经济增长的关系</p>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>财政政策评估</h2>
|
||||
<p>政府支出与税收对经济的影响</p>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h2>产业结构分析</h2>
|
||||
<p>不同产业对经济增长的贡献</p>
|
||||
<div className="strategy-content">
|
||||
{selectedStrategy === 'us-debt-gdp' && (
|
||||
<div className="strategy-detail">
|
||||
<h2 className="strategy-title">美国政府债务/GDP分析</h2>
|
||||
<p className="strategy-description">
|
||||
分析美国政府债务、GDP、债务/GDP比率以及债务利息/GDP比率的走势
|
||||
</p>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">美国政府债务走势</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={usDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 2', 'dataMax + 2']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="debt" name="美国政府债务(万亿美元)" stroke="#8884d8" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">美国GDP走势</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={usDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 1', 'dataMax + 1']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="gdp" name="美国GDP(万亿美元)" stroke="#82ca9d" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">美国政府债务/GDP走势</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={usDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 5', 'dataMax + 5']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="debtToGdp" name="债务/GDP比率(%)" stroke="#ffc658" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">美国政府债务利息/GDP</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={usDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="interestToGdp" name="债务利息/GDP比率(%)" stroke="#ff7300" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="data-table-container">
|
||||
<h3 className="table-title">详细数据</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>年份</th>
|
||||
<th>政府债务(万亿美元)</th>
|
||||
<th>GDP(万亿美元)</th>
|
||||
<th>债务/GDP(%)</th>
|
||||
<th>债务利息/GDP(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{usDebtData.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td>{row.year}</td>
|
||||
<td>{row.debt.toFixed(1)}</td>
|
||||
<td>{row.gdp.toFixed(1)}</td>
|
||||
<td>{row.debtToGdp.toFixed(1)}</td>
|
||||
<td>{row.interestToGdp.toFixed(1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedStrategy === 'china-debt-gdp' && (
|
||||
<div className="strategy-detail">
|
||||
<h2 className="strategy-title">中国政府债务/GDP分析</h2>
|
||||
<p className="strategy-description">
|
||||
分析中国政府债务、GDP、债务/GDP比率以及债务利息/GDP比率的走势
|
||||
</p>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">中国政府债务走势</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={chinaDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 1', 'dataMax + 1']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="debt" name="中国政府债务(万亿美元)" stroke="#e6194b" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">中国GDP走势</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={chinaDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 1', 'dataMax + 1']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="gdp" name="中国GDP(万亿美元)" stroke="#3cb44b" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">中国政府债务/GDP走势</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={chinaDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 5', 'dataMax + 5']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="debtToGdp" name="债务/GDP比率(%)" stroke="#4363d8" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chart-section">
|
||||
<h3 className="chart-title">中国政府债务利息/GDP</h3>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={chinaDebtData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="interestToGdp" name="债务利息/GDP比率(%)" stroke="#f58231" strokeWidth={2} activeDot={{ r: 8 }} />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="data-table-container">
|
||||
<h3 className="table-title">详细数据</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>年份</th>
|
||||
<th>政府债务(万亿美元)</th>
|
||||
<th>GDP(万亿美元)</th>
|
||||
<th>债务/GDP(%)</th>
|
||||
<th>债务利息/GDP(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{chinaDebtData.map((row, index) => (
|
||||
<tr key={index}>
|
||||
<td>{row.year}</td>
|
||||
<td>{row.debt.toFixed(1)}</td>
|
||||
<td>{row.gdp.toFixed(1)}</td>
|
||||
<td>{row.debtToGdp.toFixed(1)}</td>
|
||||
<td>{row.interestToGdp.toFixed(1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -403,4 +403,93 @@ main {
|
||||
.article-detail-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.strategy-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.strategy-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Strategy page layout */
|
||||
.strategy-layout {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.strategy-sidebar {
|
||||
width: 250px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.strategy-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.strategy-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.strategy-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);
|
||||
}
|
||||
|
||||
.strategy-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.strategy-item.active {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.strategy-detail {
|
||||
background-color: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.strategy-title {
|
||||
font-size: 1.8rem;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.strategy-description {
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 1.3rem;
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user