From 982519e701e2d4d1b006dcb98a208044b5771dd2 Mon Sep 17 00:00:00 2001
From: cheney <cbed@163.com>
Date: Thu, 9 Apr 2026 21:27:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8C=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/data.js | 143 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 143 insertions(+)

diff --git a/pages/data.js b/pages/data.js
index b908803..828bfc8 100644
--- a/pages/data.js
+++ b/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>