st-comp 0.0.146 → 0.0.147

package/packages/Kline/index.vue

@@ -1,891 +0,0 @@
-<script setup lang="ts">
-import * as echarts from "echarts";
-import { ref, computed, watch, onMounted, onUnmounted } from "vue";
-import Tips from "./components/Tips/index.vue";
-import Contextmenu from "./components/Contextmenu/index.vue";
-import { getOption, getLineOption } from "./option";
-import { printConsole, formatValue, formatPrice } from "./utils";
-import type { EChartsType, EChartsOption, ECElementEvent, DataZoomComponentOption } from "echarts";
-import type { KlineDataType, LineDataType, InConfig, MenuDataType } from "./type.d.ts";
-
-/**
- * 组件接收参数
- * @param {Object} indicator 指标线
- * @param {KlineDataType} klineData K线数据
- * @param {Array} markData 标注点位数据 [开平点, 买卖点, 信号点,...]
- * @param {Array} lineData K线额外画线数据 [预警线, 持仓线, 条件单, ...]
- * @param {Array} brushRange 区域刷选范围数据
- * @param {Array} defaultMenuData 菜单项数据
- * @param {Boolean} isSelect 组件是否被选中
- *
- * @param {InConfig} config 其他配置项数据
- */
-const props = defineProps({
-  indicator: {
-    type: Object,
-    default: () => ({}),
-  },
-  klineData: {
-    type: Array,
-    default: () => [],
-  },
-  markData: {
-    type: Array,
-    default: () => [],
-  },
-  lineData: {
-    type: Array,
-    default: () => [],
-  },
-  netPositionData: {
-    type: Array,
-    default: () => [],
-  },
-  relevanceData: {
-    type: Array,
-    default: () => [],
-  },
-  priceTrendData: {
-    type: Array,
-    default: () => [],
-  },
-  priceTrendPercentData: {
-    type: Array,
-    default: () => [],
-  },
-  brushRange: {
-    type: Array,
-    default: () => [],
-  },
-  defaultMenuData: {
-    type: Array,
-    default: () => [],
-  },
-  isSelect: {
-    type: Boolean,
-    default: () => false,
-  },
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-/**
- * K线功能默认配置
- * @param {Number} totalBarCount k线总条数
- * @param {Number} defaultShowBarCount k线默认展示条数
- * @param {Number} preBarCount k线预加载条数，用于计算指标线
- * ---------------------------------------------------------
- * @param {Number} gridLeft k线组件grid: left
- * @param {Number} gridTop k线组件grid: top
- * @param {Number} gridRight k线组件grid: right
- * @param {Number} gridBottom k线组件grid: bottom
- * ---------------------------------------------------------
- * @param {Object} warningConfig 预警线配置
- * @param {Object} positionConfig 持仓线配置
- * @param {Object} conditionConfig 条件单配置
- */
-const defaultConfig: InConfig = {
-  totalBarCount: 2000,
-  defaultShowBarCount: 200,
-  preBarCount: 800,
-  maxValueSpan: 10000,
-  gridLeft: 60,
-  gridTop: 0,
-  gridRight: 60,
-  gridBottom: 30,
-  // 预警线配置
-  warningConfig: {
-    draggable: false,
-    lineColor: "#fff",
-    textColor: "#fff",
-  },
-  // 持仓线配置
-  positionConfig: {
-    draggable: false,
-    lineColor: "#e45d07",
-    textColor: "#fff",
-  },
-  // 条件单配置
-  conditionConfig: {
-    draggable: false,
-    lineColor: "#fff",
-    textColor: "#fff",
-    profitLineColor: "#b71e44",
-    profitTextColor: "#fff",
-    lossLineColor: "#749b66",
-    lossTextColor: "#fff",
-  },
-  // Tips配置
-  tipsConfig: {
-    open: true,
-    heigh: true,
-    low: true,
-    close: true,
-    business: true,
-    riseAndFall: true,
-  },
-  // 动态加载配置
-  dynamicLoadConfig: {
-    historyVisible: false,
-    historyLoadCallBack: () => {},
-    futureVisible: false,
-    futureLoadCallBack: () => {},
-  },
-  // 是否禁用鼠标滚轮缩放K线,在开启动态后续数据加载时,建议开启,否则会引起datazoom内部缩放拖拽触发后续加载冲突
-  zoomLock: false,
-  // 是否启用计算收盘价分布统计功能
-  isOpenDS: false,
-};
-
-/**
- * @description: 合并后的功能配置项
- */
-const config: { value: InConfig } = computed(() => {
-  return { ...defaultConfig, ...props.config };
-});
-
-const option = ref<any>(null); // 处理后的echarts配置
-const activeIndex = ref(-1); // 当前鼠标激活的数据索引
-
-// Tips: [开, 收, 低, 高, 成交额, 昨收]
-const kLineTips = computed(() => {
-  if (option.value && option.value.dataset[0]?.source?.klineData[activeIndex.value]) {
-    const klineItem = option.value.dataset[0].source.klineData[activeIndex.value];
-    // 处理结果
-    const result = [];
-    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)" });
-    close && result.push({ label: "收", value: formatValue(klineItem[1]), color: "rgb(153, 153, 153)" });
-    business && result.push({ label: "额", value: formatPrice(klineItem[4]), color: "rgb(153, 153, 153)" });
-    if (riseAndFall) {
-      let ratio = (((klineItem[1] - klineItem[5]) / klineItem[1]) * 100).toFixed(2);
-      let ratioColor = +ratio === 0.0 ? "white" : +ratio > 0 ? "red" : "#00ff00";
-      result.push({ label: "涨跌", value: `${ratio}%`, color: ratioColor });
-    }
-    return result;
-  }
-  return [];
-});
-// Tips: 指标
-const indicatorTips = computed(() => {
-  if (option.value && option.value.dataset[0]?.source?.indicatorData) {
-    return option.value.dataset[0].source.indicatorData.reduce((result: any, next: any) => {
-      next.data[activeIndex.value] &&
-        result.push({
-          label: next.key,
-          value: formatValue(next.data[activeIndex.value]),
-          color: next.color,
-        });
-      return result;
-    }, []);
-  }
-  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, relevanceData] -> 重绘全部
-watch(
-  () => [props.klineData, props.indicator, props.markData, props.netPositionData, props.relevanceData],
-  () => {
-    draw();
-  },
-  {
-    deep: true,
-  }
-);
-// 监视: props.lineData - 额外画线数据 -> 重新绘制额外线
-watch(
-  () => props.lineData,
-  async () => {
-    printConsole("st-kline组件消息:props.lineData监控,额外画线数据发生改变,重绘->line", {
-      color: "red",
-    });
-    draw("line");
-  },
-  {
-    deep: true,
-  }
-);
-// 监视: props.brushRange - 区域刷选数据 -> 重新刷选
-watch(
-  () => props.brushRange,
-  async () => {
-    printConsole("st-kline组件消息:props.brushRange监控,区域刷选数据发生改变,重绘->brush", {
-      color: "red",
-    });
-    draw("brush");
-  },
-  {
-    deep: true,
-  }
-);
-// 监视: props.priceTrendData - 二腿价格趋势数据 -> 重绘趋势
-watch(
-  () => props.priceTrendData,
-  async () => {
-    draw("priceTrend");
-  },
-  {
-    deep: true,
-  }
-);
-// 监视: props.priceTrendPercentData - 二腿价格趋势百分比数据 -> 重绘趋势百分比
-watch(
-  () => props.priceTrendPercentData,
-  async () => {
-    draw("priceTrendPercent");
-  },
-  {
-    deep: true,
-  }
-);
-
-/**
- * @description: 图表绘制函数
- * @param {?String} type 绘制类型[Kline-K线,line-额外线条,brush-区域刷选,不传-全部]
- */
-const draw = async (type?: string) => {
-  const callBackMap = new Map([
-    // kline-K线绘制
-    [
-      "kline",
-      async () => {
-        const newOption = await getOption(
-          props.klineData as KlineDataType,
-          props.markData,
-          props.indicator,
-          config.value,
-          props.netPositionData,
-          props.relevanceData
-        );
-        const { graphic } = echartsInstance.getOption() ?? { graphic: [] };
-        option.value = { ...newOption, graphic };
-        echartsInstance.setOption(option.value, true);
-        printConsole("st-kline组件消息:K线绘制完毕-draw", { color: "green" });
-      },
-    ],
-    // line-额外线条绘制
-    [
-      "line",
-      () => {
-        const echartsOptions = echartsInstance.getOption();
-        const graphic = getLineOption(props.lineData as LineDataType, config.value, echartsInstance);
-        option.value = { ...echartsOptions, graphic };
-        echartsInstance.setOption(option.value, {
-          replaceMerge: ["graphic"],
-        });
-        printConsole("st-kline组件消息:额外画线绘制完毕-draw", { color: "green" });
-      },
-    ],
-    // brush-区域刷选
-    [
-      "brush",
-      () => {
-        const { brushRange } = props;
-        if (brushRange instanceof Array && brushRange.length > 0) {
-          echartsInstance.dispatchAction({
-            type: "brush",
-            areas: [
-              {
-                brushType: "lineX",
-                coordRange: [brushRange[0] + "", brushRange[1] + ""],
-                xAxisIndex: 0,
-              },
-            ],
-          });
-          printConsole("st-kline组件消息:区域刷选绘制完毕-draw", { color: "green" });
-        }
-      },
-    ],
-    // 全部绘制
-    [
-      undefined,
-      async () => {
-        await draw("kline");
-        await draw("line");
-        await draw("priceTrend");
-        await draw("priceTrendPercent");
-        await draw("brush");
-      },
-    ],
-    // history-K线历史数据绘制
-    [
-      "history",
-      async () => {
-        const chartOption = echartsInstance.getOption();
-        const newOption = await getOption(
-          props.klineData as KlineDataType,
-          props.markData,
-          props.indicator,
-          config.value,
-          props.netPositionData,
-          props.relevanceData
-        );
-        const addDataLength =
-          newOption.dataset.source.klineData.length - chartOption.dataset[0].source.klineData.length;
-        echartsInstance.setOption(
-          {
-            ...newOption,
-            dataZoom: [
-              {
-                type: "inside",
-                xAxisIndex: [0, 0],
-                zoomLock: config.value.zoomLock,
-                maxValueSpan: config.value.maxValueSpan,
-                startValue: chartOption.dataZoom[0].startValue + addDataLength,
-                endValue: chartOption.dataZoom[0].endValue + addDataLength,
-              },
-            ],
-          },
-          true
-        );
-        await draw("priceTrend");
-      },
-    ],
-    // future-K线后续数据绘制
-    [
-      "future",
-      async () => {
-        const chartOption = echartsInstance.getOption();
-        const newOption = await getOption(
-          props.klineData as KlineDataType,
-          props.markData,
-          props.indicator,
-          config.value,
-          props.netPositionData,
-          props.relevanceData
-        );
-        newOption.dataZoom[0].start =
-          ((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);
-      },
-    ],
-  ]);
-  const callBack = callBackMap.get(type);
-  if (callBack instanceof Function) {
-    await callBack();
-  }
-};
-
-//----------------------------右键菜单功能相关----------------------------------
-const cursorPenVisible = ref(false); // 画笔模式开关
-
-const menuData = ref<MenuDataType>([]);
-
-/**
- * @description: 点击菜单项
- * @param {Object} item 菜单项的数据
- */
-const menuClick = (item: any) => {
-  const { callBack } = item;
-  callBack instanceof Function && callBack(echartsInstance, cursorPenVisible);
-};
-
-/**
- * @description: 菜单关闭的回调
- * @todo: 进行菜单内容的初始化
- */
-const closeContextMenuCallBack = () => {
-  menuData.value = props.defaultMenuData as MenuDataType;
-};
-
-//----------------------------Echarts基座-------------------------------
-const echartsRef = ref<HTMLElement>();
-let echartsInstance: EChartsType; // echarts实例
-let chartDomObserver: any; // 监视图表DOM变化
-
-/**
- * @description: echarts数据高亮回调
- * @param {any} data echarts数据
- * @param {EChartsType} chart echarts实例
- */
-const highlight = (data: any, chart: EChartsType) => {
-  if (data) {
-    // 图表内部移动
-    activeIndex.value = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
-  } else {
-    // 移出图表
-    const chartOptions: EChartsOption = chart.getOption() as EChartsOption;
-    if (chartOptions.dataZoom instanceof Array) {
-      activeIndex.value = chartOptions.dataZoom[0].endValue as number;
-    }
-  }
-};
-
-/**
- * @description: echarts数据缩放的相关参数
- * @param {any} datazoomTimer 缩放回调函数的延时器
- * @param {Number} datazoomTime 缩放回调函数的延时器的时间
- * @param {Function} datazoom 数据缩放的回调函数
- *
- * 判断具体是拖拽,还是缩放的逻辑
- * 根据start~end的差值前后是否变动
- * 因为拖拽时,他们的差值是恒定的,缩放时是会变动
- */
-let datazoomTimer: any = null;
-const datazoomTime: number = 300;
-let historyIsLoading = false;
-let historyIsAllLoad = ref(false);
-let futureIsLoading = false;
-let futureIsAllLoad = ref(false);
-const datazoom = async (params: any) => {
-  // 执行[方向键]时,返回的是startValue和endValue
-  // 执行[鼠标]时,返回的是batch
-  /**
-   * @description: 历史数据动态加载渲染逻辑
-   * 前置条件:
-   * 1.允许开启历史动态加载
-   * 2.如果剩余K线根数不足100根
-   * 3.没有正在加载历史数据
-   * 4.历史数据并未已全部获取
-   */
-  // 获取左侧剩余K线根数
-  const historyLength = params.batch ? params.batch[0].start * config.value.totalBarCount : params.startValue;
-  if (
-    config.value.dynamicLoadConfig.historyVisible &&
-    historyLength <= 100 &&
-    !historyIsLoading &&
-    !historyIsAllLoad.value
-  ) {
-    historyIsLoading = true;
-    await config.value.dynamicLoadConfig.historyLoadCallBack(historyIsAllLoad);
-    await draw("history");
-    historyIsLoading = false;
-  }
-  /**
-   * @description: 后续数据动态加载渲染逻辑
-   * 前置条件:
-   * 1.允许开启后续动态加载
-   * 2.右侧已为图表尽头
-   * 3.没有正在加载后续数据
-   * 4.后续数据并未已全部获取
-   * 5.仅仅在[鼠标拖拽,方向键左右]时
-   */
-  // 获取右侧K线是否最后一根
-  const nowIsEnd = params.batch
-    ? params.batch[0].end === 100
-    : params.endValue >= props.klineData.length - config.value.preBarCount - 1;
-  const actionIsWheel = params.actionIsWheel;
-  if (
-    config.value.dynamicLoadConfig.futureVisible &&
-    nowIsEnd &&
-    !futureIsLoading &&
-    !futureIsAllLoad.value &&
-    !actionIsWheel
-  ) {
-    futureIsLoading = true;
-    await config.value.dynamicLoadConfig.futureLoadCallBack(futureIsAllLoad);
-    await draw("future");
-    futureIsLoading = false;
-  }
-  clearTimeout(datazoomTimer);
-  datazoomTimer = setTimeout(() => {
-    draw("line");
-    draw("priceTrendPercent");
-    clearTimeout(datazoomTimer);
-    datazoomTimer = null;
-  }, datazoomTime);
-};
-/**
- * @description: echarts鼠标右击事件回调
- */
-let echartsContextMenuTimer: any = null;
-const echartsContextMenu = (params: ECElementEvent) => {
-  echartsContextMenuTimer = setTimeout(() => {
-    // 判定是否点击到的元素为额外画线
-    if (params.componentType === "graphic") {
-      const { oncontextmenu } = params.info?.event ?? {};
-      oncontextmenu instanceof Function && oncontextmenu(params, params.info, menuData);
-    }
-    clearTimeout(echartsContextMenuTimer);
-    echartsContextMenuTimer = null;
-  });
-};
-
-// 绑定事件
-const addEventListener = () => {
-  echartsInstance.on("highlight", (data: any) => {
-    highlight(data, echartsInstance);
-  });
-  echartsInstance.on("globalout", () => {
-    highlight(null, echartsInstance);
-  });
-  echartsInstance.on("contextmenu", (params: ECElementEvent) => {
-    echartsContextMenu(params);
-  });
-  echartsInstance.on("datazoom", (params: any) => {
-    datazoom(params);
-  });
-};
-
-// 解绑事件
-const removeEventListener = () => {
-  echartsInstance.off("highlight");
-  echartsInstance.off("globalout");
-  echartsInstance.off("contextmenu");
-  echartsInstance.off("datazoom");
-};
-
-// 键盘事件
-const keyDownEvent = (e: KeyboardEvent) => {
-  if (!echartsInstance) return;
-  // 只有选中或者按ctrl才激活按键
-  if (!(e.ctrlKey || props.isSelect)) return;
-  const option = echartsInstance.getOption() as EChartsOption;
-  let { startValue, endValue, start, end } = (option.dataZoom as DataZoomComponentOption[])[0] as {
-    startValue: number;
-    endValue: number;
-  };
-  const handleLeft = () => {
-    // 左按键
-    if (startValue === 0) {
-      return;
-    }
-    startValue = startValue - 1;
-    endValue = endValue - 1;
-    echartsInstance.dispatchAction({
-      type: "dataZoom",
-      startValue,
-      endValue,
-      maxValueSpan: config.value.maxValueSpan,
-    });
-  };
-  const handleRight = () => {
-    // 右按键
-    // 如果开启了动态后续数据加载
-    if (config.value.dynamicLoadConfig.futureVisible && !futureIsLoading && !futureIsAllLoad.value) {
-      startValue = startValue + 1;
-      endValue = endValue + 1;
-      echartsInstance.dispatchAction({
-        type: "dataZoom",
-        startValue,
-        endValue,
-        maxValueSpan: config.value.maxValueSpan,
-      });
-    } else {
-      if (endValue === option.xAxis[0].data.length - 1) {
-        return;
-      }
-      startValue = startValue + 1;
-      endValue = endValue + 1;
-      echartsInstance.dispatchAction({
-        type: "dataZoom",
-        startValue,
-        endValue,
-        maxValueSpan: config.value.maxValueSpan,
-      });
-    }
-  };
-  const handleUp = () => {
-    // 上按键-放大 最少保持5条数据
-    if (endValue - startValue < 5) {
-      return;
-    }
-    // 以鼠标指定的K线为中心点进行放大
-    const startDiff = Math.floor((activeIndex.value - startValue) / 2) + 1;
-    const endDiff = Math.floor((endValue - activeIndex.value) / 2) + 1;
-    startValue = startValue + startDiff;
-    endValue = endValue - endDiff;
-    echartsInstance.dispatchAction({
-      type: "dataZoom",
-      startValue,
-      endValue,
-      actionIsWheel: true, // 标记为缩放
-      maxValueSpan: config.value.maxValueSpan,
-    });
-  };
-  const handleDown = () => {
-    // 下按键-缩小
-    // const diff = Math.min(50, activeIndex.value - startValue);
-    // startValue = startValue - diff - 1;
-    start = start - (end - start) / 4;
-    echartsInstance.dispatchAction({
-      type: "dataZoom",
-      start,
-      end,
-      actionIsWheel: true, // 标记为缩放
-      maxValueSpan: config.value.maxValueSpan,
-    });
-  };
-  const callBackMap = new Map([
-    ["ArrowLeft", handleLeft],
-    ["ArrowRight", handleRight],
-    ["ArrowUp", handleUp],
-    ["ArrowDown", handleDown],
-  ]);
-  const callBack = callBackMap.get(e.code);
-  callBack instanceof Function && callBack();
-};
-
-/**
- * @description: K线组件初始化
- */
-const init = async () => {
-  let Initializing: boolean | null = true; // 正在初始化
-  // 1.初始化图表
-  echartsInstance = echarts.init(echartsRef.value) as EChartsType;
-  // 2.绘制
-  await draw();
-  // 3.初始化右键菜单
-  menuData.value = props.defaultMenuData as MenuDataType;
-  // 4.初始化数据激活索引
-  activeIndex.value = ((echartsInstance.getOption().dataZoom as DataZoomComponentOption[])[0].endValue as number) ?? -1;
-  // 5.进行图表事件绑定
-  addEventListener();
-  // 6.进行DOM监控,图表重加载
-  chartDomObserver = new ResizeObserver(() => {
-    if (Initializing) {
-      Initializing = null;
-      return;
-    }
-    echartsInstance.resize();
-    draw("line");
-  });
-  chartDomObserver.observe(echartsRef.value);
-  // 7.绑定键盘事件
-  window.addEventListener("keydown", keyDownEvent);
-};
-
-onMounted(() => {
-  init();
-});
-
-onUnmounted(() => {
-  // 1.解绑
-  removeEventListener();
-  window.removeEventListener("keydown", keyDownEvent);
-  // 2.销毁实例
-  echartsInstance.dispose();
-  // 3.取消监听图表DOM
-  chartDomObserver.disconnect();
-  chartDomObserver = null;
-});
-</script>
-
-<template>
-  <!-- 神兔-K线组件 -->
-  <div class="st-kline">
-    <!-- Tips -->
-    <div class="st-kline-header">
-      <!-- 开, 高, 低, 收 -->
-      <Tips :data="kLineTips" />
-      <!-- 指标 -->
-      <Tips :data="indicatorTips" />
-      <!-- 价格趋势[价差定制] -->
-      <Tips :data="priceTrendTips" />
-    </div>
-    <!-- 图表 + 菜单 -->
-    <Contextmenu class="st-kline-body" @closeContextMenuCallBack="closeContextMenuCallBack">
-      <!-- 图表 -->
-      <div ref="echartsRef" :class="cursorPenVisible ? 'st-kline-chart cursorPen' : 'st-kline-chart'" />
-      <!-- 菜单 -->
-      <template #popover>
-        <el-menu class="menu">
-          <el-menu-item
-            v-for="item in menuData"
-            :key="item.label"
-            :index="item.label"
-            class="menuItem"
-            @click="menuClick(item)"
-          >
-            {{ item.label }}
-          </el-menu-item>
-        </el-menu>
-      </template>
-    </Contextmenu>
-  </div>
-</template>
-
-<style lang="scss">
-// 需要写在外面,不然会被Vue唯一标识符顶掉导致样式不生效
-.cursorPen canvas {
-  cursor: url(./images/pen.png) -30 30, auto !important;
-}
-</style>
-<style lang="scss" scoped>
-.st-kline {
-  width: 100%;
-  height: 100%;
-  background: #000;
-  overflow-x: hidden;
-  position: relative; // 配合提供给菜单定位
-  // K线头部区域: Tips
-  &-header {
-    height: 34px;
-    position: absolute;
-    left: 66px;
-  }
-  &-body {
-    width: 100%;
-    height: 100%;
-  }
-  &-chart {
-    width: 100%;
-    height: 100%;
-  }
-  .menu {
-    border-radius: 4px;
-    overflow: hidden;
-    background-color: white;
-    border-right: 0;
-    .menuItem {
-      font-size: 16px;
-      height: 32px;
-    }
-  }
-}
-</style>