update

src/hooks/hqchart/candlestick/dataset.ts

@@ -43,7 +43,7 @@ export function useDataset(goodsCode: string, cycleType = ChartCycleType.Minutes
                 endTime: moment(new Date).format('YYYY-MM-DD HH:mm:ss')
             }
         }).then((res) => {
-            cache = res.data.sort((a, b) => moment(a.ts).diff(moment(b.ts)))
+            cache = res.data.reverse()
         }).finally(() => {
             if (cache.length) {
                 callback({
@@ -65,7 +65,7 @@ export function useDataset(goodsCode: string, cycleType = ChartCycleType.Minutes
             const date = Number(moment(e.ts).format('YYYYMMDD'))
             const time = Number(moment(e.ts).format('HHmm'))
             const prerecord = data[i - 1] // 前一条记录
-            const yclose = prerecord ? prerecord.c : e.c
+            const yclose = prerecord ? prerecord.c : 0
             const yfclose = prerecord ? prerecord.s : null
 
             switch (protocol) {
@@ -199,36 +199,54 @@ export function useDataset(goodsCode: string, cycleType = ChartCycleType.Minutes
                 result.push(record)
             }
 
+            // 获取前一条记录
+            const getPreviousItem = (index: number) => {
+                const item = index > 0 ? result[index - 1] : cache[lastIndex - 1]
+                return {
+                    yclose: item?.c ?? 0, // 前收盘
+                    yclearing: item?.s ?? null // 前结算价
+                }
+            }
+
             if ([ChartCycleType.Day, ChartCycleType.Week, ChartCycleType.Month].includes(state.cycleType)) {
                 // https://blog.csdn.net/jones2000/article/details/106064879
-                return result.map((e, i, self) => {
-                    const item = {
+                return result.map((e, i) => {
+                    const { yclose, yclearing } = getPreviousItem(i)
+                    const date = Number(moment(e.ts).format('YYYYMMDD'))
+                    return {
                         symbol: state.symbol,
-                        date: Number(moment(e.ts).format('YYYYMMDD')),
+                        date,
                         price: e.c,
-                        yclose: 0,
+                        yclose,
                         open: e.o,
                         high: e.h,
                         low: e.l,
                         vol: e.tv,
                         clearing: e.s ?? null,
-                        yclearing: <number | null>null,
+                        yclearing,
                         amount: e.tt || null
                     }
-                    // 获取前一条记录
-                    if (i > 0) {
-                        const r = self[i - 1]
-                        item.yclose = r?.c
-                        item.yclearing = r?.s
-                    } else {
-                        const r = cache[lastIndex - 1]
-                        item.yclose = r?.c
-                        item.yclearing = r?.c
-                    }
-                    return item
                 })
             }
-            return handleChartData(networkProtocol.historyMinuteData, result)
+            
+            return result.map((e, i) => {
+                const { yclose } = getPreviousItem(i)
+                const date = Number(moment(e.ts).format('YYYYMMDD'))
+                const time = Number(moment(e.ts).format('HHmm'))
+                return [
+                    date, // 日期
+                    yclose, // 前收盘
+                    e.o || null, // 开盘价
+                    e.h || null, // 最高
+                    e.l || null, // 最低
+                    e.c, // 收盘
+                    e.tv, // 成交量
+                    e.tt || null, // 成交金额
+                    time, // 时间
+                    e.hv || null // 持仓量
+                ]
+            })
+
         }
         return []
     }

src/hooks/hqchart/candlestick/types.ts

@@ -21,6 +21,7 @@ export interface FormatTitleData {
         YClose: number;
         Vol: number;
         Amount: number;
+        YFClose: number | null;
     }
 }
 

src/packages/pc/components/modules/hqchart/candlestick/index.vue

@@ -9,7 +9,7 @@
 import { shallowRef, shallowReactive, watch, computed } from 'vue'
 import { Chart } from 'hqchart'
 import { timerInterceptor } from '@/utils/timer'
-import { changeUnit, handleNumberValue, handlePriceColor } from '@/filters'
+import { changeUnit, handleNumberValue, handlePriceColor, parsePercent } from '@/filters'
 import { ChartCycleType } from '@/constants/chart'
 import { useFuturesStore } from '@/stores'
 import { useDataset } from '@/hooks/hqchart/candlestick/dataset'
@@ -139,7 +139,8 @@ const chartOption = {
             const decimalplace = goods.value?.decimalplace
             // 自定义标题栏，参考源码 DynamicKLineTitlePainting.GetFormatTitle
             paint.GetFormatTitle = (data) => {
-                const { Date, Time, Open, High, Low, Close, Vol, Amount, YClose } = data.Data
+                const { Date, Time, Open, High, Low, Close, Vol, Amount, YClose, YFClose } = data.Data
+                const yclose = YFClose ?? YClose
                 const AryText = [
                     { Text: FormatDateString(Date), Color: paint.DateTimeColor },
                 ]
@@ -147,10 +148,10 @@ const chartOption = {
                     AryText.push({ Text: FormatTimeString(Time), Color: paint.DateTimeColor })
                 }
                 AryText.push(
-                    { Text: '开:' + handleNumberValue(Open.toFixed(decimalplace)), Color: paint.GetColor(Open, YClose) },
-                    { Text: '高:' + handleNumberValue(High.toFixed(decimalplace)), Color: paint.GetColor(High, YClose) },
-                    { Text: '低:' + handleNumberValue(Low.toFixed(decimalplace)), Color: paint.GetColor(Low, YClose) },
-                    { Text: '收:' + handleNumberValue(Close.toFixed(decimalplace)), Color: paint.GetColor(Close, YClose) }
+                    { Text: '开:' + handleNumberValue(Open.toFixed(decimalplace)), Color: paint.GetColor(Open, yclose) },
+                    { Text: '高:' + handleNumberValue(High.toFixed(decimalplace)), Color: paint.GetColor(High, yclose) },
+                    { Text: '低:' + handleNumberValue(Low.toFixed(decimalplace)), Color: paint.GetColor(Low, yclose) },
+                    { Text: '收:' + handleNumberValue(Close.toFixed(decimalplace)), Color: paint.GetColor(Close, yclose) }
                 )
                 if (goods.value?.trademode !== 99) {
                     AryText.push(
@@ -186,21 +187,28 @@ const customHistoryDataStringFormat = () => {
             }
         },
         Width: 140,
+        Height: 0,
         Text: '',
         Operator: function () {
             const { FormatDateString, FormatTimeString } = Chart.IFrameSplitOperator
             const { Data } = this.Value
-            const preValue = Data.YFClose ?? Data.YClose
+            const yclose = Data.YFClose ?? Data.YClose
+            const rise = yclose ? Data.Close - yclose : 0 // 涨跌
+            const increase = rise ? rise / yclose : 0 // 幅度
 
+            this.Height = 165
             this.Text = `<dl class="app-hqchart-tooltip">`
             this.Text += `<dt><span>${FormatDateString(Data.Date)}</span>${Data.Time ? '<span>' + FormatTimeString(Data.Time) + '</span>' : ''}</dt>`
-            this.Text += `<dd><span>开盘:</span><span class="${handlePriceColor(Data.Open, preValue)}">${handleNumberValue(Data.Open.toFixed(decimalplace))}</span></dd>`
-            this.Text += `<dd><span>最高:</span><span class="${handlePriceColor(Data.High, preValue)}">${handleNumberValue(Data.High.toFixed(decimalplace))}</span></dd>`
-            this.Text += `<dd><span>最低:</span><span class="${handlePriceColor(Data.Low, preValue)}">${handleNumberValue(Data.Low.toFixed(decimalplace))}</span></dd>`
-            this.Text += `<dd><span>收盘:</span><span class="${handlePriceColor(Data.Close, preValue)}">${handleNumberValue(Data.Close.toFixed(decimalplace))}</span></dd>`
+            this.Text += `<dd><span>开盘:</span><span class="${handlePriceColor(Data.Open, yclose)}">${handleNumberValue(Data.Open.toFixed(decimalplace))}</span></dd>`
+            this.Text += `<dd><span>最高:</span><span class="${handlePriceColor(Data.High, yclose)}">${handleNumberValue(Data.High.toFixed(decimalplace))}</span></dd>`
+            this.Text += `<dd><span>最低:</span><span class="${handlePriceColor(Data.Low, yclose)}">${handleNumberValue(Data.Low.toFixed(decimalplace))}</span></dd>`
+            this.Text += `<dd><span>收盘:</span><span class="${handlePriceColor(Data.Close, yclose)}">${handleNumberValue(Data.Close.toFixed(decimalplace))}</span></dd>`
+            this.Text += `<dd><span>涨跌:</span><span class="${handlePriceColor(rise)}">${rise.toFixed(decimalplace)}</span></dd>`
+            this.Text += `<dd><span>幅度:</span><span class="${handlePriceColor(increase)}">${parsePercent(increase)}</span></dd>`
             if (goods.value?.trademode !== 99) {
                 this.Text += `<dd><span>数量:</span><span>${changeUnit(Data.Vol)}</span></dd>`
                 this.Text += `<dd><span>金额:</span><span>${changeUnit(Data.Amount)}</span></dd>`
+                this.Height = 210
             }
             this.Text += `</dd>`
             this.Text += `</dl>`