st-comp 0.0.44 → 0.0.45

package/package.json

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

package/packages/Kline/index.vue

@@ -41,6 +41,18 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  relevanceData: {
+    type: Array,
+    default: () => [],
+  },
+  priceTrendData: {
+    type: Array,
+    default: () => [],
+  },
+  priceTrendPercentData: {
+    type: Array,
+    default: () => [],
+  },
   brushRange: {
     type: Array,
     default: () => [],
@@ -123,6 +135,8 @@ const defaultConfig: InConfig = {
   },
   // 是否禁用鼠标滚轮缩放K线,在开启动态后续数据加载时,建议开启,否则会引起datazoom内部缩放拖拽触发后续加载冲突
   zoomLock: false,
+  // 是否启用计算收盘价分布统计功能
+  isOpenDS: false,
 };
 
 /**
@@ -171,10 +185,58 @@ const indicatorTips = computed(() => {
   }
   return [];
 });
+// Tips: 价格趋势[价差定制]
+const priceTrendTips = computed(() => {
+  // 颜色配置
+  const colorList = [
+    "#FFFFFF",
+    "#FFDD00",
+    "#FF00FF",
+    "#00FF00",
+    "#FF6000",
+    "#1677FF",
+    "#7C3CC9",
+    "#FF0000",
+    "#FB9A0E",
+    "#00B7FF",
+  ];
+  // 价格趋势
+  if (props.priceTrendData.length > 0) {
+    const result = [];
+    props.priceTrendData.forEach((item: any, index: number) => {
+      const value = item.data[activeIndex.value] ? formatValue(item.data[activeIndex.value][1]) : null;
+      if (value !== null) {
+        result.push({
+          label: item.name,
+          value: formatValue(item.data[activeIndex.value]?.[1]),
+          color: colorList[index],
+        });
+      }
+    });
+    return result;
+  }
+  // 价格趋势百分比
+  if (props.priceTrendPercentData.length > 0) {
+    const result = [];
+    const chartOption = echartsInstance.getOption()
+    chartOption.series.filter(line => line.name.includes('二腿价格走势百分比图')).forEach((item: any, index: number) => {
+      const value = item.data[activeIndex.value] ? formatValue(item.data[activeIndex.value][1]) : null;
+      if (value !== null) {
+        result.push({
+          label: item.name.split('-')[1],
+          value: `${formatValue(item.data[activeIndex.value]?.[1])}%`,
+          color: colorList[index],
+        });
+      }
+    });
+    return result;
+  }
+  return [];
+});
 
-// 监视: props[klineData, indicator, markData, netPositionData] -> 重绘全部
+// 监视: props[klineData, indicator, markData, netPositionData, relevanceData] -> 重绘全部
 watch(
-  () => [props.klineData, props.indicator, props.markData, props.netPositionData],
+  () => [props.klineData, props.indicator, props.markData, props.netPositionData, props.relevanceData],
   () => {
     draw();
   },
@@ -208,6 +270,26 @@ watch(
     deep: true,
   }
 );
+// 监视: props.priceTrendData - 二腿价格趋势数据 -> 重绘趋势
+watch(
+  () => props.priceTrendData,
+  async () => {
+    draw("priceTrend");
+  },
+  {
+    deep: true,
+  }
+);
+// 监视: props.priceTrendPercentData - 二腿价格趋势百分比数据 -> 重绘趋势百分比
+watch(
+  () => props.priceTrendPercentData,
+  async () => {
+    draw("priceTrendPercent");
+  },
+  {
+    deep: true,
+  }
+);
 
 /**
  * @description: 图表绘制函数
@@ -224,7 +306,8 @@ const draw = async (type?: string) => {
           props.markData,
           props.indicator,
           config.value,
-          props.netPositionData
+          props.netPositionData,
+          props.relevanceData
         );
         const { graphic } = echartsInstance.getOption() ?? { graphic: [] };
         option.value = { ...newOption, graphic };
@@ -271,6 +354,8 @@ const draw = async (type?: string) => {
       async () => {
         await draw("kline");
         await draw("line");
+        await draw("priceTrend");
+        await draw("priceTrendPercent");
         await draw("brush");
       },
     ],
@@ -284,7 +369,8 @@ const draw = async (type?: string) => {
           props.markData,
           props.indicator,
           config.value,
-          props.netPositionData
+          props.netPositionData,
+          props.relevanceData
         );
         const addDataLength =
           newOption.dataset.source.klineData.length - chartOption.dataset[0].source.klineData.length;
@@ -304,9 +390,10 @@ const draw = async (type?: string) => {
           },
           true
         );
+        await draw("priceTrend");
       },
     ],
-    // future-后续数据绘制
+    // future-K线后续数据绘制
     [
       "future",
       async () => {
@@ -316,11 +403,115 @@ const draw = async (type?: string) => {
           props.markData,
           props.indicator,
           config.value,
-          props.netPositionData
+          props.netPositionData,
+          props.relevanceData
         );
         newOption.dataZoom[0].start =
-          ((props.klineData.length - chartOption.dataZoom[0].endValue + chartOption.dataZoom[0].startValue) / props.klineData.length) * 100;
+          ((props.klineData.length - chartOption.dataZoom[0].endValue + chartOption.dataZoom[0].startValue) /
+            props.klineData.length) *
+          100;
         echartsInstance.setOption(newOption, true);
+        await draw("priceTrend");
+      },
+    ],
+    // priceTrend-二腿价格趋势绘制
+    [
+      "priceTrend",
+      () => {
+        if (props.priceTrendData.length === 0) return;
+        const echartsOptions = echartsInstance.getOption();
+        // 颜色配置
+        const colorList = [
+          "#FFFFFF",
+          "#FFDD00",
+          "#FF00FF",
+          "#00FF00",
+          "#FF6000",
+          "#1677FF",
+          "#7C3CC9",
+          "#FF0000",
+          "#FB9A0E",
+          "#00B7FF",
+        ];
+        // 格式化series配置
+        const priceTrendLineSeries = props.priceTrendData.reduce((result, next, index) => {
+          const { name, data } = next;
+          const line = {
+            name: `二腿价格走势图-${name}`,
+            type: "line",
+            data,
+            symbol: "none",
+            yAxisIndex: 1,
+            connectNulls: true,
+            itemStyle: {
+              color: colorList[index],
+            },
+            lineStyle: {
+              type: "dashed", // 虚线
+              width: 1,
+            },
+          };
+          result.push(line);
+          return result;
+        }, []);
+        option.value = { ...echartsOptions, series: [...echartsOptions.series, ...priceTrendLineSeries] };
+        echartsInstance.setOption(option.value, {
+          replaceMerge: ["series"],
+        });
+      },
+    ],
+    // priceTrendPercent-二腿价格趋势百分比绘制-初始绘制
+    [
+      "priceTrendPercent",
+      async () => {
+        if (props.priceTrendPercentData.length === 0) return;
+        const chartOption = echartsInstance.getOption();
+        // 颜色配置
+        const colorList = [
+          "#FFFFFF",
+          "#FFDD00",
+          "#FF00FF",
+          "#00FF00",
+          "#FF6000",
+          "#1677FF",
+          "#7C3CC9",
+          "#FF0000",
+          "#FB9A0E",
+          "#00B7FF",
+        ];
+        // 获取当屏首根K线索引
+        const startIndex = chartOption.dataZoom[0].startValue;
+        // 处理趋势数据(百分比)
+        const handlePriceTrendSeries = props.priceTrendPercentData.reduce((result, next, index) => {
+          const { name, data } = next;
+          const handleData = data.length > config.value.totalBarCount ? data.slice(data.length - config.value.totalBarCount) : data
+          const priceTrendBase = handleData[startIndex][1];
+          const lineData = handleData.map((item) => {
+            return [item[0], ((item[1] - priceTrendBase) / priceTrendBase) * 100];
+          });
+          const line = {
+            name: `二腿价格走势百分比图-${name}`,
+            type: "line",
+            data: lineData,
+            symbol: "none",
+            yAxisIndex: 1,
+            connectNulls: true,
+            itemStyle: {
+              color: colorList[index],
+            },
+            lineStyle: {
+              type: "dashed", // 虚线
+              width: 1,
+            },
+          };
+          result.push(line);
+          return result;
+        }, []);
+        // 填充价格趋势线(避免重复)
+        chartOption.series = [...chartOption.series.filter(line => {
+          return !line.name.includes('二腿价格走势百分比图')
+        }), ...handlePriceTrendSeries];
+        echartsInstance.setOption(chartOption, true);
       },
     ],
   ]);
@@ -444,6 +635,7 @@ const datazoom = async (params: any) => {
   clearTimeout(datazoomTimer);
   datazoomTimer = setTimeout(() => {
     draw("line");
+    draw("priceTrendPercent");
     clearTimeout(datazoomTimer);
     datazoomTimer = null;
   }, datazoomTime);
@@ -633,6 +825,8 @@ onUnmounted(() => {
       <Tips :data="kLineTips" />
       <!-- 指标 -->
       <Tips :data="indicatorTips" />
+      <!-- 价格趋势[价差定制] -->
+      <Tips :data="priceTrendTips" />
     </div>
     <!-- 图表 + 菜单 -->
     <Contextmenu class="st-kline-body" @closeContextMenuCallBack="closeContextMenuCallBack">

package/packages/Kline/option.ts

@@ -1,3 +1,4 @@
+import { stMath } from "st-func";
 import formatKlineData from "./formatKlineData";
 import type { EChartsType } from "echarts";
 import type {
@@ -26,9 +27,11 @@ export const getOption = async (
   markData: any,
   indicatorConfig: IndicatorConfigType,
   config: InConfig,
-  netPositionData: any
+  netPositionData: any[],
+  relevanceData: any[],
 ) => {
-  const { totalBarCount, defaultShowBarCount, maxValueSpan, gridLeft, gridTop, gridRight, gridBottom, zoomLock } = config;
+  const { totalBarCount, defaultShowBarCount, maxValueSpan, gridLeft, gridTop, gridRight, gridBottom, zoomLock } =
+    config;
   /**
    * @todo: 1.数据处理
    * @returns {Array<'YYYY-MM-DD HH:mm:ss'>} time 用于X轴的时间数组
@@ -62,13 +65,13 @@ export const getOption = async (
   const markPointData = handlePoint(markData, originData);
   /**
    * @todo: 4.标注点位连线渲染处理
-  */
-  let markLineData = []
-  markPointData.forEach(item => {
+   */
+  let markLineData = [];
+  markPointData.forEach((item) => {
     if (item.markLineTarget) {
-      markLineData = [...markLineData, ...item.markLineTarget]
+      markLineData = [...markLineData, ...item.markLineTarget];
     }
-  })
+  });
   // -----return------
   return {
     animation: false,
@@ -253,6 +256,32 @@ export const getOption = async (
           color: "#666",
         },
       },
