feat(图表): 添加图表缩放同步功能并调整价格差单位为bps

实现价格图表和差价图表的缩放同步功能，确保两者在缩放或平移时保持一致的X轴范围
将价格差单位从百分比(%)调整为基点(bps)，提高数据精度和可读性

src/dashboard/static/index.html

@@ -705,10 +705,16 @@
                                     borderWidth: 2,
                                 },
                                 mode: 'x',
+                                onZoomComplete: function(context) {
+                                    syncChartZoom('price', context.chart);
+                                }
                             },
                             pan: {
                                 enabled: true,
                                 mode: 'x',
+                                onPanComplete: function(context) {
+                                    syncChartZoom('price', context.chart);
+                                }
                             }
                         },
                         tooltip: {
@@ -775,16 +781,16 @@
                     labels: labels,
                     datasets: [
                         {
-                            label: '标记价格差 (%)',
-                            data: data.map(item => item.mark_price_diff_pct),
+                            label: '标记价格差 (bps)',
+                            data: data.map(item => item.mark_price_diff_pct * 100), // 转换为bps
                             borderColor: '#ffce56',
                             backgroundColor: 'rgba(255, 206, 86, 0.1)',
                             tension: 0.1,
                             pointRadius: 0
                         },
                         {
-                            label: '价格差 (%)',
-                            data: data.map(item => item.price_diff_pct),
+                            label: '价格差 (bps)',
+                            data: data.map(item => item.price_diff_pct * 100), // 转换为bps
                             borderColor: '#4bc0c0',
                             backgroundColor: 'rgba(75, 192, 192, 0.1)',
                             tension: 0.1,
@@ -822,10 +828,16 @@
                                     borderWidth: 2,
                                 },
                                 mode: 'x',
+                                onZoomComplete: function(context) {
+                                    syncChartZoom('diff', context.chart);
+                                }
                             },
                             pan: {
                                 enabled: true,
                                 mode: 'x',
+                                onPanComplete: function(context) {
+                                    syncChartZoom('diff', context.chart);
+                                }
                             }
                         },
                         tooltip: {
@@ -846,8 +858,8 @@
                                 },
                                 label: function(context) {
                                     const value = context.parsed.y;
-                                    const unit = context.dataset.yAxisID === 'y1' ? '%' : 'USDT';
-                                    return `${context.dataset.label}: ${value ? value.toFixed(6) : '--'} ${unit}`;
+                                    const unit = context.dataset.yAxisID === 'y1' ? 'bps' : 'USDT';
+                                    return `${context.dataset.label}: ${value ? value.toFixed(2) : '--'} ${unit}`;
                                 },
                                 afterBody: function(context) {
                                     const dataIndex = context[0].dataIndex;
@@ -869,7 +881,7 @@
                             display: true,
                             title: {
                                 display: true,
-                                text: '价格差 (%)'
+                                text: '价格差 (bps)'
                             }
                         },
                         x: {
@@ -948,12 +960,39 @@
             if (priceChart) {
                 priceChart.resetZoom();
             }
+            if (diffChart) {
+                diffChart.resetZoom();
+            }
         }
 
         function resetDiffChartZoom() {
             if (diffChart) {
                 diffChart.resetZoom();
             }
+            if (priceChart) {
+                priceChart.resetZoom();
+            }
+        }
+
+        // 同步图表缩放范围的函数
+        let isSync = false; // 防止无限递归
+        function syncChartZoom(sourceChart, chart) {
+            if (isSync) return;
+            isSync = true;
+            
+            const scales = chart.scales;
+            const xScale = scales.x;
+            const min = xScale.min;
+            const max = xScale.max;
+            
+            // 同步另一个图表的缩放范围
+            if (sourceChart === 'price' && diffChart) {
+                diffChart.zoomScale('x', {min: min, max: max}, 'none');
+            } else if (sourceChart === 'diff' && priceChart) {
+                priceChart.zoomScale('x', {min: min, max: max}, 'none');
+            }
+            
+            setTimeout(() => { isSync = false; }, 100);
         }
     </script>
 </body>