st-comp 0.0.277 → 0.0.279

package/packages/KlinePlus/index.vue

@@ -1,1067 +0,0 @@
-<!-- 单品种单周期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, checkTimeInterval, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleTradeIncomeRateLine, 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 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, null], default: null }, // 复权类型
-  klineType: { type: [Number, null], default: null }, // 合约类型
-  incomeType: { type: Number, default: 0 }, // 收益计算类型 0-单利, 1-复利
-  initTimeRange: { type: Array, required: true },
-  mainIndicator: { type: String, required: true },
-
-  // 绘制数据
-  tradeLog: { type: Array, default: () => [] }, // 成交数据
-  netPositionData: { type: Array, default: () => [] }, // 净值数据
-  tradeIncomeRateData: { type: Array, default: () => [] }, // 成交收益率数据
-
-  // 强制定位高亮(非必填)
-  positionTime: { type: [String, null], default: null },
-  // 同步刷选范围(非必填)
-  syncBrushRange: { type: Object, default: () => ({ cycleList: [], startTime: null, endTime: null }) },
-
-  // 业务系统相关
-  deleteFirstNumber: { type: Number, default: 1 }, // 绩效标记
-  withoutPermission: { type: Number, default: 0 }, // 三方标记(不需要token授权)
-});
-
-// 加载标记
-let isLoadNew = false;
-let isloadAllNew = false;
-let isLoadHistory = false;
-let isloadAllHistory = false;
-
-let resizeRo = null;
-let subChartIns = null;
-let mainChartIns = null;
-const mainChartRef = ref(null);
-const subChartRef = ref(null);
-const sliderChartRef = 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: itemData[0] },
-    { label: "高", value: itemData[3] },
-    { label: "低", value: itemData[2] },
-    { label: "收", value: 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 = () => {
-  // 检查DOM元素是否存在
-  if (!mainChartRef.value) {
-    console.warn("[K线] 主图DOM元素不存在，取消初始化");
-    return false;
-  }
-  if (mainChartIns) return true;
-
-  try {
-    // 主图
-    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();
-        drawScreenMaxPrice();
-      }),
-    );
-    mainChartIns.on("globalout", () => {
-      if (mainChartIns) {
-        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 && subChartRef.value) {
-      subChartIns = echarts.init(subChartRef.value);
-      echarts.connect([mainChartIns, subChartIns]);
-    }
-
-    // DOM缩放
-    if (mainChartRef.value) {
-      resizeRo = addResizeListener(mainChartRef.value);
-      resizeRo.listen(() => {
-        requestAnimationFrame(() => {
-          mainChartIns?.resize();
-          subChartIns?.resize();
-          sliderChartRef.value?.resize();
-        });
-      });
-    }
-
-    return true;
-  } catch (error) {
-    console.error("[st-klinePlus]: 初始化异常:", error);
-    return false;
-  }
-};
-// 图表: 获取数据 [首屏]
-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.varietyStock === 1 ? props.rightType : 0, // 复权方式
-      contractType: props.varietyStock ? null : props.klineType, // 合约类型
-      mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),
-      subIndicator: subIndicator.value,
-      deleteFirstNumber: props.deleteFirstNumber,
-      withoutPermission: props.withoutPermission,
-    };
-    // Echarts如果一屏如果正好展示了所有数据, 是无法缩放触发加载更多的
-    // 所以在请求中需要对开始和结束时间进行延伸, 但是首屏的展示时间定位还是会以传入的开始结束时间为准
-    if (["1", "2", "3", "4", "5"].includes(props.cycle)) {
-      Object.assign(params, {
-        startTime: dayjs(startTime).subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
-        endTime: dayjs(endTime).add(1, "day").format("YYYY-MM-DD HH:mm:ss"),
-      });
-    } else if (["6", "7"].includes(props.cycle)) {
-      Object.assign(params, {
-        startTime: dayjs(startTime).subtract(50, "day").format("YYYY-MM-DD HH:mm:ss"),
-        endTime: dayjs(endTime).add(50, "day").format("YYYY-MM-DD HH:mm:ss"),
-      });
-    } else {
-      Object.assign(params, {
-        startTime: dayjs(startTime).subtract(10, "month").format("YYYY-MM-DD HH:mm:ss"),
-        endTime: dayjs(endTime).add(10, "month").format("YYYY-MM-DD HH:mm:ss"),
-      });
-    }
-    const { body } = await request.post("/middleLayer/kline/getKline", params);
-    klineData.value = body ?? { data: [], mainIndicator: [], subIndicator: [], time: [] };
-
-    // 找到匹配对应传入的开始, 结束时间的数据索引, 绘制图表
-    let startValue = -1;
-    let endValue = -1;
-    for (let index = 0; index < klineData.value.time.length; index++) {
-      const day = dayjs(klineData.value.time[index]).format("YYYY-MM-DD");
-      if (startValue !== -1 && endValue !== -1) break;
-      if (startValue === -1) {
-        if (new Date(day) === new Date(startTime)) startValue = index;
-        else if (new Date(day) > new Date(startTime)) startValue = index - 1;
-      }
-      if (endValue === -1) {
-        if (new Date(day) === new Date(endTime)) endValue = index;
-        else if (new Date(day) > new Date(endTime)) endValue = index - 1;
-      }
-    }
-    if (endValue === -1) endValue = klineData.value.time.length - 1;
-    // 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.varietyStock === 1 ? props.rightType : 0, // 复权方式
-        contractType: props.varietyStock ? null : props.klineType,
-        endTime: klineData.value.time[0],
-        limit: loadAddCount,
-        mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),
-        subIndicator: subIndicator.value,
-        deleteFirstNumber: props.deleteFirstNumber,
-        withoutPermission: props.withoutPermission,
-      };
-      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.varietyStock === 1 ? props.rightType : 0, // 复权方式
-        contractType: props.varietyStock ? null : props.klineType, // 合约类型
-        startTime: klineData.value.time[klineData.value.time.length - 1], // 开始时间
-        limit: loadAddCount, // 查询K线数量
-        mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),
-        subIndicator: subIndicator.value,
-        deleteFirstNumber: props.deleteFirstNumber,
-        withoutPermission: props.withoutPermission,
-      };
-      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.length) 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 }) => {
-  const isInitialized = initChart();
-  // 确保图表存在
-  if (!isInitialized || !mainChartIns) {
-    return console.warn("[st-klinePlus]: 图表未准备就绪, 跳过绘制");
-  }
-  // 检查数据是否存在
-  if (!klineData.value.time.length) {
-    return console.warn("[st-klinePlus]: 图表无数据, 跳过绘制");
-  }
-
-  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 { tradeIncomeRateLineData } = handleTradeIncomeRateLine(props.tradeIncomeRateData, props.cycle, props.incomeType, time);
-  // 配置数据: 成交点位 + 连线
-  const { tradePointData, tradeLineData } = handleMarkPointTradeLog(props.tradeLog, props.cycle, props.sellBuy, time, data, props.userKlineConfig);
-
-  /**
-   * @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) => {
-            const { min, max } = value;
-            const interval = Math.abs((max - min) / 10);
-            return round(max + interval);
-          },
-        },
-        {
-          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: [
-        // K线
-        {
-          type: "candlestick",
-          name: "kLine",
-          data,
-          markPoint: { data: [...tradePointData] },
-          markLine: { data: [...tradeLineData] },
-          itemStyle: {
-            color: "transparent",
-            color0: "#00FFFF",
-            borderColor: "#FF0000",
-            borderColor0: "#00FFFF",
-            borderWidth: 1,
-          },
-        },
-        // 净值曲线
-        {
-          type: "line",
-          name: "netPosition",
-          data: netPositionLineData,
-          symbol: "none",
-          yAxisIndex: 1,
-          connectNulls: true,
-          itemStyle: {
-            color: "#666666",
-          },
-          lineStyle: {
-            width: 2,
-          },
-        },
-        // 交易收益率曲线
-        {
-          type: "line",
-          name: "tradeIncomeRate",
-          data: tradeIncomeRateLineData,
-          symbol: "none",
-          yAxisIndex: 1,
-          connectNulls: false,
-          itemStyle: {
-            color: "#666666",
-          },
-          lineStyle: {
-            width: 2,
-          },
-        },
-        // 指标线
-        ...indicatorSeries,
-      ],
-      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();
-    drawScreenMaxPrice();
-    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 drawScreenMaxPrice = () => {
-  if (!props.userKlineConfig.enable_showScreenMaxPrice || !klineData.value.time.length) return;
-
-  const { data } = klineData.value;
-  const originOption = mainChartIns.getOption();
-  const { startValue, endValue } = originOption?.dataZoom[0] ?? {};
-
-  let maxPrice = 0;
-  let maxPriceIndex = startValue;
-
-  for (let i = startValue; i <= endValue; i++) {
-    if (Number(data[i][3]) >= maxPrice) {
-      maxPrice = Number(data[i][3]);
-      maxPriceIndex = i;
-    }
-  }
-
-  const filterSeries = originOption.series?.filter((item) => item.name !== "maxPrice") || [];
-  const dataLength = endValue - startValue;
-  const positionInView = (maxPriceIndex - startValue) / dataLength;
-  let position = "right";
-  let formatter = `←${maxPrice}`;
-
-  if (positionInView > 0.7) {
-    position = "left";
-    formatter = `${round(maxPrice)}→`;
-  } else {
-    position = "right";
-    formatter = `←${round(maxPrice)}`;
-  }
-
-  // 关键：只更新 series，不更新其他配置
-  mainChartIns?.setOption(
-    {
-      series: [
-        ...filterSeries,
-        {
-          type: "line",
-          name: "maxPrice",
-          data: [],
-          lineStyle: { opacity: 0 },
-          markPoint: {
-            symbol: "circle",
-            symbolSize: 1,
-            itemStyle: {
-              color: "transparent",
-              borderColor: "transparent",
-            },
-            z: 100,
-            zlevel: 10,
-            label: {
-              show: true,
-              position,
-              formatter,
-              color: "#fff",
-              fontSize: 12,
-              padding: [4, -4],
-            },
-            data: [
-              {
-                name: "最高点",
-                coord: [maxPriceIndex, maxPrice],
-              },
-            ],
-          },
-        },
-      ],
-    },
-    {
-      notMerge: false, // 合并模式
-      replaceMerge: [], // 不替换任何配置
-    },
-  );
-};
-
-// 拖拽轴: 拖拽回调
-const handleSliderChange = (params) => {
-  const [startTime, endTime] = checkTimeInterval({
-    startTime: params.startTime,
-    endTime: params.endTime,
-    cycle: props.cycle,
-  });
-  getMainData({ startTime, endTime });
-};
-// 键盘控制 [↑↓←→缩放平移]
-const handleKeyDownEvent = ({ code, ctrlKey }) => {
-  if (!mainChartIns) return;
-  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.cycle],
-  () => {
-    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
-    const [startTime, endTime] = checkTimeInterval({
-      startTime: klineData.value.time[startValue],
-      endTime: klineData.value.time[endValue],
-      cycle: props.cycle,
-      type: "middle",
-    });
-    getMainData({ startTime, endTime });
-  },
-  { deep: true },
-);
-// 监控: [主指标, 副指标, 指标配置, 复权选项, 常用选项] => 重加载K线 (缩放不变)
-watch(
-  () => [props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator, 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, props.incomeType, props.tradeIncomeRateData],
-  () => {
-    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"
-          :deleteFirstNumber="props.deleteFirstNumber"
-          :withoutPermission="props.withoutPermission"
-          @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>