+      {
+        name: "二腿相关度",
+        type: "line",
+        data: relevanceData ?? [],
+        symbol: "none",
+        yAxisIndex: 1,
+        connectNulls: true,
+        itemStyle: {
+          color: "#FFF",
+        },
+        lineStyle: {
+          // type: "dashed", // 虚线
+          width: 2,
+        },
+        label: {
+          show: true, // 显示文字
+          position: "top", // 文字位置
+          formatter: (params: any) => {
+            return `相关度: ${params.data[1]}`;
+          },
+          textStyle: {
+            color: "#FFF", // 文字颜色
+            fontSize: 14, // 文字字体大小
+          },
+        },
+      }
     ],
     toolbox: {
       show: false,
@@ -281,7 +310,7 @@ export const getOption = async (
  * @return {graphicType} graphic绘线配置
  */
 export const getLineOption = (data: LineDataType, config: InConfig, echartsInstance: EChartsType) => {
-  const { gridLeft, gridRight, warningConfig, positionConfig, conditionConfig } = config;
+  const { gridLeft, gridRight, gridBottom, warningConfig, positionConfig, conditionConfig, isOpenDS } = config;
   let elements: any = [];
 
   if ((echartsInstance as any)?.getModel()?.getComponent) {
@@ -371,8 +400,140 @@ export const getLineOption = (data: LineDataType, config: InConfig, echartsInsta
         return [...res, getConditionItem(params)];
       }, elements);
     }
+    // -----处理分布图-----
+    if (isOpenDS) {
+      const option = echartsInstance.getOption() as any;
+      const countKline = option.dataset[0].source.klineData.slice(
+        option.dataZoom[0].startValue,
+        option.dataZoom[0].endValue + 1
+      );
+      // 1.统计它们的收盘价出现的次数
+      const countMap = {};
+      countKline.forEach((item: any) => {
+        if (countMap[item[1]]) {
+          countMap[item[1]] += 1;
+        } else {
+          countMap[item[1]] = 1;
+        }
+      });
+      const lastKlineValue = countKline[countKline.length - 1][1];
+      const meanValue =
+        countKline.reduce((res: number, item: any) => {
+          return res + item[1];
+        }, 0) / countKline.length;
+      const disMeanValue = lastKlineValue - meanValue;
+      const medianValue = percentToValue(countKline, 1, 50);
+      const standardDeviationValue = calculateStandardDeviation(countKline);
+      const disMeanSDValue = standardDeviationValue ? disMeanValue / standardDeviationValue : 0;
+      const percentileValue = valueToPercent(countKline, 1, lastKlineValue);
+      // 2.生成对应的分布图配置样式
+      elements = [
+        ...elements,
+        {
+          type: "group",
+          draggable: false,
+          children: Object.keys(countMap).map((key: any) => {
+            return {
+              type: "line",
+              shape: {
+                x1: echartsInstance.getWidth() - gridRight - 100 * countMap[key],
+                y1: echartsInstance.convertToPixel({ yAxisIndex: 0 }, key),
+                x2: echartsInstance.getWidth() - gridRight,
+                y2: echartsInstance.convertToPixel({ yAxisIndex: 0 }, key),
+              },
+              style: {
+                stroke: "rgb(124,124,124)",
+                lineWidth: 1,
+              },
+              z: 10,
+            };
+          }),
+        },
+        {
+          type: "text",
+          x: gridLeft + 6,
+          y: echartsInstance.getHeight() - gridBottom - 20,
+          style: {
+            fill: "#FFF",
+            text: `均值: ${formatValue(meanValue)}\xa0\xa0\xa0\xa0距均值: ${formatValue(
+              disMeanValue
+            )}\xa0\xa0\xa0\xa0中值: ${formatValue(medianValue)}\xa0\xa0\xa0\xa0标准差: ${formatValue(
+              standardDeviationValue
+            )}\xa0\xa0\xa0\xa0距均值/标准差: ${formatValue(disMeanSDValue)}\xa0\xa0\xa0\xa0百分位: ${formatValue(
+              percentileValue
+            )}%`,
+            lineWidth: 1,
+            opacity: 1,
+          },
+          z: 10,
+        },
+      ];
+    }
   }
 
   // -----return------
   return { elements };
 };
