st-comp 0.0.30 → 0.0.31

package/packages/Kline/utils.ts

@@ -1,11 +1,11 @@
-import type { EChartsType, ElementEvent } from 'echarts'
+import type { EChartsType, ElementEvent } from "echarts";
 import type {
   KlineDataType,
   WarningConfigType,
   PositionConfigType,
   ConditionConfigType,
   GraphicEvent,
-} from './type.d.ts'
+} from "./type.d.ts";
 
 // ------------------普通工具函数---------------------
 
@@ -15,10 +15,10 @@ import type {
  * @param {Object} option 配置选项
  */
 export const printConsole = (message: string, option?: { type?: string; color?: string }) => {
-  const { type = 'log', color = 'black' } = option ?? {}
-  let isShow = localStorage.getItem('st-kline-console-show') === 'true' ? true : false
-  isShow && console[type](`%c${message}`, `color:${color}`)
-}
+  const { type = "log", color = "black" } = option ?? {};
+  let isShow = localStorage.getItem("st-kline-console-show") === "true" ? true : false;
+  isShow && console[type](`%c${message}`, `color:${color}`);
+};
 
 /**
  * @description: 格式化数字:保留后三位小数
@@ -26,8 +26,8 @@ export const printConsole = (message: string, option?: { type?: string; color?:
  * @return {*}
  */
 export const formatValue = (value: number) => {
-  return value || value === 0 ? Math.round(value * 1000) / 1000 : null
-}
+  return value || value === 0 ? Math.round(value * 1000) / 1000 : null;
+};
 
 /**
  * @description: 格式化价格:万 || 亿 || 万亿
@@ -36,47 +36,47 @@ export const formatValue = (value: number) => {
  */
 export const formatPrice = (value: number) => {
   if (value >= 1000000000000) {
-    return `${(value / 1000000000000).toFixed(2)}万亿`
+    return `${(value / 1000000000000).toFixed(2)}万亿`;
   } else if (value >= 100000000) {
-    return `${(value / 100000000).toFixed(2)}亿`
+    return `${(value / 100000000).toFixed(2)}亿`;
   } else if (value >= 10000) {
-    return `${(value / 10000).toFixed(2)}万`
+    return `${(value / 10000).toFixed(2)}万`;
   } else {
-    return value.toFixed(2)
+    return value.toFixed(2);
   }
-}
+};
 
 // -----------------额外画线工具函数-------------------
 interface InfoType {
-  info: any
-  config: WarningConfigType | PositionConfigType | ConditionConfigType
-  event: GraphicEvent
+  info: any;
+  config: WarningConfigType | PositionConfigType | ConditionConfigType;
+  event: GraphicEvent;
 }
 
 // 单条线的配置-预警线
 interface warningParamsType {
-  y: number
-  text: string
-  info: InfoType
-  gridLeft: number
-  gridRight: number
-  echartsWidth: number
-  echartsInstance: EChartsType
+  y: number;
+  text: string;
+  info: InfoType;
+  gridLeft: number;
+  gridRight: number;
+  echartsWidth: number;
+  echartsInstance: EChartsType;
 }
 export const getWarningItem = (params: warningParamsType) => {
   // 1.解构入参
-  const { y, text, info, gridLeft, gridRight, echartsWidth, echartsInstance } = params
-  const { config, event } = info
+  const { y, text, info, gridLeft, gridRight, echartsWidth, echartsInstance } = params;
+  const { config, event } = info;
 
-  let dragStart = 0 // 拖拽开始坐标
+  let dragStart = 0; // 拖拽开始坐标
 
   // -----------------------------------return-------------------------------------------
   return {
-    type: 'group',
-    draggable: config.draggable ? 'vertical' : false,
+    type: "group",
+    draggable: config.draggable ? "vertical" : false,
     children: [
       {
-        type: 'line',
+        type: "line",
         info,
         shape: {
           x1: gridLeft,
@@ -92,18 +92,18 @@ export const getWarningItem = (params: warningParamsType) => {
         z: 10,
       },
       {
-        type: 'group',
+        type: "group",
         x: echartsWidth,
         y: y - 5,
         children: [
           {
-            type: 'text',
+            type: "text",
             left: -1 * gridRight,
             info,
             style: {
               fill: config.textColor,
               text,
-              stroke: '#000',
+              stroke: "#000",
               lineWidth: 1,
               opacity: 1,
             },
@@ -115,83 +115,83 @@ export const getWarningItem = (params: warningParamsType) => {
     // 事件:鼠标滑入
     onmouseover: (params: ElementEvent) => {
       if (event.onmouseover instanceof Function) {
-        event.onmouseover(params, info)
+        event.onmouseover(params, info);
       }
     },
     // 事件:鼠标滑出
     onmouseout: (params: ElementEvent) => {
       if (event.onmouseout instanceof Function) {
-        event.onmouseout(params, info)
+        event.onmouseout(params, info);
       }
     },
     // 事件:开始拖拽
     ondragstart: (params: ElementEvent) => {
       if (event.ondragstart instanceof Function && config.draggable) {
-        dragStart = params.offsetY // 记录拖拽开始坐标
-        event.ondragstart(params, info)
+        dragStart = params.offsetY; // 记录拖拽开始坐标
+        event.ondragstart(params, info);
       }
     },
     // 事件:结束拖拽
     ondragend: (params: ElementEvent) => {
       if (event.ondragend instanceof Function && config.draggable) {
-        const dragEnd = params.offsetY // 记录结束拖拽坐标
-        const dragInterval = dragEnd - dragStart // 拖拽偏移量
+        const dragEnd = params.offsetY; // 记录结束拖拽坐标
+        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
         if (dragInterval === 0) {
-          return
+          return;
         }
-        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval)
-        event.ondragend(params, info, yAxisValue)
+        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval);
+        event.ondragend(params, info, yAxisValue);
       }
     },
-  }
-}
+  };
+};
 
 // 单条线的配置-持仓线
 interface positionParamsType {
-  y: number
-  text: string
-  info: InfoType
-  gridLeft: number
-  gridRight: number
-  echartsWidth: number
-  echartsInstance: EChartsType
+  y: number;
+  text: string;
+  info: InfoType;
+  gridLeft: number;
+  gridRight: number;
+  echartsWidth: number;
+  echartsInstance: EChartsType;
 }
 export const getPositionItem = (params: positionParamsType) => {
   // 1.解构入参
-  const { y, text, info, gridLeft, gridRight, echartsWidth, echartsInstance } = params
-  const { config, event } = info
+  const { y, text, info, gridLeft, gridRight, echartsWidth, echartsInstance } = params;
+  const { config, event } = info;
 
-  let dragStart = 0 // 拖拽开始坐标
+  let dragStart = 0; // 拖拽开始坐标
 
   // --------------------默认鼠标滑入/滑出展示事件: 展示持仓线文本--------------------------
   const defaultOnMouseOver = (params: ElementEvent) => {
-    let groupItem: any = null
-    if (params.target.type === 'line') {
-      groupItem = params.target.parent
-    } else if (params.target.type === 'tspan') {
-      groupItem = params.target.parent.parent.parent
+    let groupItem: any = null;
+    if (params.target.type === "line") {
+      groupItem = params.target.parent;
+    } else if (params.target.type === "tspan") {
+      groupItem = params.target.parent.parent.parent;
     }
     // 处理持仓线鼠标滑入时展示
-    groupItem.children()[1].children()[0].animate('style', false).when(200, { opacity: 1 }).start()
-  }
+    groupItem.children()[1].children()[0].animate("style", false).when(200, { opacity: 1 }).start();
+  };
   const defaultOnMouseOut = (params: ElementEvent) => {
-    let groupItem: any = null
-    if (params.target.type === 'line') {
-      groupItem = params.target.parent
-    } else if (params.target.type === 'tspan') {
-      groupItem = params.target.parent.parent.parent
+    let groupItem: any = null;
+    if (params.target.type === "line") {
+      groupItem = params.target.parent;
+    } else if (params.target.type === "tspan") {
+      groupItem = params.target.parent.parent.parent;
     }
     // 处理持仓线鼠标滑出时展示
-    groupItem.children()[1].children()[0].animate('style', false).when(200, { opacity: 0 }).start()
-  }
+    groupItem.children()[1].children()[0].animate("style", false).when(200, { opacity: 0 }).start();
+  };
 
   // -----------------------------------return-------------------------------------------
   return {
-    type: 'group',
-    draggable: config.draggable ? 'vertical' : false, // 是否支持拖拽
+    type: "group",
+    draggable: config.draggable ? "vertical" : false, // 是否支持拖拽
     children: [
       {
-        type: 'line',
+        type: "line",
         info,
         shape: {
           x1: gridLeft,
@@ -206,18 +206,18 @@ export const getPositionItem = (params: positionParamsType) => {
         z: 10,
       },
       {
-        type: 'group',
+        type: "group",
         x: echartsWidth / 2,
         y: y - 5,
         children: [
           {
-            type: 'text',
-            left: 'center',
+            type: "text",
+            left: "center",
             info,
             style: {
               fill: config.textColor,
               text,
-              stroke: '#000',
+              stroke: "#000",
               lineWidth: 1,
               opacity: 0, //隐藏文本
             },
@@ -229,120 +229,120 @@ export const getPositionItem = (params: positionParamsType) => {
     // 事件:鼠标滑入
     onmouseover: (params: ElementEvent) => {
       if (event.onmouseover instanceof Function) {
-        event.onmouseover(params, info)
+        event.onmouseover(params, info);
       } else {
-        defaultOnMouseOver(params)
+        defaultOnMouseOver(params);
       }
     },
     // 事件:鼠标滑出
     onmouseout: (params: ElementEvent) => {
       if (event.onmouseout instanceof Function) {
-        event.onmouseout(params, info)
+        event.onmouseout(params, info);
       } else {
-        defaultOnMouseOut(params)
+        defaultOnMouseOut(params);
       }
     },
     // 事件:开始拖拽
     ondragstart: (params: ElementEvent) => {
       if (event.ondragstart instanceof Function && config.draggable) {
-        dragStart = params.offsetY // 记录拖拽开始坐标
-        event.ondragstart(params, info)
+        dragStart = params.offsetY; // 记录拖拽开始坐标
+        event.ondragstart(params, info);
       }
     },
     // 事件:结束拖拽
     ondragend: (params: ElementEvent) => {
       if (event.ondragend instanceof Function && config.draggable) {
-        const dragEnd = params.offsetY // 记录结束拖拽坐标
-        const dragInterval = dragEnd - dragStart // 拖拽偏移量
+        const dragEnd = params.offsetY; // 记录结束拖拽坐标
+        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
         if (dragInterval === 0) {
-          return
+          return;
         }
-        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval)
-        event.ondragend(params, info, yAxisValue)
+        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval);
+        event.ondragend(params, info, yAxisValue);
       }
     },
-  }
-}
+  };
+};
 
 // 单条线的配置-条件单
 interface conditionParamsType {
-  y: number
-  text: string
-  profitY: number
-  profitText: string
-  lossY: number
-  lossText: string
-  info: InfoType
-  gridLeft: number
-  gridRight: number
-  echartsWidth: number
-  echartsInstance: EChartsType
+  y: number;
+  text: string;
+  profitY: number;
+  profitText: string;
+  lossY: number;
+  lossText: string;
+  info: InfoType;
+  gridLeft: number;
+  gridRight: number;
+  echartsWidth: number;
+  echartsInstance: EChartsType;
 }
 export const getConditionItem = (params: conditionParamsType) => {
   // 1.解构入参
   const { y, text, profitY, profitText, lossY, lossText, info, gridLeft, gridRight, echartsWidth, echartsInstance } =
-    params
-  const { config, event } = info
+    params;
+  const { config, event } = info;
 
-  let dragStart = 0 // 拖拽开始坐标
+  let dragStart = 0; // 拖拽开始坐标
 
   // --------------------默认鼠标滑入/滑出展示事件: alt展示盈亏线---------------------------
   // 键盘按下事件函数
-  let handleKeyDown: any = null
+  let handleKeyDown: any = null;
   // 键盘弹起函数
-  let handleKeyUp: any = null
+  let handleKeyUp: any = null;
   // [展示/隐藏]盈亏线
   const handleProfitLossShow = (groupItem: any, show: boolean) => {
-    groupItem.children()[2]?.animate('style', false).when(200, { opacity: ~~show }).start()
-    groupItem.children()[3].children()[0]?.animate('style', false).when(200, { opacity: ~~show }).start()
-    groupItem.children()[4]?.animate('style', false).when(200, { opacity: ~~show }).start()
-    groupItem.children()[5].children()[0]?.animate('style', false).when(200, { opacity: ~~show }).start()
-  }
+    groupItem.children()[2]?.animate("style", false).when(200, { opacity: ~~show }).start();
+    groupItem.children()[3].children()[0]?.animate("style", false).when(200, { opacity: ~~show }).start();
+    groupItem.children()[4]?.animate("style", false).when(200, { opacity: ~~show }).start();
+    groupItem.children()[5].children()[0]?.animate("style", false).when(200, { opacity: ~~show }).start();
+  };
   // 默认的鼠标滑入事件
   const defaultOnMouseOver = (params: ElementEvent) => {
-    let groupItem: any = null
-    if (params.target.type === 'line') {
-      groupItem = params.target.parent
-    } else if (params.target.type === 'tspan') {
-      groupItem = params.target.parent.parent.parent
+    let groupItem: any = null;
+    if (params.target.type === "line") {
+      groupItem = params.target.parent;
+    } else if (params.target.type === "tspan") {
+      groupItem = params.target.parent.parent.parent;
     }
     // 处理持仓线鼠标滑入+按下alt时展示
-    handleKeyDown = e => {
-      e.preventDefault()
-      if (e.code === 'AltLeft' || e.code === 'AltRight') {
-        handleProfitLossShow(groupItem, true)
+    handleKeyDown = (e) => {
+      e.preventDefault();
+      if (e.code === "AltLeft" || e.code === "AltRight") {
+        handleProfitLossShow(groupItem, true);
       }
-    }
-    handleKeyUp = e => {
-      if (e.code === 'AltLeft' || e.code === 'AltRight') {
-        handleProfitLossShow(groupItem, false)
+    };
+    handleKeyUp = (e) => {
+      if (e.code === "AltLeft" || e.code === "AltRight") {
+        handleProfitLossShow(groupItem, false);
       }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('keyup', handleKeyUp)
-  }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+  };
   // 默认的鼠标滑出事件
   const defaultOnMouseOut = (params: ElementEvent) => {
-    let groupItem: any = null
-    if (params.target.type === 'line') {
-      groupItem = params.target.parent
-    } else if (params.target.type === 'tspan') {
-      groupItem = params.target.parent.parent.parent
+    let groupItem: any = null;
+    if (params.target.type === "line") {
+      groupItem = params.target.parent;
+    } else if (params.target.type === "tspan") {
+      groupItem = params.target.parent.parent.parent;
     }
     // 处理持仓线鼠标滑出时展示
-    handleProfitLossShow(groupItem, false)
-    window.removeEventListener('keydown', handleKeyDown)
-    window.removeEventListener('keyup', handleKeyUp)
-  }
+    handleProfitLossShow(groupItem, false);
+    window.removeEventListener("keydown", handleKeyDown);
+    window.removeEventListener("keyup", handleKeyUp);
+  };
 
   // -----------------------------------return-------------------------------------------
   return {
-    type: 'group',
-    draggable: config.draggable ? 'vertical' : false, // 是否支持拖拽
+    type: "group",
+    draggable: config.draggable ? "vertical" : false, // 是否支持拖拽
     children: [
       // 条件单-主线
       {
-        type: 'line',
+        type: "line",
         info,
         shape: {
           x1: gridLeft,
@@ -358,18 +358,18 @@ export const getConditionItem = (params: conditionParamsType) => {
       },
       // 条件单-文本内容
       {
-        type: 'group',
+        type: "group",
         x: echartsWidth / 2,
         y: y - 5,
         children: [
           {
-            type: 'text',
-            left: 'center',
+            type: "text",
+            left: "center",
             info,
             style: {
               fill: config.textColor, // 填充色
               text: text,
-              stroke: '#000', // 线条颜色
+              stroke: "#000", // 线条颜色
               lineWidth: 1,
               opacity: 1, //直接展示文本
             },
@@ -379,7 +379,7 @@ export const getConditionItem = (params: conditionParamsType) => {
       },
       // 条件单-止盈线
       {
-        type: 'line',
+        type: "line",
         info,
         shape: {
           x1: gridLeft,
@@ -397,18 +397,18 @@ export const getConditionItem = (params: conditionParamsType) => {
       },
       // 条件单-止盈线文本内容
       {
-        type: 'group',
+        type: "group",
         x: echartsWidth / 2,
         y: profitY - 5,
         children: [
           {
-            type: 'text',
-            left: 'center',
+            type: "text",
+            left: "center",
             info,
             style: {
               fill: (config as ConditionConfigType).profitTextColor,
               text: profitText,
-              stroke: '#000',
+              stroke: "#000",
               lineWidth: 1,
               opacity: 0,
             },
@@ -418,7 +418,7 @@ export const getConditionItem = (params: conditionParamsType) => {
       },
       // 条件单-止损线
       {
-        type: 'line',
+        type: "line",
         info,
         shape: {
           x1: gridLeft,
@@ -436,18 +436,18 @@ export const getConditionItem = (params: conditionParamsType) => {
       },
       // 条件单-止损线文本内容
       {
-        type: 'group',
+        type: "group",
         x: echartsWidth / 2,
         y: lossY - 5,
         children: [
           {
-            type: 'text',
-            left: 'center',
+            type: "text",
+            left: "center",
             info,
             style: {
               fill: (config as ConditionConfigType).lossTextColor,
               text: lossText,
-              stroke: '#000',
+              stroke: "#000",
               lineWidth: 1,
               opacity: 0,
             },
@@ -459,40 +459,40 @@ export const getConditionItem = (params: conditionParamsType) => {
     // 事件:鼠标滑入
     onmouseover: (params: ElementEvent) => {
       if (event.onmouseover instanceof Function) {
-        event.onmouseover(params, info)
+        event.onmouseover(params, info);
       } else {
-        defaultOnMouseOver(params)
+        defaultOnMouseOver(params);
       }
     },
     // 事件:鼠标滑出
     onmouseout: (params: ElementEvent) => {
       if (event.onmouseout instanceof Function) {
-        event.onmouseout(params, info)
+        event.onmouseout(params, info);
       } else {
-        defaultOnMouseOut(params)
+        defaultOnMouseOut(params);
       }
     },
     // 事件:开始拖拽
     ondragstart: (params: ElementEvent) => {
       if (event.ondragstart instanceof Function && config.draggable) {
-        dragStart = params.offsetY // 记录拖拽开始坐标
-        event.ondragstart(params, info)
+        dragStart = params.offsetY; // 记录拖拽开始坐标
+        event.ondragstart(params, info);
       }
     },
     // 事件:结束拖拽
     ondragend: (params: ElementEvent) => {
       if (event.ondragend instanceof Function && config.draggable) {
-        const dragEnd = params.offsetY // 记录结束拖拽坐标
-        const dragInterval = dragEnd - dragStart // 拖拽偏移量
+        const dragEnd = params.offsetY; // 记录结束拖拽坐标
+        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
         if (dragInterval === 0) {
-          return
+          return;
         }
-        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval)
-        event.ondragend(params, info, yAxisValue)
+        const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, y + dragInterval);
+        event.ondragend(params, info, yAxisValue);
       }
     },
-  }
-}
+  };
+};
 
 // -----------------点位处理工具函数--------------------
 
@@ -504,26 +504,26 @@ export const getConditionItem = (params: conditionParamsType) => {
  */
 const handleTradeType = (
   data: {
-    direction?: string
-    tradeAction?: string
-    tradeType?: string
+    direction?: string;
+    tradeAction?: string;
+    tradeType?: string;
   },
   type: string
 ) => {
-  const { direction = '', tradeAction = '', tradeType = '' } = data
-  if (type === 'sellBuy') {
-    const key = tradeType ?? direction + tradeAction
+  const { direction = "", tradeAction = "", tradeType = "" } = data;
+  if (type === "sellBuy") {
+    const key = tradeType ?? direction + tradeAction;
     const keyMap = new Map([
-      ['开多', '买'],
-      ['平多', '卖'],
-      ['开空', '卖'],
-      ['平空', '买'],
-    ])
-    return keyMap.get(key)
-  } else if (type === 'openClose') {
-    return tradeType ?? direction + tradeAction
+      ["开多", "买"],
+      ["平多", "卖"],
+      ["开空", "卖"],
+      ["平空", "买"],
+    ]);
+    return keyMap.get(key);
+  } else if (type === "openClose") {
+    return tradeType ?? direction + tradeAction;
   }
-}
+};
 
 /**
  * @description: 返回买卖点配置
@@ -532,30 +532,48 @@ const handleTradeType = (
 const handleSellBuyConfig = (data: any[], originData: KlineDataType) => {
   return data.reduce((result, next) => {
     // 1.获取交易类型
-    const tradeType = handleTradeType(next, 'sellBuy')
+    const tradeType = handleTradeType(next, "sellBuy");
     /**
      * 2.获取标注图标
      * 因为传入参数数据时,已经对数据进行了合并处理,不会出现例如: 两个平空数据于一条K线上,这种情况,所以
      * 简单判断该条K线上是否有多个数据即可判断出是否是买卖同时存在,如果同时存在图标变成T
      */
-    let symbol = 'image://' + new URL(`./images/${tradeType === '买' ? 'buy' : 'sell'}.svg`, import.meta.url).href
+    let symbol = "image://" + new URL(`./images/${tradeType === "买" ? "buy" : "sell"}.svg`, import.meta.url).href;
     if (data.filter((item: any) => item.time === next.time).length > 1) {
-      symbol = 'image://' + new URL('./images/t.svg', import.meta.url).href
+      symbol = "image://" + new URL("./images/t.svg", import.meta.url).href;
     }
     // 3.获取对应Y轴值
-    const originDataItem = originData.find((item: any) => item[0] === next.time) ?? []
-    const yAxisValue = originDataItem[2]
+    const originDataItem = originData.find((item: any) => item[0] === next.time) ?? [];
+    const yAxisValue = originDataItem[2];
+    // 5.连线逻辑处理
+    const markLineTarget =
+      next?.markLineTarget?.map((target: { time: string; name: string; lineStyle: any }) => {
+        const startX = next.time;
+        const startY = yAxisValue + "";
+        const endX = target.time;
+        const endY = originData.find((item: any) => item[0] === target.time)[3];
+        return [
+          {
+            coord: [startX, startY],
+            lineStyle: target.lineStyle,
+          },
+          {
+            coord: [endX, endY],
+          },
+        ];
+      }) ?? null;
     result.push({
       symbol, // 图标
       symbolSize: 25, // 图标大小
       animation: false, // 是否展示动画
-      coord: [next.time + '', yAxisValue], // X轴[时间],Y轴[最高价]
+      coord: [next.time + "", yAxisValue], // X轴[时间],Y轴[最高价]
       symbolRotate: 0, // 旋转角度
-      symbolOffset: [0, '-7'], // 偏移距离
-    })
-    return result
-  }, [])
-}
+      symbolOffset: [0, "-7"], // 偏移距离
+      markLineTarget,
+    });
+    return result;
+  }, []);
+};
 
 /**
  * @description: 返回开平点配置
@@ -564,39 +582,59 @@ const handleSellBuyConfig = (data: any[], originData: KlineDataType) => {
 const handleOpenCloseConfig = (data: any[], originData: KlineDataType) => {
   return data.reduce((result, next, index) => {
     // 1.获取交易类型
-    const tradeType = handleTradeType(next, 'openClose')
+    const tradeType = handleTradeType(next, "openClose");
     // 2.确定位置
-    const position = tradeType === '开多' || tradeType === '开空' ? 'top' : 'bottom'
+    const position = tradeType === "开多" || tradeType === "开空" ? "top" : "bottom";
     // 3.获取对应Y轴值
-    const originDataItem = originData.find((item: any) => item[0] === next.time) ?? []
-    const yAxisValue = position === 'top' ? originDataItem[2] : originDataItem[3]
+    const originDataItem = originData.find((item: any) => item[0] === next.time) ?? [];
+    const yAxisValue = position === "top" ? originDataItem[2] : originDataItem[3];
     // 4.计算偏移量,避免点位重叠
-    let offset = 7
+    let offset = 7;
     offset +=
       data.slice(0, index).filter((item: any) => {
-        const itemTradeType = handleTradeType(item, 'openClose')
-        const itemPosition = itemTradeType === '开多' || itemTradeType === '开空' ? 'top' : 'bottom'
-        return itemPosition === position && item.time === next.time
-      }).length * 7
+        const itemTradeType = handleTradeType(item, "openClose");
+        const itemPosition = itemTradeType === "开多" || itemTradeType === "开空" ? "top" : "bottom";
+        return itemPosition === position && item.time === next.time;
+      }).length * 7;
+    // 5.连线逻辑处理
+    const markLineTarget =
+      next?.markLineTarget?.map((target: { time: string; name: string; lineStyle: any }) => {
+        const startX = next.time;
+        const startY = yAxisValue + "";
+        const endX = target.time;
+        const endY = originData.find((item: any) => item[0] === target.time)[3];
+        return [
+          {
+            coord: [startX, startY],
+            lineStyle: target.lineStyle,
+          },
+          {
+            coord: [endX, endY],
+          },
+        ];
+      }) ?? null;
     result.push({
-      symbol: 'triangle', // 图标
+      symbol: "triangle", // 图标
       symbolSize: [10, 12], // 图标大小
       animation: false, // 是否展示动画
-      coord: [next.time + '', yAxisValue], // X轴[时间],Y轴[最高价||最低价]
-      symbolRotate: position === 'top' ? 180 : 0, //标注旋转角度
-      symbolOffset: [0, `${position === 'top' ? offset * -1 : offset}`], //标注偏移距离
-      itemStyle: { color: position === 'top' ? '#FF0000' : '#389e0d' }, // 图标颜色
+      coord: [next.time + "", yAxisValue], // X轴[时间],Y轴[最高价||最低价]
+      symbolRotate: position === "top" ? 180 : 0, //标注旋转角度
+      symbolOffset: [0, `${position === "top" ? offset * -1 : offset}`], //标注偏移距离
+      itemStyle: { color: position === "top" ? "#FF0000" : "#389e0d" }, // 图标颜色
       // 文本
       label: {
         show: true, // 是否展示
         position,
-        color: '#fff',
-        formatter: `${tradeType} ${position === 'top' ? '+' : '-'} ${next.amount}手 (${next.part}份)`,
+        color: "#fff",
+        formatter: `${tradeType} ${position === "top" ? "+" : "-"} ${next.amount}手 ${
+          next.part ? `(${next.part}份)` : ""
+        }`,
       },
-    })
-    return result
-  }, [])
-}
+      markLineTarget,
+    });
+    return result;
+  }, []);
+};
 
 /**
  * @description: 返回点位配置
@@ -605,30 +643,30 @@ const handleOpenCloseConfig = (data: any[], originData: KlineDataType) => {
  */
 export const handlePoint = (markData, originData: KlineDataType) => {
   return markData.reduce((result, next) => {
-    const { key, data } = next
+    const { key, data } = next;
     // 无数据直接循环下一组数据
-    if (data === null || data.length === 0) return result
+    if (data === null || data.length === 0) return result;
     // 点位数据转换配置项结构
     const configMap = new Map([
       // 买卖点
       [
-        'sellBuy',
+        "sellBuy",
         () => {
-          return handleSellBuyConfig(data, originData)
+          return handleSellBuyConfig(data, originData);
         },
       ],
       // 开平点
       [
-        'openClose',
+        "openClose",
         () => {
-          return handleOpenCloseConfig(data, originData)
+          return handleOpenCloseConfig(data, originData);
         },
       ],
       // 信号点
-      ['signal', () => {}],
-    ])
-    const callBack = configMap.get(key)
-    if (callBack instanceof Function) result.push(...callBack())
-    return result
-  }, [])
-}
+      ["signal", () => {}],
+    ]);
+    const callBack = configMap.get(key);
+    if (callBack instanceof Function) result.push(...callBack());
+    return result;
+  }, []);
+};