feat: StockChartModal.tsx 替换 KLine 实现

src/components/StockChart/indicators/avgPriceIndicator.ts

@@ -0,0 +1,93 @@
+/**
+ * 自定义均价线指标
+ *
+ * 用于分时图显示橙黄色均价线
+ * 计算公式：累计成交额 / 累计成交量
+ */
+
+import type { Indicator, KLineData } from 'klinecharts';
+
+export const avgPriceIndicator: Indicator = {
+  name: 'AVG',
+  shortName: 'AVG',
+  calcParams: [],
+  shouldOhlc: false, // 不显示 OHLC 信息
+  shouldFormatBigNumber: false,
+  precision: 2,
+  minValue: null,
+  maxValue: null,
+
+  figures: [
+    {
+      key: 'avg',
+      title: '均价: ',
+      type: 'line',
+    },
+  ],
+
+  /**
+   * 计算均价
+   * @param dataList K线数据列表
+   * @returns 均价数据
+   */
+  calc: (dataList: KLineData[]) => {
+    let totalAmount = 0; // 累计成交额
+    let totalVolume = 0; // 累计成交量
+
+    return dataList.map((kLineData) => {
+      const { close = 0, volume = 0 } = kLineData;
+
+      totalAmount += close * volume;
+      totalVolume += volume;
+
+      const avgPrice = totalVolume > 0 ? totalAmount / totalVolume : close;
+
+      return { avg: avgPrice };
+    });
+  },
+
+  /**
+   * 绘制样式配置
+   */
+  styles: {
+    lines: [
+      {
+        color: '#FF9800', // 橙黄色
+        size: 2,
+        style: 'solid',
+        smooth: true,
+      },
+    ],
+  },
+
+  /**
+   * Tooltip 格式化（显示均价 + 涨跌幅）
+   */
+  createTooltipDataSource: ({ kLineData, indicator, defaultStyles }: any) => {
+    if (!indicator?.avg) {
+      return {
+        title: { text: '均价', color: defaultStyles.tooltip.text.color },
+        value: { text: '--', color: '#FF9800' },
+      };
+    }
+
+    const avgPrice = indicator.avg;
+    const prevClose = kLineData?.prev_close;
+
+    // 计算均价涨跌幅
+    let changeText = `¥${avgPrice.toFixed(2)}`;
+    if (prevClose && prevClose > 0) {
+      const changePercent = ((avgPrice - prevClose) / prevClose * 100).toFixed(2);
+      const changeValue = (avgPrice - prevClose).toFixed(2);
+      changeText = `¥${avgPrice.toFixed(2)} (${changeValue}, ${changePercent}%)`;
+    }
+
+    return {
+      title: { text: '均价', color: defaultStyles.tooltip.text.color },
+      value: {
+        text: changeText,
+        color: '#FF9800',
+      },
+    };
+  },
+};