st-comp 0.0.164 → 0.0.166

package/packages/KlinePlus/index.vue

@@ -0,0 +1,880 @@
+<!-- 单品种单周期K线业务组件 -->
+<script setup>
+import dayjs from "dayjs";
+import * as echarts from "echarts";
+import { stMath, debounce, addResizeListener } from "st-func";
+import { ref, watch, computed, onMounted, onUnmounted, inject } from "vue";
+import { loadKlineConfig, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleMarkPointOffset, normalizeToKlineTimeByMatch } from "./utils.js";
+import Tips from "./components/Tips.vue";
+import SliderChart from "./components/SliderChart.vue";
+
+const { round, formatValue } = stMath;
+const { request } = inject("stConfig"); // 组件库全局配置
+
+const sliderChartRef = ref();
+const loading = ref(false);
+const isHover = ref(false);
+const props = defineProps({
+  varietyCode: { type: String, required: true },
+  varietyStock: { type: Number, required: true }, // 品种市场类型 0-期货, 1-股票, 2-期权
+  indicatorStore: { type: Object, required: true }, // 指标配置Store
+  userKlineConfig: { type: Object, required: true }, // 用户自定义的K线配置
+
+  // 交互选项
+  cycle: { type: String, required: true },
+  sellBuy: { type: Number, default: 1 },
+  rightType: { type: Number, default: null },
+  klineType: { type: Number, default: null },
+  initTimeRange: { type: Array, required: true },
+  mainIndicator: { type: String, required: true },
+
+  // 绘制数据: 成交
+  tradeLog: { type: Array, default: () => [] }, // 成交数据
+  // 绘制数据: 净值
+  netPositionData: { type: Array, default: () => [] }, // 净值数据
+
+  // 功能: 强制定位高亮(非必填)
+  positionTime: { type: [String, null], default: null },
+  // 功能: 同步刷选范围(非必填)
+  syncBrushRange: { type: Object, default: () => ({ cycleList: [], startTime: null, endTime: null }) },
+});
+
+// 加载标记
+let isLoadNew = false;
+let isloadAllNew = false;
+let isLoadHistory = false;
+let isloadAllHistory = false;
+
+let resizeRo = null;
+let subChartIns = null;
+let mainChartIns = null;
+const subChartRef = ref(null);
+const mainChartRef = ref(null);
+
+// K线数据
+const klineData = ref({
+  data: [],
+  mainIndicator: [],
+  subIndicator: [],
+  time: [],
+});
+const activeIndex = ref(0);
+const screenTimeRange = ref([]); // 当屏首末时间
+const contextmenuKlineTime = ref(null); // 右键点击的那一根K线时间
+
+// 指标数据
+const subIndicator = ref("VOL");
+const mainTips = computed(() => {
+  const itemData = klineData.value.data[activeIndex.value];
+  if (!itemData) {
+    return [
+      { label: "开", value: "-" },
+      { label: "高", value: "-" },
+      { label: "低", value: "-" },
+      { label: "收", value: "-" },
+      { label: "额", value: "-" },
+      { label: "涨跌", value: "-" },
+    ];
+  }
+  const result = [
+    { label: "开", value: round(itemData[0]) },
+    { label: "高", value: round(itemData[3]) },
+    { label: "低", value: round(itemData[2]) },
+    { label: "收", value: round(itemData[1]) },
+  ];
+  // 特殊: 交易总额
+  itemData[4] !== null && result.push({ label: "额", value: formatValue(itemData[4]) });
+  // 特殊: 涨跌幅 公式:收盘价 - 昨收 / (昨收绝对值)
+  let diffColor;
+  if (itemData[6] > 0) {
+    diffColor = "red";
+  } else if (itemData[6] < 0) {
+    diffColor = "green";
+  }
+  result.push({ label: "涨跌", value: `${round(itemData[6])}%`, color: diffColor });
+  return result;
+});
+const mainIndicatorTips = computed(() => {
+  return (
+    klineData.value?.mainIndicator?.map((item) => {
+      return { label: item.key, value: round(item.data[activeIndex.value]), color: item.color };
+    }) || []
+  );
+});
+const subIndicatorTips = computed(() => {
+  return klineData.value?.subIndicator?.map((item) => ({ label: item.key, color: item.color, value: item.data[activeIndex.value] || "-" })) || [];
+});
+
+// 图表: 初始化
+const initChart = () => {
+  if (mainChartIns) return;
+
+  // 主图
+  mainChartIns = echarts.init(mainChartRef.value);
+  mainChartIns.on(
+    "highlight",
+    debounce((params) => {
+      if (params.dataIndex) {
+        activeIndex.value = params.dataIndex;
+      } else {
+        activeIndex.value = params.batch?.[0].dataIndex ?? -1;
+      }
+    }, 10)
+  );
+  mainChartIns.on(
+    "datazoom",
+    debounce(async () => {
+      const { loadCheckCount } = loadKlineConfig;
+      const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+      // 当前开始索引 < 阈值边界, 触发加载更多数据
+      if (isLoadHistory === false && isloadAllHistory === false && startValue < loadCheckCount) await getMoreData("history");
+      // 当前结束索引 > 阈值边界, 触发加载更多数据
+      if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
+      getScreenTimeRange();
+    })
+  );
+  mainChartIns.on("globalout", () => {
+    const option = mainChartIns.getOption();
+    activeIndex.value = option.dataZoom[0].endValue;
+  });
+  mainChartIns.getZr().on("contextmenu", () => {
+    contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];
+  });
+  window.addEventListener("keydown", handleKeyDownEvent);
+
+  // 副图
+  if (props.userKlineConfig.enable_subChart) {
+    subChartIns = echarts.init(subChartRef.value);
+    echarts.connect([mainChartIns, subChartIns]);
+  }
+
+  // DOM缩放
+  resizeRo = addResizeListener(mainChartRef.value);
+  resizeRo.listen(() => {
+    requestAnimationFrame(() => {
+      mainChartIns.resize();
+      subChartIns?.resize();
+      sliderChartRef.value?.resize();
+    });
+  });
+};
+// 图表: 获取数据 [首屏]
+const getMainData = async ({ startTime, endTime }) => {
+  // 加载状态初始化
+  isLoadHistory = false;
+  isloadAllHistory = false;
+  isLoadNew = false;
+  isloadAllNew = false;
+  try {
+    loading.value = true;
+    const params = {
+      varietyCode: props.varietyCode,
+      cycle: props.cycle, // 周期
+      right: props.rightType, // 复权方式
+      contractType: props.varietyStock ? null : props.klineType, // 合约类型
+      mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),
+      subIndicator: subIndicator.value,
+      startTime: dayjs(startTime).subtract(50, "day").format("YYYY-MM-DD HH:mm:ss"), // 确保缩放, 多请求部分数据, 也可以兼容undefined的情况
+      endTime: dayjs(endTime).add(50, "day").format("YYYY-MM-DD HH:mm:ss"), // 确保缩放, 多请求部分数据, 也可以兼容undefined的情况
+      deleteFirstNumber: 1, // >> 重要: 绩效后端特殊要求传参 <<
+    };
+    const { body } = await request.post("/middleLayer/kline/getKline", params);
+    klineData.value = body ?? { data: [], mainIndicator: [], subIndicator: [], time: [] };
+
+    // 绘制图表
+    const startValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(startTime));
+    const endValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(endTime));
+    draw({
+      startValue: startValue === -1 ? 0 : startValue,
+      endValue: endValue === -1 ? klineData.value.time.length - 1 : endValue,
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+// 图表: 获取数据 [更多]
+const getMoreData = async (type) => {
+  const { loadAddCount } = loadKlineConfig;
+  switch (type) {
+    case "history": {
+      isLoadHistory = true;
+      const params = {
+        varietyCode: props.varietyCode,
+        cycle: props.cycle,
+        right: props.rightType,
+        contractType: props.varietyStock ? null : props.klineType,
+        endTime: klineData.value.time[0],
+        limit: loadAddCount,
+        mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),
+        subIndicator: subIndicator.value,
+        deleteFirstNumber: 1,
+      };
+      const { body } = await request.post("/middleLayer/kline/getKline", params);
+      // 合并数据
+      klineData.value = mergeklineData(body, klineData.value);
+      // 判断是否加载完全部的历史数据
+      if (body.data.length < loadAddCount) {
+        console.log("[K线] 获取更多数据: 左侧已全部获取完毕, 关闭");
+        isloadAllHistory = true;
+      }
+      isLoadHistory = false;
+      break;
+    }
+    case "new": {
+      isLoadNew = true;
+      const params = {
+        varietyCode: props.varietyCode,
+        cycle: props.cycle, // 周期
+        right: props.rightType, // 复权方式
+        contractType: props.varietyStock ? null : props.klineType, // 合约类型
+        startTime: klineData.value.time[klineData.value.time.length - 1], // 开始时间
+        limit: loadAddCount, // 查询K线数量
+        deleteFirstNumber: 1, // >> 重要: 绩效后端特殊要求传参 <<
+        mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),
+        subIndicator: subIndicator.value,
+      };
+      const { body } = await request.post("/middleLayer/kline/getKline", params);
+      // 合并数据
+      klineData.value = mergeklineData(klineData.value, body);
+      // 判断是否加载完全部的新数据
+      if (body.data.length < loadAddCount) {
+        console.log("[K线] 获取更多数据: 右侧已全部获取完毕, 关闭");
+        isloadAllNew = true;
+      }
+      isLoadNew = false;
+      break;
+    }
+  }
+
+  // 绘制图表 (更新载入更多数据后的定位索引)
+  const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+  const klineDataTime = mainChartIns.getOption()?.xAxis[0].data;
+  const newStartValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(klineDataTime[startValue]));
+  const newEndValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(klineDataTime[endValue]));
+  draw({
+    startValue: newStartValue === -1 ? 0 : newStartValue,
+    endValue: newEndValue === -1 ? klineData.value.time.length - 1 : newEndValue,
+  });
+};
+// 图表: 获取数据 [当屏首末时间范围]
+const getScreenTimeRange = () => {
+  if (!klineData.value.time) return (screenTimeRange.value = []);
+  const { time } = klineData.value;
+  const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+  const startTime = time[startValue];
+  const endTime = time[endValue];
+  if (["6", "7", "8"].includes(props.cycle)) {
+    screenTimeRange.value = [dayjs(startTime).format("YYYY-MM-DD"), dayjs(endTime).format("YYYY-MM-DD")];
+  } else {
+    screenTimeRange.value = [startTime, endTime];
+  }
+};
+// 图表: 绘制
+const draw = (params = { startValue: 0, endValue: 0 }) => {
+  initChart();
+  const { maxValueSpan } = loadKlineConfig;
+  const { time, data, mainIndicator } = klineData.value;
+
+  // 如果超过了最大根数限制, 要求endValue不变, startValue进行变换
+  const startValue = params.endValue - params.startValue > maxValueSpan ? params.endValue - maxValueSpan : params.startValue;
+  const endValue = params.endValue;
+
+  // 配置: 指标线
+  const indicatorSeries = mainIndicator.map((item) => {
+    return {
+      name: item.key,
+      type: "line",
+      silent: true,
+      symbol: "none",
+      data: item.data,
+      lineStyle: {
+        width: item.width || 1,
+      },
+      itemStyle: {
+        color: item.color,
+      },
+    };
+  });
+  // 配置数据: 净值曲线
+  const { netPositionLineData } = handleNetPositionLine(props.netPositionData, props.cycle);
+  // 配置数据: 成交点位 + 连线
+  const { tradePointData, tradeLineData } = handleMarkPointTradeLog(props.tradeLog, props.cycle, props.sellBuy, time, data);
+
+  /**
+   * @description: 渲染图表
+   */
+  mainChartIns.setOption(
+    {
+      animation: false,
+      grid: {
+        top: "40px",
+        left: "60px",
+        right: "20px",
+        bottom: "20px",
+      },
+      dataZoom: [
+        {
+          type: "inside",
+          startValue,
+          endValue,
+          minValueSpan: loadKlineConfig.minValueSpan,
+          maxValueSpan: loadKlineConfig.maxValueSpan,
+        },
+      ],
+      tooltip: {
+        trigger: "axis",
+        appendToBody: true,
+        confine: true,
+        axisPointer: {
+          type: "cross",
+          label: {
+            rich: {},
+            formatter: (data) => {
+              const { axisDimension, value } = data;
+              if (axisDimension === "x") {
+                if (["6", "7", "8"].includes(props.cycle)) {
+                  return dayjs(value).format("YYYY-MM-DD");
+                } else {
+                  return value;
+                }
+              } else {
+                return String(round(value));
+              }
+            },
+          },
+        },
+        formatter: (params) => {
+          if (!params?.length) return null;
+          let body = "";
+          params.forEach((item) => {
+            // 资产持仓净值
+            if (item.seriesName === "netPosition" && item.data !== null) {
+              body += `<div>资产持仓净值: ${item.data[1]}</div>`;
+            }
+            // 成交数据
+            if (item.componentSubType === "candlestick") {
+              // 买卖点
+              if (props.sellBuy === 0) {
+                // 买卖点渲染逻辑
+                const sellBuy = tradePointData.filter((i) => i?.coord[0] === item.axisValue);
+                let buy = 0;
+                let sell = 0;
+                sellBuy.forEach((i) => {
+                  const { tradeType, amount } = i.customData;
+                  if (tradeType === "买") {
+                    buy += amount;
+                  }
+                  if (tradeType === "卖") {
+                    sell += amount;
+                  }
+                });
+                if (buy) body += `<div>买: ${buy}</div>`;
+                if (sell) body += `<div>卖: ${sell}</div>`;
+              }
+              // 开平点
+              else {
+                // 开平点渲染逻辑
+                tradePointData.forEach((i) => {
+                  if (i?.coord[0] === item.axisValue) {
+                    const { tradeType, amount, profitAndLoss, openPriceAll, closePriceAll } = i.customData;
+                    let tooltip = `<div>${tradeType}: ${amount}手</div>`;
+                    // 开仓-tooltip: 开仓价
+                    if (tradeType.includes("开")) {
+                      tooltip += `<div>开仓价: ${(openPriceAll / amount)?.toFixed(2)}</div>`;
+                    }
+                    // 平仓-tooltip: 平仓价, 盈亏, 盈亏比率
+                    if (tradeType.includes("平")) {
+                      const openPrice = (openPriceAll / amount)?.toFixed(2);
+                      const closePrice = (closePriceAll / amount)?.toFixed(2);
+                      tooltip += `<div>平仓价: ${closePrice}</div>`;
+                      tooltip += `<div>盈亏: ${profitAndLoss?.toFixed(2)}</div>`;
+                      tooltip += `<div>盈亏比率: ${(((closePrice - openPrice) / openPrice) * 100)?.toFixed(2)} %</div>`;
+                    }
+                    body += tooltip;
+                  }
+                });
+              }
+            }
+          });
+          if (!body) return null;
+          let time = params[0].axisValue;
+          if (["6", "7", "8"].includes(props.cycle)) time = dayjs(time).format("YYYY-MM-DD");
+          return `
+              <div>
+                <span style="font-weight: bold;">${time}</span>
+                ${body}
+              </div>
+            `;
+        },
+      },
+      xAxis: {
+        show: true,
+        type: "category",
+        data: time,
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          formatter: (value) => {
+            if (["6", "7", "8"].includes(props.cycle)) {
+              return dayjs(value).format("YYYY-MM-DD");
+            } else {
+              return value;
+            }
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          axisLine: {
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dotted",
+              color: "#333",
+            },
+          },
+          min: (value) => {
+            const { min, max } = value;
+            const interval = Math.abs((max - min) / 10);
+            return round(min - interval);
+          },
+          max: (value) => round(value.max),
+        },
+        {
+          show: false,
+          min: (value) => {
+            const { min, max } = value;
+            const interval = Math.abs((max - min) / 10);
+            return min - interval;
+          },
+          max: (value) => {
+            const { min, max } = value;
+            const interval = Math.abs((max - min) / 10);
+            return max + interval;
+          },
+        },
+      ],
+      series: [
+        {
+          type: "candlestick",
+          data,
+          markPoint: { data: handleMarkPointOffset([...tradePointData]) },
+          markLine: { data: [...tradeLineData] },
+          itemStyle: {
+            color: "transparent",
+            color0: "#00FFFF",
+            borderColor: "#FF0000",
+            borderColor0: "#00FFFF",
+            borderWidth: 1,
+          },
+        },
+        // 指标线
+        ...indicatorSeries,
+        // 净值曲线
+        {
+          type: "line",
+          name: "netPosition",
+          data: netPositionLineData,
+          symbol: "none",
+          yAxisIndex: 1,
+          connectNulls: true,
+          itemStyle: {
+            color: "#666666",
+          },
+          lineStyle: {
+            width: 2,
+          },
+        },
+      ],
+      toolbox: {
+        show: false,
+      },
+      brush: {
+        xAxisIndex: "all",
+        brushLink: "all",
+        transformable: false,
+        outOfBrush: {
+          colorAlpha: 2,
+        },
+        brushStyle: {
+          color: "rgba(255,255,255,0.1)",
+          borderColor: "rgba(255,255,255,0.4)",
+        },
+      },
+    },
+    true
+  );
+  if (props.userKlineConfig.enable_subChart) {
+    subChartIns.setOption(getSubOptions(klineData.value, startValue, endValue), true);
+  }
+
+  /**
+   * @description: 善后处理
+   */
+  {
+    getScreenTimeRange();
+    activeIndex.value = endValue;
+  }
+
+  /**
+   * @description: 数据框选: brush
+   * 由于brush配置中, 如果有一边的X轴时间不在已载入数据中, 整个都会失效, 所以这里使用的是匹配算法
+   */
+  {
+    const brushAreas = [];
+    // 1. 成交范围 (灰白色)
+    if (props.userKlineConfig.enable_tradeLogBrush && tradePointData.length) {
+      const [startTime, endTime] = [tradePointData[0].coord[0], tradePointData.at(-1).coord[0]];
+      const coordRange = normalizeToKlineTimeByMatch(time, [startTime, endTime], props.cycle);
+      brushAreas.push({
+        brushId: "开平仓范围",
+        brushType: "lineX",
+        xAxisIndex: 0,
+        coordRange,
+      });
+    }
+    // 2. 同步刷选范围 (蓝色)
+    if (props.syncBrushRange.cycleList.includes(props.cycle)) {
+      const { startTime, endTime } = props.syncBrushRange;
+      const coordRange = normalizeToKlineTimeByMatch(time, [startTime, endTime], props.cycle);
+      brushAreas.push({
+        brushId: "同步刷选范围",
+        brushType: "lineX",
+        xAxisIndex: 0,
+        coordRange,
+        brushStyle: {
+          fill: "rgba(64, 158, 255, 0.2)",
+          stroke: "rgba(64, 158, 255, 0.8)",
+          lineWidth: 1,
+        },
+      });
+    }
+    // 3. 强制定位高亮 (紫色)
+    if (props.positionTime) {
+      const [startTime, endTime] = [dayjs(props.positionTime).format("YYYY-MM-DD 00:00:00"), dayjs(props.positionTime).format("YYYY-MM-DD 23:59:59")];
+      const coordRange = normalizeToKlineTimeByMatch(time, [startTime, endTime], props.cycle);
+      brushAreas.push({
+        brushId: "强制定位高亮",
+        brushType: "lineX",
+        xAxisIndex: 0,
+        coordRange,
+        brushStyle: {
+          fill: "rgba(217, 179, 255, 0.2)",
+          stroke: "rgba(217, 179, 255, 0.8)",
+          lineWidth: 1,
+        },
+      });
+    }
+    mainChartIns.dispatchAction({
+      type: "brush",
+      areas: brushAreas,
+    });
+  }
+};
+
+// 拖拽轴: 拖拽回调
+const handleSliderChange = (params) => {
+  const { startTime, endTime } = params;
+  getMainData({ startTime, endTime });
+};
+// 键盘控制 [↑↓←→缩放平移]
+const handleKeyDownEvent = ({ code, ctrlKey }) => {
+  if (!(ctrlKey || isHover.value)) return;
+  const { xAxis, dataZoom } = mainChartIns.getOption();
+  const { data: xAxisData } = xAxis?.[0] ?? { data: [] };
+  let { startValue, endValue } = dataZoom?.[0] ?? {};
+  if (!xAxisData?.length) return;
+  // 键位cb
+  switch (code) {
+    // ↑ 放大
+    case "ArrowUp": {
+      if (endValue - startValue < 5) return;
+      const diff = Math.floor((endValue - startValue) / 2) + 1;
+      startValue = startValue + diff;
+      if (endValue - startValue < 5) startValue = endValue - 4;
+      break;
+    }
+    // ↓ 缩小
+    case "ArrowDown": {
+      const diff = Math.min(500, endValue - startValue);
+      startValue = startValue - diff - 1;
+      break;
+    }
+    // ← 左移
+    case "ArrowLeft": {
+      if (startValue > 0) {
+        startValue -= 1;
+        endValue -= 1;
+      }
+      if (activeIndex.value > 0) {
+        activeIndex.value -= 1;
+      }
+      break;
+    }
+    // → 右移
+    case "ArrowRight": {
+      if (endValue < xAxisData.length - 1) {
+        startValue += 1;
+        endValue += 1;
+      }
+      if (isHover.value && activeIndex.value < xAxisData.length - 1) {
+        activeIndex.value += 1;
+      }
+      break;
+    }
+  }
+  // 1. 更新图表当屏位置
+  mainChartIns.dispatchAction({
+    type: "dataZoom",
+    startValue,
+    endValue,
+  });
+  // 2. 更新图表指示器位置
+  mainChartIns.dispatchAction({
+    type: "updateAxisPointer",
+    seriesIndex: 0,
+    dataIndex: isHover.value ? activeIndex.value : null,
+  });
+  // 3. 更新图表高亮索引
+  mainChartIns.dispatchAction({
+    type: "highlight",
+    dataIndex: isHover.value ? activeIndex.value : endValue,
+  });
+};
+
+onMounted(() => {
+  const [startTime, endTime] = props.initTimeRange;
+  getMainData({ startTime, endTime });
+});
+// 监控: [品种, 初始时间范围] => 重加载K线 (缩放初始化)
+watch(
+  () => [props.varietyCode, props.initTimeRange],
+  () => {
+    const [startTime, endTime] = props.initTimeRange;
+    getMainData({ startTime, endTime });
+  },
+  { deep: true }
+);
+// 监控: [主指标, 副指标, 指标配置, 周期选项, 复权选项, 常用选项] => 重加载K线 (缩放不变)
+watch(
+  () => [props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator, props.cycle, props.rightType, props.klineType],
+  () => {
+    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+    const [startTime, endTime] = [klineData.value.time[startValue], klineData.value.time[endValue]];
+    getMainData({ startTime, endTime });
+  },
+  { deep: true }
+);
+// 监控: [成交点类型, 成交数据, 净值数据] => 重绘K线 (缩放不变)
+watch(
+  () => [props.sellBuy, props.tradeLog, props.netPositionData],
+  () => {
+    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+    draw({ startValue, endValue });
+  },
+  { deep: true }
+);
+onUnmounted(() => {
+  // 解绑
+  mainChartIns.off("highlight");
+  mainChartIns.off("globalout");
+  mainChartIns.off("datazoom");
+  mainChartIns.getZr().off("contextmenu");
+  window.removeEventListener("keydown", handleKeyDownEvent);
+  // 销毁
+  mainChartIns.dispose();
+  subChartIns?.dispose();
+  resizeRo.dispose();
+  resizeRo = null;
+});
+defineExpose({
+  screenTimeRange,
+  contextmenuKlineTime,
+  reDraw: () => {
+    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+    draw({ startValue, endValue });
+  },
+});
+</script>
+
+<template>
+  <div
+    class="kline-plus"
+    v-loading="loading"
+    @mousemove="isHover = true"
+    @mouseout="isHover = false"
+  >
+    <!-- 主图 -->
+    <div class="main-chart">
+      <div class="indicator">
+        <Tips :data="mainTips" />
+        <Tips :data="mainIndicatorTips" />
+      </div>
+      <template v-if="userKlineConfig.enable_showScreenTimeRange">
+        <span class="screen-time-range"> {{ screenTimeRange[0] }} - {{ screenTimeRange[1] }} </span>
+      </template>
+      <!-- K线 -->
+      <div
+        ref="mainChartRef"
+        class="chart"
+      />
+    </div>
+    <!-- 副图 -->
+    <template v-if="userKlineConfig.enable_subChart">
+      <div class="sub-chart">
+        <div class="indicator">
+          <div class="title">
+            <span>{{ subIndicator }}</span>
+            <el-select
+              v-model="subIndicator"
+              style="width: 100px; margin-right: 4px; height: 25px"
+              size="small"
+              class="element-dark"
+              popper-class="element-dark"
+            >
+              <el-option
+                v-for="(item, index) in indicatorStore.subIndicatorList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <Tips :data="subIndicatorTips" />
+        </div>
+        <div
+          ref="subChartRef"
+          class="chart"
+        />
+      </div>
+    </template>
+    <!-- 拖拽轴 -->
+    <template v-if="userKlineConfig.enable_sliderChart">
+      <div class="slider-chart">
+        <SliderChart
+          ref="sliderChartRef"
+          :screenTimeRange="screenTimeRange"
+          :varietyCode="varietyCode"
+          :varietyStock="varietyStock"
+          :rightType="rightType"
+          :klineType="klineType"
+          @change="handleSliderChange"
+        />
+      </div>
+    </template>
+    <!-- 空数据 -->
+    <el-empty
+      v-if="!klineData.time.length"
+      class="empty"
+      description="暂无数据"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.kline-plus {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color-scheme: dark;
+  display: flex;
+  flex-direction: column;
+  // 主图
+  .main-chart {
+    width: 100%;
+    height: calc((100% - 40px) * 0.8);
+    background-color: black;
+    flex: 1;
+    .indicator {
+      height: 55px;
+      box-sizing: border-box;
+      padding-left: 10px;
+      padding-top: 4px;
+    }
+    .screen-time-range {
+      color: white;
+      font-size: 12px;
+      line-height: 12px;
+      position: absolute;
+      right: 10px;
+      top: 40px;
+    }
+    .chart {
+      width: 100%;
+      height: calc(100% - 55px);
+      box-sizing: border-box;
+    }
+  }
+  // 副图
+  .sub-chart {
+    width: 100%;
+    height: calc((100% - 40px) * 0.2);
+    .indicator {
+      padding-left: 10px;
+      display: flex;
+      align-items: center;
+      .title {
+        display: flex;
+        align-items: center;
+        span {
+          font-size: 12px;
+          line-height: 24px;
+          color: white;
+        }
+        :deep(.el-select) {
+          width: 16px !important;
+          height: 16px !important;
+          margin-left: 4px;
+          .el-select__icon {
+            margin-left: 0;
+            color: black;
+            width: 16px;
+            height: 16px;
+          }
+          .el-select__wrapper {
+            border-radius: 50%;
+            background: #ccc;
+            padding: 0;
+            gap: 0;
+            min-height: 12px;
+            line-height: 12px;
+          }
+        }
+      }
+    }
+    .chart {
+      width: 100%;
+      height: calc(100% - 24px);
+    }
+  }
+  // 拖拽轴
+  .slider-chart {
+    width: 100%;
+    height: 40px;
+  }
+  // 空数据
+  .empty {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    background-color: rgb(0, 0, 0);
+    --el-empty-fill-color-0: var(--el-color-black);
+    --el-empty-fill-color-1: #4b4b52;
+    --el-empty-fill-color-2: #36383d;
+    --el-empty-fill-color-3: #1e1e20;
+    --el-empty-fill-color-4: #262629;
+    --el-empty-fill-color-5: #202124;
+    --el-empty-fill-color-6: #212224;
+    --el-empty-fill-color-7: #1b1c1f;
+    --el-empty-fill-color-8: #1c1d1f;
+    --el-empty-fill-color-9: #18181a;
+  }
+}
+</style>