diff --git a/src/components/StockChart/hooks/useKLineChart.ts b/src/components/StockChart/hooks/useKLineChart.ts index 9085c130..c7769081 100644 --- a/src/components/StockChart/hooks/useKLineChart.ts +++ b/src/components/StockChart/hooks/useKLineChart.ts @@ -64,7 +64,7 @@ export const useKLineChart = ( // 全局注册自定义均价线指标(只执行一次) useEffect(() => { try { - registerIndicator(avgPriceIndicator); + registerIndicator(avgPriceIndicator as any); } catch (err) { // 如果已注册会报错,忽略即可 } diff --git a/src/components/StockChart/indicators/avgPriceIndicator.ts b/src/components/StockChart/indicators/avgPriceIndicator.ts index 3c0e44b8..cd4fbed4 100644 --- a/src/components/StockChart/indicators/avgPriceIndicator.ts +++ b/src/components/StockChart/indicators/avgPriceIndicator.ts @@ -5,17 +5,18 @@ * 计算公式:累计成交额 / 累计成交量 */ -import type { Indicator, KLineData } from 'klinecharts'; +import type { KLineData } from 'klinecharts'; -export const avgPriceIndicator: Indicator = { +// 使用部分类型定义,因为 Indicator 类型很复杂 +export const avgPriceIndicator = { name: 'AVG', shortName: 'AVG', - calcParams: [], + calcParams: [] as number[], shouldOhlc: false, // 不显示 OHLC 信息 shouldFormatBigNumber: false, precision: 2, - minValue: null, - maxValue: null, + minValue: null as number | null, + maxValue: null as number | null, figures: [ { @@ -61,33 +62,27 @@ export const avgPriceIndicator: Indicator = { }, /** - * Tooltip 格式化(显示均价 + 涨跌幅) + * 自定义 Tooltip 数据源 + * 符合 IndicatorTooltipData 接口要求 */ 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}%)`; - } + const avgValue = kLineData?.avg; + const lineColor = defaultStyles?.lines?.[0]?.color || '#FF9800'; return { - title: { text: '均价', color: defaultStyles.tooltip.text.color }, - value: { - text: changeText, - color: '#FF9800', - }, + name: 'AVG', + calcParamsText: '', + features: [] as any[], + legends: [ + { + title: { text: '均价: ', color: lineColor }, + value: { + text: avgValue !== undefined ? avgValue.toFixed(2) : '--', + color: lineColor, + }, + }, + ], }; }, + };