From 8ec4d212c5733522a2702990c442b15502623fdf Mon Sep 17 00:00:00 2001
From: Lxy <windsdreaming@163.com>
Date: Sun, 21 Jun 2026 17:38:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20k=E7=BA=BF=E5=9B=BE=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E6=AD=A3=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/futures_analysis.js | 92 ++++++++++++++++++++++++++++------
 1 file changed, 76 insertions(+), 16 deletions(-)

diff --git a/app/static/futures_analysis.js b/app/static/futures_analysis.js
index 05df242..e2f3156 100644
--- a/app/static/futures_analysis.js
+++ b/app/static/futures_analysis.js
@@ -1362,6 +1362,11 @@ function trRenderDetailKline(data, pair) {
     const values = candles.map(c => [parseFloat(c[1]), parseFloat(c[2]), parseFloat(c[3]), parseFloat(c[4])]);
     const volumes = candles.map(c => [parseInt(c[5]), parseFloat(c[2]) >= parseFloat(c[1]) ? 1 : -1]);
 
+    // 计算MA均线
+    const ma5 = calculateMA(candles, 5);
+    const ma10 = calculateMA(candles, 10);
+    const ma20 = calculateMA(candles, 20);
+
     // 构建买卖标记
     const buyMarkers = [];
     const sellMarkers = [];
@@ -1400,20 +1405,44 @@ function trRenderDetailKline(data, pair) {
             trigger: 'axis',
             axisPointer: { type: 'cross' },
             backgroundColor: 'rgba(10, 15, 25, 0.95)',
-            borderColor: 'rgba(255,255,255,0.1)',
-            textStyle: { color: '#E5E5E7', fontSize: 12 },
+            borderColor: 'rgba(56, 189, 248, 0.2)',
+            textStyle: { color: '#e2e8f0', fontSize: 12 },
+        },
+        axisPointer: {
+            link: [{ xAxisIndex: 'all' }],
+            label: { backgroundColor: '#06b6d4' }
         },
         grid: [
-            { left: '8%', right: '3%', top: '5%', height: '55%' },
-            { left: '8%', right: '3%', top: '68%', height: '22%' },
+            { left: 70, right: 20, top: 10, height: '50%' },
+            { left: 70, right: 20, top: '66%', height: '24%' },
         ],
         xAxis: [
-            { type: 'category', data: dates, gridIndex: 0, axisLine: { lineStyle: { color: '#333' } }, axisLabel: { show: false } },
-            { type: 'category', data: dates, gridIndex: 1, axisLine: { lineStyle: { color: '#333' } }, axisLabel: { color: '#999', fontSize: 10 } },
+            {
+                type: 'category', data: dates, gridIndex: 0, boundaryGap: true,
+                axisLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+                axisLabel: { show: false },
+                splitLine: { show: false },
+            },
+            {
+                type: 'category', data: dates, gridIndex: 1, boundaryGap: true,
+                axisLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
+                axisLabel: { color: '#64748b', fontSize: 10 },
+                splitLine: { show: false },
+            },
         ],
         yAxis: [
-            { scale: true, gridIndex: 0, splitLine: { lineStyle: { color: '#1a1a1a' } }, axisLabel: { color: '#999' } },
-            { scale: true, gridIndex: 1, splitLine: { show: false }, axisLabel: { show: false } },
+            {
+                scale: true, gridIndex: 0,
+                axisLine: { show: false },
+                axisLabel: { color: '#64748b' },
+                splitLine: { show: false },
+            },
+            {
+                scale: true, gridIndex: 1,
+                axisLine: { show: false },
+                axisLabel: { show: false },
+                splitLine: { show: false },
+            },
         ],
         series: [
             {
@@ -1422,14 +1451,14 @@ function trRenderDetailKline(data, pair) {
                 data: values,
                 xAxisIndex: 0, yAxisIndex: 0,
                 itemStyle: {
-                    color: '#FF3B30', color0: '#34C759',
-                    borderColor: '#FF3B30', borderColor0: '#34C759',
+                    color: '#10b981', color0: '#ef4444',
+                    borderColor: '#10b981', borderColor0: '#ef4444',
                 },
                 markPoint: {
                     symbol: 'triangle',
                     symbolSize: 12,
                     data: buyMarkers,
-                    label: { show: true, formatter: '{b}', fontSize: 10, color: '#34C759' },
+                    label: { show: true, formatter: '{b}', fontSize: 10, color: '#10b981' },
                 },
             },
             {
@@ -1438,30 +1467,61 @@ function trRenderDetailKline(data, pair) {
                 data: values,
                 xAxisIndex: 0, yAxisIndex: 0,
                 itemStyle: {
-                    color: '#FF3B30', color0: '#34C759',
-                    borderColor: '#FF3B30', borderColor0: '#34C759',
+                    color: '#10b981', color0: '#ef4444',
+                    borderColor: '#10b981', borderColor0: '#ef4444',
                 },
                 markPoint: {
                     symbol: 'triangle',
                     symbolSize: 12,
                     symbolRotate: 180,
                     data: sellMarkers,
-                    label: { show: true, formatter: '{b}', fontSize: 10, color: '#FF3B30' },
+                    label: { show: true, formatter: '{b}', fontSize: 10, color: '#ef4444' },
                 },
             },
+            {
+                name: 'MA5',
+                type: 'line',
+                data: ma5,
+                xAxisIndex: 0, yAxisIndex: 0,
+                lineStyle: { width: 1, color: '#f59e0b' },
+                symbol: 'none',
+            },
+            {
+                name: 'MA10',
+                type: 'line',
+                data: ma10,
+                xAxisIndex: 0, yAxisIndex: 0,
+                lineStyle: { width: 1, color: '#3b82f6' },
+                symbol: 'none',
+            },
+            {
+                name: 'MA20',
+                type: 'line',
+                data: ma20,
+                xAxisIndex: 0, yAxisIndex: 0,
+                lineStyle: { width: 1, color: '#8b5cf6' },
+                symbol: 'none',
+            },
             {
                 name: '成交量',
                 type: 'bar',
                 xAxisIndex: 1, yAxisIndex: 1,
                 data: volumes.map(v => ({
                     value: v[0],
-                    itemStyle: { color: v[1] > 0 ? 'rgba(255,59,48,0.5)' : 'rgba(52,199,89,0.5)' }
+                    itemStyle: { color: v[1] >= 0 ? 'rgba(16,185,129,0.5)' : 'rgba(239,68,68,0.5)' }
                 })),
             },
         ],
         dataZoom: [
             { type: 'inside', xAxisIndex: [0, 1], start: 0, end: 100 },
-            { type: 'slider', xAxisIndex: [0, 1], bottom: '2%', height: 16, borderColor: '#333', fillerColor: 'rgba(212,167,71,0.15)' },
+            {
+                show: true, type: 'slider', xAxisIndex: [0, 1], bottom: 5, height: 16,
+                borderColor: 'transparent',
+                backgroundColor: 'rgba(15, 20, 30, 0.5)',
+                fillerColor: 'rgba(6, 182, 212, 0.15)',
+                handleStyle: { color: '#06b6d4' },
+                textStyle: { color: '#64748b' },
+            },
         ],
     };