st-comp 0.0.45 → 0.0.46

package/src/pages/KlineNew/components/KlineAction/mockApi/index.js

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+export const getKlineDataApi = async(params) => {
+  const res = await axios({
+    method: 'post',
+    headers: {
+      token: '041fd377d5d5efc7e08e2ed5b61b0c8d',
+    },
+    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    data: params,
+  })
+  return res.data.body
+}

package/src/pages/KlineNew/components/KlineAction/utils.js

@@ -0,0 +1,571 @@
+import { stMath } from "st-func";
+
+const defaultConfig = {
+  defaultShowCount: 200, // 默认展示条数
+  addCount: 2000, // 首屏加载条数，滚动加载条数
+  preLoadCount: 800, // 预加载数据条数(用于计算指标线)
+  maxShowCount: 5000, // 一屏最多渲染条数上限
+  gridLeft: 60, // echarts绘图左侧grid距离
+  gridRight: 60, // echarts绘图右侧grid距离
+};
+
+// 格式化配置
+export const formatConfig = (config) => {
+  return {
+    ...defaultConfig,
+    ...config,
+  };
+};
+
+// DOM缩放监视器
+class ResizeListener {
+  constructor(dom, callback) {
+    this.resizeRo = null;
+    this.isFirst = true;
+    this.init(dom, callback);
+  }
+  init(dom, callback) {
+    this.resizeRo = new ResizeObserver(() => {
+      if (this.isFirst) {
+        this.isFirst = null;
+        return;
+      }
+      callback();
+    });
+    this.resizeRo.observe(dom);
+  }
+  dispose() {
+    this.resizeRo.disconnect();
+    this.resizeRo = null;
+  }
+}
+export const resizeListener = (dom, callback) => {
+  return new ResizeListener(dom, callback);
+};
+
+// 防抖
+export const debounce = (callBack, delay = 500, immediate = false) => {
+  let timer = null;
+  return function (...args) {
+    // 清除已有的定时器
+    clearTimeout(timer);
+    if (immediate) {
+      // 如果是立即执行模式，且为第一次触发，则执行函数
+      const runNow = !timer;
+      timer = setTimeout(() => {
+        timer = null;
+      }, delay);
+      if (runNow) {
+        callBack.apply(this, args);
+      }
+    } else {
+      // 非立即执行模式，延迟指定时间后再执行函数
+      timer = setTimeout(() => {
+        callBack.apply(this, args);
+      }, delay);
+    }
+  };
+};
+
+// ------------------生成绘图配置项函数------------------
+// 预警线
+export const getWarningLineGraphic = (data, mainChart) => {
+  // 获取基础的配置项信息
+  const mainChartOption = mainChart.getOption();
+  const gridLeft = mainChartOption.grid[0].left.split("px")[0];
+  const gridRight = mainChartOption.grid[0].right.split("px")[0];
+  // 生成配置项
+  const elements = data.reduce((result, item) => {
+    const { value, text, customInfo } = item;
+    let dragStart = 0; // 记录拖拽开始的位置
+    result.push({
+      type: "group",
+      name: "warningLine",
+      info: customInfo,
+      draggable: "vertical",
+      children: [
+        {
+          type: "line",
+          info: customInfo,
+          shape: {
+            x1: gridLeft, // 开始X坐标
+            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 开始Y坐标
+            x2: mainChart.getWidth() - gridRight, // 结束X坐标
+            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 结束Y坐标
+          },
+          style: {
+            stroke: "#FFF",
+            lineWidth: 1,
+            lineDash: [8, 4],
+          },
+          z: 10,
+        },
+        {
+          type: "text",
+          info: customInfo,
+          x: mainChart.getWidth() - gridRight,
+          y: mainChart.convertToPixel({ yAxisIndex: 0 }, value) - 5,
+          style: {
+            fill: "#FFF",
+            text,
+            stroke: "#000",
+            lineWidth: 1,
+            opacity: 1,
+          },
+          z: 10,
+        },
+      ],
+      // 事件:开始拖拽
+      ondragstart: (params) => {
+        dragStart = params.offsetY; // 记录拖拽开始坐标
+      },
+      // 事件:结束拖拽
+      ondragend: (params) => {
+        /**
+         * 之所以不直接使用dragEnd,是因为echarts拖拽会有偏差问题
+         * 需要使用偏移量才会更加准备,不然会出现画完线渲染位置和拖拽位置不一致
+         */
+        const dragEnd = params.offsetY; // 记录结束拖拽坐标
+        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
+        if (dragInterval !== 0) {
+          // 计算总偏移量
+          const y = dragInterval + mainChart.convertToPixel({ yAxisIndex: 0 }, value);
+          // 计算偏移后对应的Y轴数据
+          const yAxisValue = mainChart.convertFromPixel({ yAxisIndex: 0 }, y);
+          console.log("拖拽结束,可以在这里发送请求,并重查额外画线数据后重新绘制");
+        }
+      },
+    });
+    return result;
+  }, []);
+  return elements;
+};
+// 持仓线
+export const getPositionLineGraphic = (data, mainChart) => {
+  // 获取基础的配置项信息
+  const mainChartOption = mainChart.getOption();
+  const gridLeft = mainChartOption.grid[0].left.split("px")[0];
+  const gridRight = mainChartOption.grid[0].right.split("px")[0];
+  // 生成配置项
+  const elements = data.reduce((result, item) => {
+    const { value, text, customInfo } = item;
+    result.push({
+      type: "group",
+      name: "positionLine",
+      info: customInfo,
+      children: [
+        {
+          type: "line",
+          info: customInfo,
+          shape: {
+            x1: gridLeft, // 开始X坐标
+            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 开始Y坐标
+            x2: mainChart.getWidth() - gridRight, // 结束X坐标
+            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 结束Y坐标
+          },
+          style: {
+            stroke: "#e45d07",
+            lineWidth: 1,
+          },
+          z: 10,
+        },
+        {
+          // 保证文字居中,外层包裹一层group用于定位
+          type: "group",
+          info: customInfo,
+          x: mainChart.getWidth() / 2,
+          y: mainChart.convertToPixel({ yAxisIndex: 0 }, value) - 5,
+          children: [
+            {
+              type: "text",
+              left: "center",
+              style: {
+                fill: "#FFF",
+                text,
+                stroke: "#000",
+                lineWidth: 1,
+                opacity: 0, // 暂时隐藏
+              },
+              z: 10,
+            },
+          ],
+        },
+      ],
+      // 事件:鼠标滑入
+      onmouseover: (params) => {
+        let groupItem = 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();
+      },
+      // 事件:鼠标滑出
+      onmouseout: (params) => {
+        let groupItem = 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();
+      },
+    });
+    return result;
+  }, []);
+  return elements;
+};
+// 条件单线
+export const getConditionLineGraphic = (data, mainChart) => {
+  // 获取基础的配置项信息
+  const mainChartOption = mainChart.getOption();
+  const gridLeft = mainChartOption.grid[0].left.split("px")[0];
+  const gridRight = mainChartOption.grid[0].right.split("px")[0];
+  // 键盘事件函数
+  let handleKeyDown = null;
+  let handleKeyUp = null;
+  // 工具函数: 控制辅线内容展示与否
+  const handleLineShow = (groupItem, show) => {
+    // 条件单辅线-止盈线内容
+    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 elements = data.reduce((result, item) => {
+    const { value, text, profitValue, profitText, lossValue, lossText, customInfo } = item;
+    result.push({
+      type: "group",
+      name: "conditionLine",
+      info: customInfo,
+      children: [
+        // 条件单主线
+        {
+          type: "line",
+          info: customInfo,
+          shape: {
+            x1: gridLeft, // 开始X坐标
+            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 开始Y坐标
+            x2: mainChart.getWidth() - gridRight, // 结束X坐标
+            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, value), // 结束Y坐标
+          },
+          style: {
+            stroke: "#FFF",
+            lineWidth: 1,
+          },
+          z: 10,
+        },
+        {
+          // 保证文字居中,外层包裹一层group用于定位
+          type: "group",
+          info: customInfo,
+          x: mainChart.getWidth() / 2,
+          y: mainChart.convertToPixel({ yAxisIndex: 0 }, value) - 5,
+          children: [
+            {
+              type: "text",
+              left: "center",
+              style: {
+                fill: "#FFF",
+                text,
+                stroke: "#000",
+                lineWidth: 1,
+              },
+              z: 10,
+            },
+          ],
+        },
+        // 条件单辅线-止盈线
+        {
+          type: "line",
+          info: customInfo,
+          shape: {
+            x1: gridLeft, // 开始X坐标
+            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, profitValue), // 开始Y坐标
+            x2: mainChart.getWidth() - gridRight, // 结束X坐标
+            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, profitValue), // 结束Y坐标
+          },
+          style: {
+            stroke: "#b71e44",
+            lineWidth: 1,
+            lineDash: [8, 4],
+            opacity: 0,
+          },
+          z: 10,
+        },
+        {
+          // 保证文字居中,外层包裹一层group用于定位
+          type: "group",
+          info: customInfo,
+          x: mainChart.getWidth() / 2,
+          y: mainChart.convertToPixel({ yAxisIndex: 0 }, profitValue) - 5,
+          children: [
+            {
+              type: "text",
+              left: "center",
+              style: {
+                fill: "#FFF",
+                text: profitText,
+                stroke: "#000",
+                lineWidth: 1,
+                opacity: 0, // 暂时隐藏
+              },
+              z: 10,
+            },
+          ],
+        },
+        // 条件单辅线-止损线
+        {
+          type: "line",
+          info: customInfo,
+          shape: {
+            x1: gridLeft, // 开始X坐标
+            y1: mainChart.convertToPixel({ yAxisIndex: 0 }, lossValue), // 开始Y坐标
+            x2: mainChart.getWidth() - gridRight, // 结束X坐标
+            y2: mainChart.convertToPixel({ yAxisIndex: 0 }, lossValue), // 结束Y坐标
+          },
+          style: {
+            stroke: "#749b66",
+            lineWidth: 1,
+            lineDash: [8, 4],
+            opacity: 0,
+          },
+          z: 10,
+        },
+        {
+          // 保证文字居中,外层包裹一层group用于定位
+          type: "group",
+          info: customInfo,
+          x: mainChart.getWidth() / 2,
+          y: mainChart.convertToPixel({ yAxisIndex: 0 }, lossValue) - 5,
+          children: [
+            {
+              type: "text",
+              left: "center",
+              style: {
+                fill: "#FFF",
+                text: lossText,
+                stroke: "#000",
+                lineWidth: 1,
+                opacity: 0, // 暂时隐藏
+              },
+              z: 10,
+            },
+          ],
+        },
+      ],
+      // 事件:鼠标滑入
+      onmouseover: (params) => {
+        let groupItem = 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") {
+            handleLineShow(groupItem, true);
+          }
+        };
+        handleKeyUp = (e) => {
+          if (e.code === "AltLeft" || e.code === "AltRight") {
+            handleLineShow(groupItem, false);
+          }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+      },
+      // 事件:鼠标滑出
+      onmouseout: (params) => {
+        let groupItem = null;
+        if (params.target.type === "line") {
+          groupItem = params.target.parent;
+        } else if (params.target.type === "tspan") {
+          groupItem = params.target.parent.parent.parent;
+        }
+        // 取消监视Alt键
+        handleLineShow(groupItem, false);
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("keyup", handleKeyUp);
+      },
+    });
+    return result;
+  }, []);
+  return elements;
+};
+// 相关度线
+export const getRelevanceLineSeries = (data) => {
+  return {
+    type: "line",
+    name: "relevance",
+    data,
+    symbol: "none",
+    yAxisIndex: 1,
+    connectNulls: true,
+    itemStyle: {
+      color: "#FFF",
+    },
+    lineStyle: {
+      width: 1,
+    },
+    label: {
+      show: true, // 显示文字
+      position: "top", // 文字位置
+      formatter: (params) => {
+        return `相关度: ${params.data[1]}`;
+      },
+      textStyle: {
+        color: "#FFF", // 文字颜色
+        fontSize: 14, // 文字字体大小
+      },
+    },
+  };
+};
+// 分布统计线
+export const getDistributionLineGraphic = (data, mainChart) => {
+  // 获取基础的配置项信息
+  const mainChartOption = mainChart.getOption();
+  const gridLeft = ~~mainChartOption.grid[0].left.split("px")[0];
+  const gridRight = ~~mainChartOption.grid[0].right.split("px")[0];
+  // 获取当屏K线数据
+  const { startValue, endValue } = mainChartOption.dataZoom[0];
+  const nowScreenKlineData = data.slice(startValue, endValue + 1);
+  // 根据当屏K线数据计算不同收盘价出现的次数
+  const countMap = nowScreenKlineData.reduce((result, item) => {
+    const closePrice = item[4];
+    if (result[closePrice]) {
+      result[closePrice] += 1;
+    } else {
+      result[closePrice] = 1;
+    }
+    return result;
+  }, {});
+  // -----------计算相关展示数值-----------
+  // (1).均值
+  const meanValue =
+    nowScreenKlineData.reduce((result, item) => {
+      return result + item[4];
+    }, 0) / nowScreenKlineData.length;
+  // (2).距均值
+  const disMeanValue = nowScreenKlineData[nowScreenKlineData.length - 1][4] - meanValue;
+  // (3).中值
+  const medianValue = percentToValue(nowScreenKlineData, 1, 50);
+  // (4).标准差
+  const standardDeviationValue = calculateStandardDeviation(nowScreenKlineData);
+  // (5).距均值/标准差
+  const disMeanSDValue = standardDeviationValue ? disMeanValue / standardDeviationValue : 0;
+  // (6).百分位
+  const percentileValue = valueToPercent(nowScreenKlineData, 1, nowScreenKlineData[nowScreenKlineData.length - 1][4]);
+  // -------------------------------------
+  const countLine = Object.keys(countMap).map((key) => {
+    return {
+      type: "line",
+      shape: {
+        x1: mainChart.getWidth() - gridRight - 100 * countMap[key],
+        y1: mainChart.convertToPixel({ yAxisIndex: 0 }, key),
+        x2: mainChart.getWidth() - gridRight,
+        y2: mainChart.convertToPixel({ yAxisIndex: 0 }, key),
+      },
+      style: {
+        stroke: "rgb(124,124,124)",
+        lineWidth: 1,
+      },
+      z: 10,
+    };
+  });
+  const countText = {
+    type: "text",
+    x: gridLeft + 6,
+    y: mainChart.getHeight() - 50,
+    style: {
+      fill: "#FFF",
+      text: `均值: ${stMath.formatValue(meanValue)}\xa0\xa0\xa0\xa0距均值: ${stMath.formatValue(
+        disMeanValue
+      )}\xa0\xa0\xa0\xa0中值: ${stMath.formatValue(medianValue)}\xa0\xa0\xa0\xa0标准差: ${stMath.formatValue(
+        standardDeviationValue
+      )}\xa0\xa0\xa0\xa0距均值/标准差: ${stMath.formatValue(
+        disMeanSDValue
+      )}\xa0\xa0\xa0\xa0百分位: ${stMath.formatValue(percentileValue)}%`,
+      lineWidth: 1,
+      opacity: 1,
+    },
+    z: 10,
+  };
+  const elements = {
+    type: "group",
+    name: "distribution",
+    draggable: false,
+    children: [...countLine, countText],
+  };
+  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
+        )
+      )
+    );
+  }
+};
+// 计算标准差
+const calculateStandardDeviation = (data) => {
+  const numbers = data.map((i) => i[4]);
+  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);
+};