猪
This commit is contained in:
parent
3a14d3a1a4
commit
982519e701
143
pages/data.js
143
pages/data.js
@ -101,6 +101,62 @@ const usGoldReserveYearly = [
|
||||
{ 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')
|
||||
|
||||
@ -126,6 +182,13 @@ export default function Data() {
|
||||
{ id: 'central-bank-china-gold-yearly', name: '中国黄金储备（年）' },
|
||||
{ id: 'central-bank-us-gold-yearly', name: '美国黄金储备（年）' }
|
||||
]
|
||||
},
|
||||
{
|
||||
group: '商品',
|
||||
items: [
|
||||
{ id: 'commodity-pork-price', name: '猪肉价格' },
|
||||
{ id: 'commodity-sow-inventory', name: '能繁母猪数量' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -462,6 +525,86 @@ export default function Data() {
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user