From 64c4a0324137a6d0600dac01d47b8aca1c6d5d6f Mon Sep 17 00:00:00 2001
From: cheney <cbed@163.com>
Date: Sun, 5 Apr 2026 07:11:25 +0800
Subject: [PATCH] LPR

---
 pages/data.js | 134 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 130 insertions(+), 4 deletions(-)

diff --git a/pages/data.js b/pages/data.js
index a7c4532..7761cdf 100644
--- a/pages/data.js
+++ b/pages/data.js
@@ -4,7 +4,7 @@ import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
 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-02', oneYear: 1.82, fiveYear: 2.42, tenYear: 2.62 },
   { 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 }
 ]
 
+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() {
   const [selectedIndicator, setSelectedIndicator] = useState('bond-china-treasury')
 
@@ -26,7 +56,14 @@ export default function Data() {
     {
       group: '债券',
       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">
                   <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" />
                       <XAxis dataKey="month" />
                       <YAxis domain={['dataMin - 0.2', 'dataMax + 0.2']} />
@@ -102,7 +139,7 @@ export default function Data() {
                       </tr>
                     </thead>
                     <tbody>
-                      {bondData.map((row, index) => (
+                      {chinaBondData.map((row, index) => (
                         <tr key={index}>
                           <td>{row.month}</td>
                           <td>{row.oneYear.toFixed(2)}</td>
@@ -115,6 +152,95 @@ export default function Data() {
                 </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>
       </main>