ma线需要合并在主窗口

code/src/views/FuturesView.vue

@@ -314,7 +314,7 @@ let ro: ResizeObserver | null = null
 // 向左滚动加载更多历史数据的待回调
 let loadMoreCallback: ((bars: any[], noMore: boolean) => void) | null = null
 
-const showMA = ref(true)
+const showMA  = ref(true)
 const showVol = ref(true)
 const crosshairData = ref<any>(null)
 const activeDrawTool = ref('cursor')
@@ -350,6 +350,41 @@ const DRAW_TOOLS: Record<string, string> = {
   text:    'simpleAnnotation',
 }
 
+const KLINE_MA_INDICATOR = {
+  name: 'MA',
+  calcParams: [5, 10, 30],
+  styles: {
+    lines: [
+      { color: '#f0b90b', size: 1 },
+      { color: '#5d9cf5', size: 1 },
+      { color: '#e84d5b', size: 1 },
+    ],
+  },
+}
+const KLINE_VOL_INDICATOR = {
+  name: 'VOL',
+  calcParams: [],
+  styles: {
+    bars: [{ style: 'fill' }, { style: 'fill' }],
+    lines: [
+      { size: 0, color: 'rgba(0,0,0,0)' },
+      { size: 0, color: 'rgba(0,0,0,0)' },
+      { size: 0, color: 'rgba(0,0,0,0)' },
+    ],
+    lastValueMark: { show: false },
+    tooltip: { showRule: 'none' },
+  },
+}
+const KLINE_VOL_PANE = { id: 'vol-pane', height: 80, minHeight: 40 }
+
+function addMaIndicator() {
+  chart?.createIndicator(KLINE_MA_INDICATOR, true, { id: 'candle_pane' })
+}
+
+function addVolIndicator() {
+  chart?.createIndicator(KLINE_VOL_INDICATOR, false, KLINE_VOL_PANE)
+}
+
 let currentBars: any[] = []
 
 const RESOLUTION_PERIOD: Record<string, { type: 'minute' | 'hour' | 'day'; span: number }> = {
@@ -450,25 +485,8 @@ function initChart() {
   })
   if (!chart) return
 