+
+// 根据值计算分位
+const valueToPercent = (data, dataIndex, value) => {
+  const { round, add, subtract, multiply, divide } = stMath;
+  const sortData = data.map((i) => i[dataIndex]).sort((a, b) => a - b);
+  let position = 0;
+  for (let i = 0; i < sortData.length; i++) {
+    if (sortData[i] === value) {
+      // 位置为整数
+      position = i;
+      break;
+    } else if (sortData[i] >= value) {
+      // 位置为小数
+      position = add(i, divide(subtract(sortData[i + 1], sortData[i]), sortData[i]));
+      break;
+    }
+  }
+  return round(divide(multiply(position, 100), data.length + 1));
+};
+// 根据分位计算值
+const percentToValue = (data, dataIndex, percent) => {
+  const { round, add, subtract, multiply, divide } = stMath;
+  const sortData = data.map((i) => i[dataIndex]).sort((a, b) => a - b);
+  const position = multiply(data.length + 1, divide(percent, 100));
+  const positionInterger = Math.floor(position);
+  const positionDecimal = subtract(position, positionInterger);
+  if (positionDecimal === 0) {
+    // 位置为整数
+    return round(sortData[position]);
+  } else {
+    // 位置为小数
+    return round(
+      add(
+        sortData[positionInterger],
+        multiply(
+          subtract(
+            sortData[positionInterger >= data.length - 1 ? positionInterger : positionInterger + 1],
+            sortData[positionInterger]
+          ),
+          positionDecimal
+        )
+      )
+    );
+  }
+};
+// 计算K线数组中数值的标准差
+function calculateStandardDeviation(data) {
+  const numbers = data.map((i) => i[1]);
+  const n = numbers.length;
+  let sum = 0;
+  let squaredSum = 0;
+  // 计算平均值（均值）
+  for (const num of numbers) {
+    sum += num;
+  }
+  const mean = sum / n;
+  // 计算平方和
+  for (const num of numbers) {
+    squaredSum += Math.pow(num - mean, 2);
+  }
+  // 计算并返回标准差
+  return Math.sqrt(squaredSum / n);
+}

