st-comp 0.0.30 → 0.0.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.30",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/Kline/index.vue

@@ -112,7 +112,6 @@ const defaultConfig: InConfig = {
     close: true,
     business: true,
     riseAndFall: true,
-    netPosition: false,
   },
   // 动态加载配置
   dynamicLoadConfig: {
@@ -141,7 +140,7 @@ const kLineTips = computed(() => {
     const klineItem = option.value.dataset[0].source.klineData[activeIndex.value];
     // 处理结果
     const result = [];
-    const { open, heigh, low, close, business, riseAndFall, netPosition } = config.value.tipsConfig;
+    const { open, heigh, low, close, business, riseAndFall } = config.value.tipsConfig;
     open && result.push({ label: "开", value: formatValue(klineItem[0]), color: "rgb(153, 153, 153)" });
     heigh && result.push({ label: "高", value: formatValue(klineItem[3]), color: "rgb(153, 153, 153)" });
     low && result.push({ label: "低", value: formatValue(klineItem[2]), color: "rgb(153, 153, 153)" });
@@ -152,10 +151,6 @@ const kLineTips = computed(() => {
       let ratioColor = +ratio === 0.0 ? "white" : +ratio > 0 ? "red" : "#00ff00";
       result.push({ label: "涨跌", value: `${ratio}%`, color: ratioColor });
     }
-    if (netPosition) {
-      const value = props.netPositionData[activeIndex.value] ? formatPrice(props.netPositionData[activeIndex.value] as number) : null
-      value!== null && result.push({ label: "资产持仓净值", value, color: "rgb(153, 153, 153)" });
-    }
     return result;
   }
   return [];

package/packages/Kline/option.ts

@@ -1,5 +1,5 @@
-import formatKlineData from './formatKlineData'
-import type { EChartsType } from 'echarts'
+import formatKlineData from "./formatKlineData";
+import type { EChartsType } from "echarts";
 import type {
   KlineDataType,
   IndicatorConfigType,
@@ -9,8 +9,8 @@ import type {
   PositionDataItem,
   ConditionDataItem,
   GraphicEvent,
-} from './type.d.ts'
-import { formatValue, getWarningItem, getPositionItem, getConditionItem, handlePoint } from './utils'
+} from "./type.d.ts";
+import { formatValue, getWarningItem, getPositionItem, getConditionItem, handlePoint } from "./utils";
 
 /**
  * @description: 格式化K线图配置项
@@ -28,7 +28,7 @@ export const getOption = async (
   config: InConfig,
   netPositionData: any
 ) => {
-  const { totalBarCount, defaultShowBarCount, gridLeft, gridTop, gridRight, gridBottom, zoomLock } = config
+  const { totalBarCount, defaultShowBarCount, gridLeft, gridTop, gridRight, gridBottom, zoomLock } = config;
   /**
    * @todo: 1.数据处理
    * @returns {Array<'YYYY-MM-DD HH:mm:ss'>} time 用于X轴的时间数组
@@ -36,17 +36,17 @@ export const getOption = async (
    * @returns {Array<{时间,开,高,低,收,成交量,成交额}>} originData 源数据K线
    * @returns {Array<{key:'DKX',color:'#FFFFFF',data:[开]}>} indicator 用于渲染line[指标线]
    */
-  const { time, kLine, originData, indicator } = await formatKlineData(klineData, indicatorConfig, totalBarCount)
+  const { time, kLine, originData, indicator } = await formatKlineData(klineData, indicatorConfig, totalBarCount);
   /**
    * @todo: 2.指标线渲染项处理
    */
-  const lineSeries = indicator.map(item => {
-    const { key, data, color } = item
+  const lineSeries = indicator.map((item) => {
+    const { key, data, color } = item;
     return {
       name: key,
-      type: 'line',
+      type: "line",
       silent: true,
-      symbol: 'none',
+      symbol: "none",
       data,
       lineStyle: {
         width: 1,
@@ -54,24 +54,33 @@ export const getOption = async (
       itemStyle: {
         color,
       },
-    }
-  })
+    };
+  });
   /**
    * @todo: 3.标注点位渲染项处理
    */
-  const markPointData = handlePoint(markData, originData)
+  const markPointData = handlePoint(markData, originData);
   const timePointData = markData.reduce((result, next) => {
-    const { data } = next
+    const { data } = next;
     // 无数据直接循环下一组数据
-    if (data === null || data.length === 0) return result
-    result.push(...data)
-    return result
-  }, [])
+    if (data === null || data.length === 0) return result;
+    result.push(...data);
+    return result;
+  }, []);
+  /**
+   * @todo: 4.标注点位连线渲染处理
+  */
+  let markLineData = []
+  markPointData.forEach(item => {
+    if (item.markLineTarget) {
+      markLineData = [...markLineData, ...item.markLineTarget]
+    }
+  })
   // -----return------
   return {
     animation: false,
     dataset: {
-      id: 'data',
+      id: "data",
       source: {
         klineData: kLine,
         indicatorData: indicator,
@@ -84,38 +93,45 @@ export const getOption = async (
       bottom: `${gridBottom}px`,
     },
     tooltip: {
-      trigger: 'axis',
+      trigger: "axis",
       axisPointer: {
-        type: 'cross',
+        type: "cross",
         label: {
           formatter: (data: any) => {
-            const { axisDimension, value } = data
-            if (axisDimension === 'x') {
-              return value
+            const { axisDimension, value } = data;
+            if (axisDimension === "x") {
+              return value;
             } else {
-              return String(formatValue(value))
+              return String(formatValue(value));
             }
           },
         },
       },
-      formatter: params => {
-        let html: null | string = null
-        let body: string = ''
-        params.forEach(item => {
-          timePointData.forEach(i => {
-            if (i.time === item.axisValue) {
-              body += i.tooltip
-            }
-          })
-          if (item.componentSubType === 'candlestick' && body) {
-            html = `<div><span style="font-weight: bold;">${item.axisValue}</span>${body}</div>`
+      formatter: (params) => {
+        let html: null | string = null;
+        let body: string = "";
+        params.forEach((item) => {
+          // 资产持仓净值tooltip渲染逻辑
+          if (item.seriesName === "资产持仓净值" && item.data !== null) {
+            body += `<div>资产持仓净值: ${item.data}</div>`;
           }
-        })
-        return html
+          if (item.componentSubType === "candlestick") {
+            // 买卖点tooltip渲染逻辑
+            timePointData.forEach((i) => {
+              if (i.time === item.axisValue) {
+                body += i.tooltip;
+              }
+            });
+          }
+          if (body) {
+            html = `<div><span style="font-weight: bold;">${item.axisValue}</span>${body}</div>`;
+          }
+        });
+        return html;
       },
     },
     xAxis: {
-      type: 'category',
+      type: "category",
       data: time,
       axisLine: {
         show: true,
@@ -123,8 +139,8 @@ export const getOption = async (
       splitLine: {
         show: true,
         lineStyle: {
-          type: 'dotted',
-          color: '#333',
+          type: "dotted",
+          color: "#333",
         },
       },
       axisLabel: {
@@ -138,19 +154,19 @@ export const getOption = async (
         splitLine: {
           show: true,
           lineStyle: {
-            type: 'dotted',
-            color: '#333',
+            type: "dotted",
+            color: "#333",
           },
         },
         min: (value: any) => {
-          const { min, max } = value
-          const interval = Math.abs((max - min) / 10)
-          return min - interval
+          const { min, max } = value;
+          const interval = Math.abs((max - min) / 10);
+          return min - interval;
         },
         max: (value: any) => {
-          const { min, max } = value
-          const interval = Math.abs((max - min) / 10)
-          return max + interval
+          const { min, max } = value;
+          const interval = Math.abs((max - min) / 10);
+          return max + interval;
         },
         axisLine: {
           show: true,
@@ -160,35 +176,46 @@ export const getOption = async (
           showMaxLabel: false,
         },
       },
-      { 
+      {
         show: false,
-        min: 'dataMin'
-      }
+        min: "dataMin",
+      },
     ],
     dataZoom: [
       {
-        type: 'inside',
+        type: "inside",
         xAxisIndex: [0, 0],
         zoomLock,
-        start: kLine.length >= defaultShowBarCount ? (kLine.length - defaultShowBarCount) / kLine.length * 100 : 0,
-        end: 99.99
+        start: kLine.length >= defaultShowBarCount ? ((kLine.length - defaultShowBarCount) / kLine.length) * 100 : 0,
+        end: 99.99,
         // startValue: kLine.length >= defaultShowBarCount ? kLine.length - defaultShowBarCount : 0,
         // endValue: kLine.length - 1,
       },
     ],
     series: [
       {
-        name: 'k线',
-        type: 'candlestick',
+        name: "k线",
+        type: "candlestick",
         data: kLine,
         markPoint: {
           data: markPointData,
         },
+        markLine: {
+          position: "middle",
+          textStyle: { color: "blue", fontSize: 15 },
+          animation: false,
+          data: markLineData,
+          lineStyle: {
+            width: 3,
+            type: "solid",
+          },
+          symbol: ["none", "none"],
+        },
         itemStyle: {
-          color: 'transparent',
-          color0: '#00FFFF',
-          borderColor: '#FF0000',
-          borderColor0: '#00FFFF',
+          color: "transparent",
+          color0: "#00FFFF",
+          borderColor: "#FF0000",
+          borderColor0: "#00FFFF",
           borderWidth: 1,
         },
         z: 1,
@@ -204,25 +231,25 @@ export const getOption = async (
         itemStyle: {
           color: "#666",
         },
-      }
+      },
     ],
     toolbox: {
       show: false,
     },
     brush: {
-      xAxisIndex: 'all',
-      brushLink: 'all',
+      xAxisIndex: "all",
+      brushLink: "all",
       transformable: false,
       outOfBrush: {
         colorAlpha: 1,
       },
       brushStyle: {
-        color: 'rgba(120,140,180,0)',
-        borderColor: 'rgba(255,255,255,0.4)',
+        color: "rgba(120,140,180,0)",
+        borderColor: "rgba(255,255,255,0.4)",
       },
     },
-  }
-}
+  };
+};
 
 /**
  * @description: 格式化其他画线配置项
@@ -233,38 +260,38 @@ export const getOption = async (
  * @return {graphicType} graphic绘线配置
  */
 export const getLineOption = (data: LineDataType, config: InConfig, echartsInstance: EChartsType) => {
-  const { gridLeft, gridRight, warningConfig, positionConfig, conditionConfig } = config
-  let elements: any = []
+  const { gridLeft, gridRight, warningConfig, positionConfig, conditionConfig } = config;
+  let elements: any = [];
 
-  if ( (echartsInstance as any)?.getModel()?.getComponent ) {
-    const [minValue, maxValue] = (echartsInstance as any).getModel().getComponent('yAxis').axis.scale._extent
+  if ((echartsInstance as any)?.getModel()?.getComponent) {
+    const [minValue, maxValue] = (echartsInstance as any).getModel().getComponent("yAxis").axis.scale._extent;
     // -----数据初始化----
-    let warningData: WarningDataItem[] = []
-    let warningEvent: GraphicEvent = {}
-    let positionData: PositionDataItem[] = []
-    let positionEvent: GraphicEvent = {}
-    let conditionData: ConditionDataItem[] = []
-    let conditionEvent: GraphicEvent = {}
+    let warningData: WarningDataItem[] = [];
+    let warningEvent: GraphicEvent = {};
+    let positionData: PositionDataItem[] = [];
+    let positionEvent: GraphicEvent = {};
+    let conditionData: ConditionDataItem[] = [];
+    let conditionEvent: GraphicEvent = {};
     data.forEach(({ key, data, ...events }) => {
-      if (key === 'warning') {
-        warningData = data as WarningDataItem[]
-        warningEvent = events
-      } else if (key === 'position') {
-        positionData = data as PositionDataItem[]
-        positionEvent = events
-      } else if (key === 'condition') {
-        conditionData = data as ConditionDataItem[]
-        conditionEvent = events
+      if (key === "warning") {
+        warningData = data as WarningDataItem[];
+        warningEvent = events;
+      } else if (key === "position") {
+        positionData = data as PositionDataItem[];
+        positionEvent = events;
+      } else if (key === "condition") {
+        conditionData = data as ConditionDataItem[];
+        conditionEvent = events;
       }
-    })
-  
+    });
+
     // -----处理预警线-----
     if (warningData.length > 0) {
       elements = warningData.reduce((res, item: WarningDataItem) => {
-        const { value, text, info, config } = item
+        const { value, text, info, config } = item;
         if (value > maxValue || value < minValue) {
           // 当前数值超出图表范围，不绘制
-          return res
+          return res;
         }
         const params = {
           y: echartsInstance.convertToPixel({ yAxisIndex: 0 }, value),
@@ -274,18 +301,18 @@ export const getLineOption = (data: LineDataType, config: InConfig, echartsInsta
           gridRight,
           echartsWidth: echartsInstance.getWidth(),
           echartsInstance,
-        }
-        return [...res, getWarningItem(params)]
-      }, elements)
+        };
+        return [...res, getWarningItem(params)];
+      }, elements);
     }
     // -----处理持仓线-----
     if (positionData.length > 0) {
       elements = positionData.reduce((res, item: PositionDataItem) => {
-        const { value, text, info, config } = item
+        const { value, text, info, config } = item;
         // 数值超出图表范围的不绘制, 直接return
         if (value > maxValue || value < minValue) {
           // 当前数值超出图表范围，不绘制
-          return res
+          return res;
         }
         const params = {
           y: echartsInstance.convertToPixel({ yAxisIndex: 0 }, value),
@@ -295,17 +322,17 @@ export const getLineOption = (data: LineDataType, config: InConfig, echartsInsta
           gridRight,
           echartsWidth: echartsInstance.getWidth(),
           echartsInstance,
-        }
-        return [...res, getPositionItem(params)]
-      }, elements)
+        };
+        return [...res, getPositionItem(params)];
+      }, elements);
     }
     // -----处理条件单-----
     if (conditionData.length > 0) {
       elements = conditionData.reduce((res, item: ConditionDataItem) => {
-        const { value, text, profitValue, profitText, lossValue, lossText, info, config } = item
+        const { value, text, profitValue, profitText, lossValue, lossText, info, config } = item;
         // 数值超出图表范围的不绘制, 直接return
         if (value > maxValue || value < minValue) {
-          return res
+          return res;
         }
         const params = {
           y: echartsInstance.convertToPixel({ yAxisIndex: 0 }, value),
@@ -319,12 +346,12 @@ export const getLineOption = (data: LineDataType, config: InConfig, echartsInsta
           gridRight,
           echartsWidth: echartsInstance.getWidth(),
           echartsInstance,
-        }
-        return [...res, getConditionItem(params)]
-      }, elements)
+        };
+        return [...res, getConditionItem(params)];
+      }, elements);
     }
   }
 
   // -----return------
-  return { elements }
-}
+  return { elements };
+};