-  if (showMA.value) {
-    chart.createIndicator({
-      name: 'MA',
-      calcParams: [5, 10, 30],
-      styles: { lines: [{ color: '#f0b90b', size: 1 }, { color: '#5d9cf5', size: 1 }, { color: '#e84d5b', size: 1 }] },
-    }, { isStack: false, pane: { id: 'candle_pane' } } as any)
-  }
-  if (showVol.value) {
-
-    chart.createIndicator(
-      { name: 'VOL', calcParams: [], styles: {
-        bars: [{ style: 'fill' }, { style: 'fill' }],
-        lines: [{ size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }],
-        lastValueMark: { show: false },
-        tooltip: { showRule: 'none' },
-      }},
-      { isStack: false, pane: { id: 'vol-pane', height: 80, minHeight: 40 }} as any,
-    )
-  }
+  if (showMA.value) addMaIndicator()
+  if (showVol.value) addVolIndicator()
 
   chart.setSymbol({
     name: displaySymbolNoDash.value,
@@ -547,28 +565,13 @@ function activateDrawTool(tool: string) {
 watch(klines, updateChart)
 watch(showMA, (show) => {
   if (!chart) return
-  if (show) {
-    chart.createIndicator({ name: 'MA', calcParams: [5, 10, 30], styles: { lines: [{ color: '#f0b90b', size: 1 }, { color: '#5d9cf5', size: 1 }, { color: '#e84d5b', size: 1 }] } }, { isStack: true, pane: { id: 'candle_pane' } } as any)
-  } else {
-    chart.removeIndicator({ name: 'MA', paneId: 'candle_pane' })
-  }
+  if (show) addMaIndicator()
+  else chart.removeIndicator({ name: 'MA', paneId: 'candle_pane' })
 })
 watch(showVol, (show) => {
   if (!chart) return
-  if (show) {
-
-    chart.createIndicator(
-      { name: 'VOL', calcParams: [], styles: {
-        bars: [{ style: 'fill' }, { style: 'fill' }],
-        lines: [{ size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }],
-        lastValueMark: { show: false },
-        tooltip: { showRule: 'none' },
-      }},
-      { isStack: false, pane: { id: 'vol-pane', height: 80, minHeight: 40 } } as any,
-    )
-  } else {
-    chart.removeIndicator({ name: 'VOL', paneId: 'vol-pane' })
-  }
+  if (show) addVolIndicator()
+  else chart.removeIndicator({ name: 'VOL', paneId: 'vol-pane' })
 })
 
 // ── 搜索框input selector ──────────────────────────────────────

code/src/views/spot/SpotView.vue

@@ -495,6 +495,42 @@ const DRAW_TOOLS: Record<string, string> = {
   text:    'simpleAnnotation',
 }
 
+const KLINE_MA_INDICATOR = {
+  name: 'MA',
+  calcParams: [5, 10, 30],
+  styles: {
+    lines: [
+      { color: '#f0b90b', size: 1 },
+      { color: '#5d9cf5', size: 1 },
+      { color: '#e84d5b', size: 1 },
+    ],
+  },
+}
+const KLINE_VOL_INDICATOR = {
+  name: 'VOL',
+  calcParams: [],
+  styles: {
+    bars: [{ style: 'fill' }, { style: 'fill' }],
+    lines: [
+      { size: 0, color: 'rgba(0,0,0,0)' },
+      { size: 0, color: 'rgba(0,0,0,0)' },
+      { size: 0, color: 'rgba(0,0,0,0)' },
+    ],
+    lastValueMark: { show: false },
+    tooltip: { showRule: 'none' },
+  },
+}
+const KLINE_VOL_PANE = { id: 'vol-pane', height: 80, minHeight: 40 }
+
+/** MA 叠加在主 K 线窗格（klinecharts v10: isStack=true + candle_pane） */
+function addMaIndicator() {
+  chart?.createIndicator(KLINE_MA_INDICATOR, true, { id: 'candle_pane' })
+}
+
+function addVolIndicator() {
+  chart?.createIndicator(KLINE_VOL_INDICATOR, false, KLINE_VOL_PANE)
+}
+
 const RESOLUTION_PERIOD: Record<string, { type: 'minute' | 'hour' | 'day'; span: number }> = {
   '1':   { type: 'minute', span: 1  },
   '5':   { type: 'minute', span: 5  },
@@ -596,23 +632,8 @@ function initChart() {
   })
   if (!chart) return
 
-  if (showMA.value) {
-    chart.createIndicator({
-      name: 'MA', calcParams: [5, 10, 30],
-      styles: { lines: [{ color: '#f0b90b', size: 1 }, { color: '#5d9cf5', size: 1 }, { color: '#e84d5b', size: 1 }] },
-    }, { isStack: true, pane: { id: 'candle_pane' } } as any)
-  }
-  if (showVol.value) {
-    chart.createIndicator(
-      { name: 'VOL', calcParams: [], styles: {
-        bars: [{ style: 'fill' }, { style: 'fill' }],
-        lines: [{ size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }],
-        lastValueMark: { show: false },
-        tooltip: { showRule: 'none' },
-      }},
-      { isStack: false, pane: { id: 'vol-pane', height: 80, minHeight: 40 } } as any,
-    )
-  }
+  if (showMA.value) addMaIndicator()
+  if (showVol.value) addVolIndicator()
 
   const dp = symInfo.value?.pricePrecision ?? 2
   chart.setSymbol({ name: apiSymbol.value, pricePrecision: dp, volumePrecision: 4 })
@@ -667,26 +688,13 @@ function zoomOut() { (chart as any)?.zoomAtCoordinate?.(0.8) }
 // ── MA / VOL toggle ───────────────────────────────────
 watch(showMA, (show) => {
   if (!chart) return
-  if (show) {
-    chart.createIndicator({ name: 'MA', calcParams: [5, 10, 30], styles: { lines: [{ color: '#f0b90b', size: 1 }, { color: '#5d9cf5', size: 1 }, { color: '#e84d5b', size: 1 }] } }, { isStack: true, pane: { id: 'candle_pane' } } as any)
-  } else {
-    chart.removeIndicator({ name: 'MA', paneId: 'candle_pane' })
-  }
+  if (show) addMaIndicator()
+  else chart.removeIndicator({ name: 'MA', paneId: 'candle_pane' })
 })
 watch(showVol, (show) => {
   if (!chart) return
-  if (show) {
-    chart.createIndicator(
-      { name: 'VOL', calcParams: [], styles: {
-        bars: [{ style: 'fill' }, { style: 'fill' }],
-        lines: [{ size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }, { size: 0, color: 'rgba(0,0,0,0)' }],
-        lastValueMark: { show: false }, tooltip: { showRule: 'none' },
-      }},
-      { isStack: false, pane: { id: 'vol-pane', height: 80, minHeight: 40 } } as any,
-    )
-  } else {
-    chart.removeIndicator({ name: 'VOL', paneId: 'vol-pane' })
-  }
+  if (show) addVolIndicator()
+  else chart.removeIndicator({ name: 'VOL', paneId: 'vol-pane' })
 })
 
 // ── Coin ext info ─────────────────────────────────────