722 lines
30 KiB
JavaScript
722 lines
30 KiB
JavaScript
import { useState, useEffect } from 'react'
|
||
import Head from 'next/head'
|
||
import Navbar from '../components/Navbar'
|
||
import Footer from '../components/Footer'
|
||
import TimeRangePicker from '../components/TimeRangePicker'
|
||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
|
||
|
||
const chinaBondData = [
|
||
{ 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 }
|
||
]
|
||
|
||
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 }
|
||
]
|
||
|
||
// 中国黄金储备月度数据（单位：吨）
|
||
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 }
|
||
]
|
||
|
||
// 猪肉价格数据（单位：元/公斤）
|
||
const porkPriceData = [
|
||
{ month: '2023-01', price: 24.5 },
|
||
{ month: '2023-02', price: 25.2 },
|
||
{ month: '2023-03', price: 26.8 },
|
||
{ month: '2023-04', price: 27.5 },
|
||
{ month: '2023-05', price: 28.3 },
|
||
{ month: '2023-06', price: 29.1 },
|
||
{ month: '2023-07', price: 28.5 },
|
||
{ month: '2023-08', price: 27.8 },
|
||
{ month: '2023-09', price: 26.5 },
|
||
{ month: '2023-10', price: 25.8 },
|
||
{ month: '2023-11', price: 25.2 },
|
||
{ month: '2023-12', price: 24.8 },
|
||
{ month: '2024-01', price: 24.5 },
|
||
{ month: '2024-02', price: 25.1 },
|
||
{ month: '2024-03', price: 25.8 },
|
||
{ month: '2024-04', price: 26.5 },
|
||
{ month: '2024-05', price: 27.2 },
|
||
{ month: '2024-06', price: 27.8 },
|
||
{ month: '2024-07', price: 28.5 },
|
||
{ month: '2024-08', price: 29.2 },
|
||
{ month: '2024-09', price: 28.8 },
|
||
{ month: '2024-10', price: 28.2 },
|
||
{ month: '2024-11', price: 27.5 },
|
||
{ month: '2024-12', price: 26.8 }
|
||
]
|
||
|
||
// 能繁母猪数量数据（单位：万头）
|
||
const sowInventoryData = [
|
||
{ month: '2023-01', inventory: 4321 },
|
||
{ month: '2023-02', inventory: 4356 },
|
||
{ month: '2023-03', inventory: 4389 },
|
||
{ month: '2023-04', inventory: 4423 },
|
||
{ month: '2023-05', inventory: 4456 },
|
||
{ month: '2023-06', inventory: 4489 },
|
||
{ month: '2023-07', inventory: 4523 },
|
||
{ month: '2023-08', inventory: 4556 },
|
||
{ month: '2023-09', inventory: 4589 },
|
||
{ month: '2023-10', inventory: 4623 },
|
||
{ month: '2023-11', inventory: 4656 },
|
||
{ month: '2023-12', inventory: 4689 },
|
||
{ month: '2024-01', inventory: 4723 },
|
||
{ month: '2024-02', inventory: 4756 },
|
||
{ month: '2024-03', inventory: 4789 },
|
||
{ month: '2024-04', inventory: 4823 },
|
||
{ month: '2024-05', inventory: 4856 },
|
||
{ month: '2024-06', inventory: 4889 },
|
||
{ month: '2024-07', inventory: 4923 },
|
||
{ month: '2024-08', inventory: 4956 },
|
||
{ month: '2024-09', inventory: 4989 },
|
||
{ month: '2024-10', inventory: 5023 },
|
||
{ month: '2024-11', inventory: 5056 },
|
||
{ month: '2024-12', inventory: 5089 }
|
||
]
|
||
|
||
export default function Data() {
|
||
const [selectedIndicator, setSelectedIndicator] = useState('bond-china-treasury')
|
||
const [exchangeRateData, setExchangeRateData] = useState([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState(null)
|
||
const [timeRange, setTimeRange] = useState('1m') // 1m: 近一个月, 3m: 近三个月, 1y: 近一年, custom: 自定义
|
||
const [startDate, setStartDate] = useState('')
|
||
const [endDate, setEndDate] = useState('')
|
||
|
||
useEffect(() => {
|
||
if (selectedIndicator === 'central-bank-usd-cny-rate') {
|
||
fetchExchangeRateData()
|
||
}
|
||
}, [selectedIndicator, timeRange, startDate, endDate])
|
||
|
||
const handleTimeRangeChange = (range, start, end) => {
|
||
setTimeRange(range)
|
||
setStartDate(start)
|
||
setEndDate(end)
|
||
}
|
||
|
||
const fetchExchangeRateData = async () => {
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
let url = '/api/exchange-rate'
|
||
|
||
if (timeRange === 'custom' && startDate && endDate) {
|
||
url += `?startDate=${startDate}&endDate=${endDate}`
|
||
} else if (timeRange === '1m') {
|
||
url += '?limit=30'
|
||
} else if (timeRange === '3m') {
|
||
url += '?limit=90'
|
||
} else if (timeRange === '1y') {
|
||
url += '?limit=365'
|
||
}
|
||
|
||
const response = await fetch(url)
|
||
const data = await response.json()
|
||
if (data.success) {
|
||
setExchangeRateData(data.data)
|
||
} else {
|
||
setError(data.message)
|
||
}
|
||
} catch (err) {
|
||
setError('获取汇率数据失败')
|
||
console.error('获取汇率数据失败:', err)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const indicators = [
|
||
{
|
||
group: '债券',
|
||
items: [
|
||
{ id: 'bond-china-treasury', name: '中国国债' },
|
||
{ id: 'bond-us-treasury', name: '美国国债' }
|
||
]
|
||
},
|
||
{
|
||
group: '贷款',
|
||
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: '美国黄金储备（年）' },
|
||
{ id: 'central-bank-usd-cny-rate', name: '人民币兑美元汇率' }
|
||
]
|
||
},
|
||
{
|
||
group: '商品',
|
||
items: [
|
||
{ id: 'commodity-pork-price', name: '猪肉价格' },
|
||
{ id: 'commodity-sow-inventory', name: '能繁母猪数量' }
|
||
]
|
||
}
|
||
]
|
||
|
||
return (
|
||
<div className="container">
|
||
<Head>
|
||
<title>数据 - iBoard</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
</Head>
|
||
|
||
<Navbar />
|
||
|
||
<main>
|
||
<h1 className="title">
|
||
经济数据
|
||
</h1>
|
||
|
||
<p className="description">
|
||
各种经济数据和图表
|
||
</p>
|
||
|
||
<div className="data-layout">
|
||
<div className="data-sidebar">
|
||
{indicators.map((group, groupIndex) => (
|
||
<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 className="data-content">
|
||
{selectedIndicator === 'bond-china-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={chinaBondData} 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="#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>
|
||
{chinaBondData.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 === '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>
|
||
)}
|
||
|
||
{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>
|
||
)}
|
||
|
||
{selectedIndicator === 'central-bank-usd-cny-rate' && (
|
||
<div className="indicator-detail">
|
||
<h2 className="indicator-title">人民币兑美元汇率</h2>
|
||
<p className="indicator-description">展示人民币兑美元汇率的变化趋势</p>
|
||
|
||
{loading ? (
|
||
<div className="loading">加载中...</div>
|
||
) : error ? (
|
||
<div className="error">{error}</div>
|
||
) : (
|
||
<>
|
||
<div className="chart-header">
|
||
<TimeRangePicker
|
||
value={timeRange}
|
||
onChange={handleTimeRangeChange}
|
||
/>
|
||
</div>
|
||
|
||
<div className="chart-container">
|
||
<ResponsiveContainer width="100%" height={500}>
|
||
<LineChart data={exchangeRateData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||
<CartesianGrid strokeDasharray="3 3" />
|
||
<XAxis dataKey="date" />
|
||
<YAxis domain={['dataMin - 0.1', 'dataMax + 0.1']} tickFormatter={(value) => value.toFixed(4)} />
|
||
<Tooltip formatter={(value) => [value.toFixed(4), '汇率']} />
|
||
<Legend />
|
||
<Line type="monotone" dataKey="rate" name="汇率" stroke="#1e88e5" 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>
|
||
{exchangeRateData.map((row, index) => (
|
||
<tr key={index}>
|
||
<td>{row.date}</td>
|
||
<td>{row.rate.toFixed(4)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{selectedIndicator === 'commodity-pork-price' && (
|
||
<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={porkPriceData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||
<CartesianGrid strokeDasharray="3 3" />
|
||
<XAxis dataKey="month" />
|
||
<YAxis domain={['dataMin - 1', 'dataMax + 1']} />
|
||
<Tooltip />
|
||
<Legend />
|
||
<Line type="monotone" dataKey="price" name="猪肉价格(元/公斤)" stroke="#ff6b6b" 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>
|
||
{porkPriceData.map((row, index) => (
|
||
<tr key={index}>
|
||
<td>{row.month}</td>
|
||
<td>{row.price.toFixed(1)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{selectedIndicator === 'commodity-sow-inventory' && (
|
||
<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={sowInventoryData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||
<CartesianGrid strokeDasharray="3 3" />
|
||
<XAxis dataKey="month" />
|
||
<YAxis domain={['dataMin - 50', 'dataMax + 50']} />
|
||
<Tooltip />
|
||
<Legend />
|
||
<Line type="monotone" dataKey="inventory" name="能繁母猪数量(万头)" stroke="#4ecdc4" 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>
|
||
{sowInventoryData.map((row, index) => (
|
||
<tr key={index}>
|
||
<td>{row.month}</td>
|
||
<td>{row.inventory}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
)
|
||
}
|