package/packages/Kline/type.d.ts

@@ -30,6 +30,7 @@ export interface InConfig {
   tipsConfig: any // Tips展示配置
   dynamicLoadConfig: any // 动态加载历史/后续K线配置
   zoomLock: boolean // 是否禁用滚轮缩放K线
+  isOpenDS: boolean // 是否开启收盘价分布统计功能
 }
 
 //----------------额外画线数据相关TS类型---------------------

package/packages/KlineNew/components/KlineSlide/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="klineSlide" ref="slideChartRef"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+import type { EChartsType } from 'echarts'
+
+let slideChart: EChartsType
+let resizeRo: any // dom元素监听事件
+let slideDataZoomTimer: any = null // 滑动图数据缩放定时器
+const defaultCOnfig = {
+  preLoadDays: 50, // 预加载天数
+  defaultShowDays: 50, // 默认显示天数
+  maxShowDays: 200, // 最大展示天数
+}
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  data: { type: Array, default: () => [] }, // 时间数据
+  config: { type: Object, default: () => {} }, // 配置数据
+})
+
+const slideChartRef = ref<HTMLElement>() // 拖动轴
+
+watch(
+  () => props.data,
+  () => {
+    draw()
+    change(props.data.length - 1 - defaultCOnfig.defaultShowDays, props.data.length - 1)
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  slideChart = echarts.init(slideChartRef.value)
+  addEventListener()
+  draw()
+  change(props.data.length - 1 - defaultCOnfig.defaultShowDays, props.data.length - 1)
+  // 绑定resize事件
+  let isFirst: boolean | null = true
+  resizeRo = new ResizeObserver(() => {
+    if (isFirst) {
+      isFirst = null
+      return
+    }
+    slideChart.resize()
+  })
+  resizeRo.observe(slideChartRef.value)
+})
+
+onUnmounted(() => {
+  slideChart.off("datazoom");
+  slideChart.dispose()
+  resizeRo.disconnect()
+  resizeRo = null
+})
+
+// 绑定事件
+const addEventListener = () => {
+  slideChart.on('datazoom', (params: any) => {
+    if(!params.dataZoomId) return
+    clearTimeout(slideDataZoomTimer)
+    slideDataZoomTimer = setTimeout(() => {
+      const { data } = props
+      const { start, end } = params
+      const startIndex = Math.floor(start * data.length / 100)
+      const endIndex = end === 100 ? data.length - 1 : Math.floor(end * data.length / 100)
+      change(startIndex, endIndex)
+      clearTimeout(slideDataZoomTimer)
+    }, 100)
+  })
+}
+
+// 拖动回调
+const change = (startIndex: number, endIndex: number) => {
+  const { preLoadDays } = defaultCOnfig
+  const data: any = props.data
+  if (data.length === 0) return
+  const startTime = (data[startIndex - preLoadDays < 0 ? 0 : startIndex - preLoadDays][0] as string).split(' ')[0]
+  const showStartTime = (data[startIndex][0] as string).split(' ')[0]
+  const endTime = (data[endIndex + preLoadDays > data.length ? data.length - 1 : endIndex + preLoadDays][0] as string).split(' ')[0]
+  const showEndTime = (data[endIndex][0] as string).split(' ')[0]
+  emit('change', {
+    startTime: `${startTime} 00:00:00`,
+    showStartTime: `${showStartTime} 00:00:00`,
+    endTime: `${endTime} 24:00:00`,
+    showEndTime: `${showEndTime} 24:00:00`,
+  })
+}
+
+const draw = () => {
+  const { data } = props
+  if(data.length === 0) return
+  const xAxisData = data.map((item: any) => item[0].split(' ')[0])
+  const lineData = data.map((item: any) => item[1])
+  slideChart.setOption({
+    grid: {
+      height: 0,
+      left: '80px',
+      right: '80px',
+    },
+    dataZoom: [
+      {
+        show: true,
+        startValue: data.length - 1 - defaultCOnfig.defaultShowDays,
+        endValue: data.length - 1,
+        maxValueSpan: defaultCOnfig.maxShowDays,
+      },
+      {
+        type: 'inside',
+        startValue: data.length - 1 - defaultCOnfig.defaultShowDays,
+        endValue: data.length - 1,
+        maxValueSpan: defaultCOnfig.maxShowDays,
+      }
+    ],
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      show: false,
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: lineData,
+        type: 'line'
+      }
+    ]
+  }, true)
+}
+
+defineExpose({
+  reset: () => {
+    slideChart.dispatchAction({
+      type: 'dataZoom',
+      startValue: props.data.length - 1 - defaultCOnfig.defaultShowDays,
+      endValue: props.data.length - 1,
+    })
+    change(props.data.length - 1 - defaultCOnfig.defaultShowDays, props.data.length - 1)
+  }, // 重置
+  resetSlide: (startTime, endTime) => {
+    let slideStartIndex = -1
+    let slideEndIndex = -1
+    props.data.forEach((item: any, index: number) => {
+      if (slideStartIndex === -1 && item[0] === startTime) {
+        slideStartIndex = index
+      } else if (slideStartIndex === -1 && new Date(item[0]) > new Date(startTime)) {
+        slideStartIndex = index - 1
+      }
+      if (slideEndIndex === -1 && item[0] === endTime) {
+        slideEndIndex = index
+      } else if (slideEndIndex === -1 && new Date(item[0]) > new Date(endTime)) {
+        slideEndIndex = index - 1
+      }
+
+    })
+    slideChart.dispatchAction({
+      type: 'dataZoom',
+      startValue: slideStartIndex,
+      endValue: slideEndIndex
+    })
+  }, // 重置
+})
+</script>
+
+<style lang="scss" scoped>
+.klineSlide {
+  width: 100%;
+  height: 50px;
+}
+</style>