st-comp 0.0.244 → 0.0.246

package/packages/KlineBasic/index.vue

@@ -1,108 +1,7 @@
-<template>
-  <div
-    class="klineBasic"
-    @mousemove="isHover = true"
-    @mouseout="isHover = false"
-  >
-    <div class="klineBasic-tips">
-      <KlineTips
-        :variety="variety"
-        :data="chartData"
-        :activeIndex="activeIndex"
-      />
-    </div>
-    <div
-      class="klineBasic-main"
-      :style="{ height: config.showSubChart ? '70%' : '100%' }"
-    >
-      <Contextmenu @closeContextMenuCallBack="closeContextMenuCallBack">
-        <div
-          ref="klineBasicMainRef"
-          style="height: 100%"
-        ></div>
-        <template #popover>
-          <el-menu
-            :style="{
-              borderRadius: '4px',
-              overflow: 'hidden',
-              background: '#fff',
-              borderRight: 0,
-            }"
-          >
-            <el-menu-item
-              v-for="item in menuData"
-              style="height: 36px"
-              :key="item.key"
-              :index="item.key"
-              @click="menuClick(item)"
-            >
-              {{ item.label }}
-            </el-menu-item>
-          </el-menu>
-        </template>
-      </Contextmenu>
-    </div>
-    <div
-      class="klineBasic-sub"
-      v-if="config.showSubChart"
-    >
-      <KlineSub
-        ref="klineSubRef"
-        v-model="subIndicator"
-        :data="chartData"
-        :cycle="cycle"
-        :activeIndex="activeIndex"
-        :subIndicatorList="indicatorStore?.subIndicatorList"
-      />
-    </div>
-    <div
-      class="klineBasic-empty"
-      v-if="isEmpty"
-    >
-      <el-empty
-        class="klineBasic-empty-content"
-        description="暂无数据"
-      />
-    </div>
-    <div
-      class="klineBasic-error"
-      v-if="isError"
-    >
-      <div class="klineBasic-error-content">加载失败，请刷新重试</div>
-      <div style="text-align: center">
-        <el-button @click="getMainData">刷新</el-button>
-      </div>
-    </div>
-  </div>
-  <!-- 画线预警-修改价格弹窗 -->
-  <el-dialog
-    v-model="warningLineChangeVisible"
-    title="画线预警-修改价格"
-    width="30%"
-    align-center
-  >
-    <span style="margin-right: 10px">预警价格:</span>
-    <el-input-number
-      v-model="warningLineChangeValue"
-      placeholder="输入预警价格"
-    />
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="warningLineChangeVisible = false">取消</el-button>
-        <el-button
-          type="primary"
-          @click="changeWarningLine"
-          >确定</el-button
-        >
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
 <script setup>
-import { onMounted, onUnmounted, ref, watch, computed } from "vue";
-import * as echarts from "echarts";
 import dayjs from "dayjs";
+import * as echarts from "echarts";
+import { onMounted, onUnmounted, ref, watch, computed, nextTick } from "vue";
 import { initRequestByEnv, getKlineBasic, getKline, getWarningLine, addWarningLine, updateWarningLine, deleteWarningLine } from "./api";
 import { addResizeListener } from "st-func";
 import { getMainOptions, getWarningLineOptions } from "./utils";
@@ -114,6 +13,9 @@ const defaultMenuData = [{ label: "画线预警", key: "drawWarningLine" }];
 
 let resizeRo = null; // dom元素监听事件
 let mainChartIns = null; // 主图实例
+let renderFrameId = null; // 渲染帧ID
+let drawLineFrameId = null; // 绘线帧ID
+let brushFrameId = null; // 区域框选帧ID
 
 let highlightTimer; // 高亮事件定时器
 let mainDataZoomTimer; // datazoom事件定时器
@@ -127,31 +29,31 @@ const props = defineProps({
   variety: {
     type: [String, Number],
     default: () => null,
-  }, // 品种代码
+  },
   varietyName: {
     type: [String, Number],
     default: () => null,
-  }, // 品种名称
+  },
   featureId: {
     type: [String, Number],
     default: () => null,
-  }, // 合约id
+  },
   featureType: {
     type: [String, Number],
     default: () => null,
-  }, // 合约类型
+  },
   cycle: {
     type: [String, Number],
     default: () => null,
-  }, // 周期id
+  },
   mainIndicator: {
     type: String,
     default: () => "",
-  }, // 主图指标名称
+  },
   indicatorStore: {
     type: Object,
     default: () => null,
-  }, // 指标配置Store
+  },
   startTime: {
     type: String,
     default: () => null,
@@ -163,78 +65,54 @@ const props = defineProps({
   right: {
     type: [String, Number],
     default: 1,
-  }, // 复权方式，前复权-1，不复权-0
+  },
   config: {
     type: Object,
     default: () => ({}),
-  }, // 配置
+  },
   env: {
     type: Object,
     default: () => ({}),
-  }, // 环境变量
+  },
   brushRange: {
     type: [Array, null],
     default: () => null,
-  }, // 时段框选
+  },
 });
 
-const isHover = ref(false); // 是否选中
-const isEmpty = ref(false); // 是否无数据
-const isError = ref(false); // 是否异常
+const isHover = ref(false);
+const isEmpty = ref(false);
+const isError = ref(false);
 
-const klineBasicMainRef = ref(null); // 主图Dom元素
-const klineSubRef = ref(null); // 副图组件元素
-const subIndicator = ref("VOL"); // 副图指标
-const activeIndex = ref(0); // 当前选中的k线
+const klineBasicMainRef = ref(null);
+const klineSubRef = ref(null);
+const subIndicator = ref("VOL");
+const activeIndex = ref(0);
 
-const chartData = ref({}); // 图表数据
+const chartData = ref({});
+const warningLineData = ref([]);
+const warningItem = ref({});
+const warningLineChangeVisible = ref(false);
+const warningLineChangeValue = ref("");
 
-const warningLineData = ref([]); // 预警线数据
-const warningItem = ref({}); // 右键点击的预警线
-const warningLineChangeVisible = ref(false); // 修改预警线价格弹窗visible
-const warningLineChangeValue = ref(""); // 修改预警线价格弹窗value
-
-const menuData = ref([...defaultMenuData]); // 右键菜单
+const menuData = ref([...defaultMenuData]);
 
 const config = computed(() => {
   return {
-    defaultShowCounts: 500, // 默认展示条数
-    addCounts: 2000, // 滚动加载条数
-    maxShowCounts: 5000, // 单页最大展示条数
-    loadCheckCounts: 500, // 滚动加载检测的条数
-    showSubChart: true, // 是否展示副图
-    gridTop: 48, // 主图顶部距离
-    gridLeft: 80, // 主图左侧距离
-    gridRight: 50, // 主图右侧距离
-    showWarningLine: true, // 是否展示预警线
-    getFactorData: true, // 是否获取因子数据
+    defaultShowCounts: 500,
+    addCounts: 2000,
+    maxShowCounts: 5000,
+    loadCheckCounts: 500,
+    showSubChart: true,
+    gridTop: 48,
+    gridLeft: 80,
+    gridRight: 50,
+    showWarningLine: true,
+    getFactorData: true,
     ...props.config,
   };
 });
 
-watch(
-  () => [props.variety, props.cycle, props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator],
-  () => {
-    getMainData();
-  },
-  { deep: true }
-);
-
-onMounted(() => {
-  initRequestByEnv(props.env);
-  getMainData();
-  window.addEventListener("keydown", handleKeyDownEvent);
-});
-
-onUnmounted(() => {
-  mainChartIns?.off("datazoom");
-  mainChartIns?.off("highlight");
-  mainChartIns?.off("globalout");
-  mainChartIns?.dispose();
-  resizeRo?.dispose();
-  window.removeEventListener("keydown", handleKeyDownEvent);
-});
-
 // 初始化图表
 const initChart = () => {
   if (mainChartIns) return;
@@ -246,136 +124,225 @@ const initChart = () => {
   resizeRo = addResizeListener(klineBasicMainRef.value);
   resizeRo.listen(() => {
     requestAnimationFrame(() => {
-      mainChartIns.resize();
+      mainChartIns?.resize();
+      drawLine(); // resize后重绘预警线
     });
   });
 };
-// 键盘事件
-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;
-    }
+// 隐藏loading
+const hideLoading = () => {
+  if (mainChartIns && !mainChartIns.isDisposed()) {
+    mainChartIns.hideLoading();
   }
-  // 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,
+};
+
+// 图表渲染: 全部
+const scheduleRender = (keepDataZoom = false) => {
+  // 取消正在进行的渲染
+  if (renderFrameId) {
+    cancelAnimationFrame(renderFrameId);
+    renderFrameId = null;
+  }
+  // 第一帧：渲染主图
+  renderFrameId = requestAnimationFrame(() => {
+    drawMain(keepDataZoom);
+    // 第二帧：渲染副图
+    renderFrameId = requestAnimationFrame(() => {
+      drawSub();
+      // 第三帧：渲染预警线
+      renderFrameId = requestAnimationFrame(() => {
+        drawLine();
+        renderFrameId = null;
+      });
+    });
   });
 };
-// 图表事件
-const addEventListener = () => {
-  // datazoom事件
-  mainChartIns?.on("datazoom", (params) => {
-    clearTimeout(mainDataZoomTimer);
-    mainDataZoomTimer = setTimeout(() => {
-      const { loadCheckCounts } = config.value;
-      if (mainChartIns?.getOption()?.dataZoom?.[0]) {
-        const { startValue } = mainChartIns?.getOption()?.dataZoom?.[0];
-        // 加载历史数据
-        if (startValue < loadCheckCounts && isLoadHistory === false && isloadAllHistory === false) {
-          // 左侧数据小于检测条数，加载左侧数据
-          isLoadHistory = true;
-          getMoreData("history");
+// 图表渲染: 主图
+const drawMain = (keepDataZoom = false) => {
+  if (!mainChartIns || mainChartIns.isDisposed()) return;
+
+  const { time } = chartData.value;
+  const { defaultShowCounts } = config.value;
+
+  let startValue = time.length - 1 - defaultShowCounts;
+  let endValue = time.length - 1;
+
+  // 保持缩放位置
+  if (keepDataZoom && mainChartIns) {
+    const originOption = mainChartIns.getOption();
+    const originTime = originOption?.xAxis?.[0]?.data;
+    const originDataZoom = originOption?.dataZoom?.[0];
+
+    if (originTime?.length && originDataZoom) {
+      const originStartTime = originTime[originDataZoom.startValue];
+      const originEndTime = originTime[originDataZoom.endValue];
+      if (originStartTime && originEndTime) {
+        // startValue: 从前往后找第一个 >= 原始开始时间的索引
+        const foundStartIndex = time.findIndex((item) => new Date(item).getTime() >= new Date(originStartTime).getTime());
+        // endValue: 从后往前找最后一个 <= 原始结束时间的索引
+        const foundEndIndex = time.findLastIndex((item) => new Date(item).getTime() <= new Date(originEndTime).getTime());
+        // 使用找到的索引，如果没找到则使用默认值
+        startValue = foundStartIndex !== -1 ? foundStartIndex : 0;
+        endValue = foundEndIndex !== -1 ? foundEndIndex : time.length - 1;
+        // 确保 startValue 不大于 endValue
+        if (startValue > endValue) {
+          // 如果范围异常，以结束索引为准，向前取一定数量
+          startValue = Math.max(0, endValue - Math.min(100, time.length - 1));
         }
-        drawLine();
       }
-      clearTimeout(mainDataZoomTimer);
-    }, 100);
-  });
-  // 高亮事件
-  mainChartIns?.on("highlight", (data) => {
-    let index = data.dataIndex || -1;
-    if (data.batch) {
-      index = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
     }
-    clearTimeout(highlightTimer);
-    highlightTimer = setTimeout(() => {
-      activeIndex.value = index;
-      clearTimeout(highlightTimer);
-    }, 20);
-  });
-  // 移出图表事件
-  mainChartIns?.on("globalout", () => {
-    const timer = setTimeout(() => {
-      clearTimeout(timer)
-      const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;
-      activeIndex.value = index;
-    }, 30);
+  }
+  const options = getMainOptions(chartData.value, config.value, startValue, endValue, props.cycle);
+
+  requestAnimationFrame(() => {
+    mainChartIns?.setOption(options, true);
+    activeIndex.value = endValue;
+
+    // 下一帧绘制brush
+    requestAnimationFrame(() => {
+      drawBrush();
+    });
   });
-  // 右键点击事件
-  let echartsContextMenuTimer = null;
-  mainChartIns?.on("contextmenu", (params) => {
-    echartsContextMenuTimer = setTimeout(() => {
-      if (params.componentType === "graphic") {
-        warningItem.value = params.info;
-        menuData.value = [
-          { label: "删除画线", key: "deleteWarningLine" },
-          { label: "修改画线", key: "changeWarningLine" },
-        ];
+};
+// 图表渲染: 副图
+const drawSub = () => {
+  if (!config.value.showSubChart || !klineSubRef.value) return;
+
+  const { time } = chartData.value;
+  const { gridLeft, gridRight, maxShowCounts, defaultShowCounts } = config.value;
+  let startValue = time.length - 1 - defaultShowCounts;
+  let endValue = time.length - 1;
+
+  // 从主图获取当前的dataZoom位置
+  if (mainChartIns && !mainChartIns.isDisposed()) {
+    const option = mainChartIns.getOption();
+    if (option?.dataZoom?.[0]) {
+      const { startValue: cacheStart, endValue: cacheEnd } = option.dataZoom[0];
+      if (cacheStart !== undefined && cacheEnd !== undefined) {
+        startValue = cacheStart;
+        endValue = cacheEnd;
       }
-      clearTimeout(echartsContextMenuTimer);
-      echartsContextMenuTimer = null;
-    });
+    }
+  }
+
+  requestAnimationFrame(() => {
+    klineSubRef.value.draw({ startValue, endValue, maxValueSpan: maxShowCounts }, { gridLeft, gridRight });
   });
 };
+// 图表渲染: 预警线
+const drawLine = () => {
+  if (!mainChartIns) return;
 
-const getMainData = async () => {
+  // 取消正在进行的绘线
+  if (drawLineFrameId) {
+    cancelAnimationFrame(drawLineFrameId);
+    drawLineFrameId = null;
+  }
+
+  drawLineFrameId = requestAnimationFrame(() => {
+    const mainChartOption = mainChartIns?.getOption();
+    if (!mainChartOption) return;
+    const width = mainChartIns?.getWidth();
+    const height = mainChartIns?.getHeight();
+    if (!width || !height) return;
+
+    mainChartIns?.setOption(
+      {
+        graphic: getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, () => {
+          updateWarningLineAndDraw();
+        }),
+      },
+      {
+        notMerge: false,
+        replaceMerge: ["graphic"],
+        lazyUpdate: true,
+      },
+    );
+    drawLineFrameId = null;
+  });
+};
+// 图表渲染: 区域框选
+const drawBrush = () => {
+  if (brushFrameId) {
+    cancelAnimationFrame(brushFrameId);
+  }
+
+  brushFrameId = requestAnimationFrame(() => {
+    const { time } = chartData.value;
+    if (!props.brushRange || !time?.length || !mainChartIns) return;
+
+    let startTime = dayjs(props.brushRange[0]).format("YYYY-MM-DD 00:00:00");
+    let endTime = dayjs(props.brushRange[1]).format("YYYY-MM-DD 23:59:59");
+    let brushStartTime = null;
+    let brushEndTime = null;
+
+    switch (String(props.cycle)) {
+      case "6": {
+        brushStartTime = time.find((item) => dayjs(item).format("YYYY-MM-DD") === dayjs(startTime).format("YYYY-MM-DD"));
+        brushEndTime = brushStartTime;
+        break;
+      }
+      case "7": {
+        brushStartTime = time.find((item) => dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(startTime).day(5).format("YYYY-MM-DD"));
+        brushEndTime = time.findLast((item) => dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(endTime).day(5).format("YYYY-MM-DD"));
+        break;
+      }
+      case "8": {
+        brushStartTime = time.find((item) => dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(startTime).endOf("month").format("YYYY-MM-DD"));
+        brushEndTime = time.findLast((item) => dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(endTime).endOf("month").format("YYYY-MM-DD"));
+        break;
+      }
+      default: {
+        brushStartTime = time.find((item) => {
+          const condition1 = dayjs(item).format("YYYY-MM-DD") === dayjs(startTime).format("YYYY-MM-DD");
+          const condition2 = new Date(item).getTime() >= new Date(startTime).getTime();
+          return condition1 && condition2;
+        });
+        brushEndTime = time.findLast((item) => {
+          const condition1 = dayjs(item).format("YYYY-MM-DD") === dayjs(endTime).format("YYYY-MM-DD");
+          const condition2 = new Date(item).getTime() <= new Date(endTime).getTime();
+          return condition1 && condition2;
+        });
+      }
+    }
+
+    if (brushStartTime && brushEndTime) {
+      mainChartIns.dispatchAction({
+        type: "brush",
+        areas: [
+          {
+            brushType: "lineX",
+            coordRange: [brushStartTime, brushEndTime],
+            xAxisIndex: 0,
+          },
+        ],
+      });
+    }
+    brushFrameId = null;
+  });
+};
+
+// 获取主数据
+const getMainData = async () => {
   try {
     if (!props.variety || !props.cycle) return;
+
     const { variety, featureId, cycle, indicatorStore, mainIndicator, right, startTime, endTime } = props;
     const { defaultShowCounts, addCounts, showWarningLine, getFactorData } = config.value;
+
+    // 显示loading
+    initChart();
+
+    if (mainChartIns && !mainChartIns.isDisposed()) {
+      mainChartIns.showLoading({
+        text: "加载中...",
+        color: "#409eff",
+        textColor: "#fff",
+        maskColor: "rgba(0, 0, 0, 0.7)",
+        zlevel: 0,
+      });
+    }
+
     const params = {
       variety,
       featureId,
@@ -386,53 +353,58 @@ const getMainData = async () => {
       showWarningLine,
       getFactorData,
     };
+
     if (startTime && endTime) {
-      // 开始时间+结束时间
       params.startTime = startTime;
       params.endTime = endTime;
     } else if (startTime) {
-      // 开始时间
       params.startTime = startTime;
       params.limit = defaultShowCounts + addCounts;
     } else if (endTime) {
-      // 结束时间
       params.endTime = endTime;
       params.limit = defaultShowCounts + addCounts;
     } else {
-      // 未传入时间，使用最新时间作为结束时间请求数据
       params.endTime = dayjs().add(1, "hour").format("YYYY-MM-DD HH:mm:ss");
       params.limit = defaultShowCounts + addCounts;
     }
+
     const res = await getKlineBasic(params);
+
     if (!res?.body?.kline?.time?.length) {
       isEmpty.value = true;
       isError.value = false;
+      hideLoading();
       return;
-    } else {
-      isEmpty.value = false;
-      isError.value = false;
     }
+
+    isEmpty.value = false;
+    isError.value = false;
     chartData.value = res?.body?.kline;
     warningLineData.value = res?.body?.warningLine || [];
-    draw();
-    drawLine();
+
+    // 使用RAF链式渲染
+    await nextTick();
+    scheduleRender(false);
+
     if (getFactorData) {
       emit("getFactorData", res?.body?.factor);
     }
+
+    hideLoading();
   } catch (err) {
+    hideLoading();
     isError.value = true;
     isEmpty.value = false;
     throw new Error(err);
   }
 };
-
-// 加载历史/未来数据
+// 加载历史数据
 const getMoreData = async (type) => {
   const { variety, cycle, indicatorStore, mainIndicator, right } = props;
   const { addCounts } = config.value;
   const { time } = chartData.value;
+
   if (type === "history") {
-    // 加载历史数据
     const res = await getKline({
       variety,
       cycle,
@@ -446,261 +418,180 @@ const getMoreData = async (type) => {
     chartData.value = {
       time: [...res.body.time, ...chartData.value.time.slice(1)],
       data: [...res.body.data, ...chartData.value.data.slice(1)],
-      mainIndicator: chartData.value.mainIndicator.map((item, index) => {
-        return {
-          ...item,
-          data: [...(res.body.mainIndicator[index]?.data ?? []), ...item.data.slice(1)],
-        };
-      }),
-      subIndicator: chartData.value.subIndicator.map((item, index) => {
-        return {
-          ...item,
-          data: [...(res.body.subIndicator[index]?.data ?? []), ...item.data.slice(1)],
-        };
-      }),
+      mainIndicator: chartData.value.mainIndicator.map((item, index) => ({
+        ...item,
+        data: [...(res.body.mainIndicator[index]?.data ?? []), ...item.data.slice(1)],
+      })),
+      subIndicator: chartData.value.subIndicator.map((item, index) => ({
+        ...item,
+        data: [...(res.body.subIndicator[index]?.data ?? []), ...item.data.slice(1)],
+      })),
     };
-    // 绘制
-    draw(true);
-    // 判断是否加载完全部数据
+    console.log("触发了加载更多数据");
+    // 使用RAF链式渲染，保持当前缩放位置
+    await nextTick();
+    scheduleRender(true);
     if (res.body.data.length < addCounts) {
       isloadAllHistory = true;
+      console.log("历史数据已经全部加载完毕");
     }
     isLoadHistory = false;
-  } else {
-    // 加载未来数据
   }
 };
+// 键盘事件
+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;
 
-const draw = (keepDataZoom = false) => {
-  initChart();
-  const { time } = chartData.value;
-  const { gridRight, gridLeft, defaultShowCounts, maxShowCounts, showSubChart } = config.value;
-  let startValue = time.length - 1 - defaultShowCounts;
-  let endValue = time.length - 1;
-  // 保持缩放位置
-  if (keepDataZoom) {
-    const originOption = mainChartIns.getOption();
-    const originTime = originOption?.xAxis?.[0]?.data;
-    const originDataZoom = originOption?.dataZoom?.[0];
-    const originStartTime = originTime[originDataZoom?.startValue];
-    const originEndTime = originTime[originDataZoom?.endValue];
-    startValue = time.findIndex((item) => item === originStartTime);
-    endValue = time.findIndex((item) => item === originEndTime);
-  }
-  const options = getMainOptions(chartData.value, config.value, startValue, endValue, props.cycle);
-  mainChartIns.setOption(options, true);
-  activeIndex.value = endValue;
-  // 如果传入了刷选时间段
-  if (props.brushRange) {
-    let brushStartTime = null;
-    let brushEndTime = null;
-    switch (props.cycle) {
-      // 日
-      case "6": {
-        brushStartTime = time.find((item) => {
-          return new Date(item).getTime() >= new Date(props.brushRange[0]).getTime() || dayjs(item).format("YYYY-MM-DD") === dayjs(props.brushRange[0]).format("YYYY-MM-DD");
-        });
-        brushEndTime = time.findLast((item) => {
-          return new Date(item).getTime() <= new Date(props.brushRange[1]).getTime() || dayjs(item).format("YYYY-MM-DD") === dayjs(props.brushRange[1]).format("YYYY-MM-DD");
-        });
-        break;
+  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;
       }
-      // 周
-      case "7": {
-        brushStartTime = time.find((item) => {
-          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(props.brushRange[0]).day(5).format("YYYY-MM-DD");
-        });
-        brushEndTime = time.findLast((item) => {
-          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(props.brushRange[1]).day(5).format("YYYY-MM-DD");
-        });
-        break;
+      if (activeIndex.value > 0) {
+        activeIndex.value -= 1;
       }
-      // 月
-      case "8": {
-        brushStartTime = time.find((item) => {
-          return dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(props.brushRange[0]).endOf("month").format("YYYY-MM-DD");
-        });
-        brushEndTime = time.findLast((item) => {
-          return dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(props.brushRange[1]).endOf("month").format("YYYY-MM-DD");
-        });
-        break;
+      break;
+    }
+    case "ArrowRight": {
+      if (endValue < xAxisData.length - 1) {
+        startValue += 1;
+        endValue += 1;
       }
-      default: {
-        brushStartTime = time.find((item) => {
-          return new Date(item).getTime() >= new Date(props.brushRange[0]).getTime();
-        });
-        brushEndTime = time.findLast((item) => {
-          return new Date(item).getTime() <= new Date(props.brushRange[1]).getTime();
-        });
+      if (isHover.value && activeIndex.value < xAxisData.length - 1) {
+        activeIndex.value += 1;
       }
+      break;
     }
-    console.log(brushStartTime, brushEndTime);
+  }
+
+  requestAnimationFrame(() => {
+    mainChartIns.dispatchAction({ type: "dataZoom", startValue, endValue });
     mainChartIns.dispatchAction({
-      type: "brush",
-      areas: [
-        {
-          brushType: "lineX",
-          coordRange: [brushStartTime, brushEndTime],
-          xAxisIndex: 0,
-        },
-      ],
+      type: "updateAxisPointer",
+      seriesIndex: 0,
+      dataIndex: isHover.value ? activeIndex.value : null,
     });
-  }
-  if (showSubChart) {
-    klineSubRef.value.draw({ startValue, endValue, maxValueSpan: maxShowCounts }, { gridLeft, gridRight });
-  }
-  drawBrush();
+    mainChartIns.dispatchAction({
+      type: "highlight",
+      dataIndex: isHover.value ? activeIndex.value : endValue,
+    });
+  });
 };
+// 图表事件
+const addEventListener = () => {
+  mainChartIns?.on("datazoom", (params) => {
+    clearTimeout(mainDataZoomTimer);
+    mainDataZoomTimer = setTimeout(() => {
+      const { loadCheckCounts } = config.value;
+      if (mainChartIns?.getOption()?.dataZoom?.[0]) {
+        const { startValue } = mainChartIns?.getOption()?.dataZoom?.[0];
+        if (startValue < loadCheckCounts && !isLoadHistory && !isloadAllHistory) {
+          isLoadHistory = true;
+          getMoreData("history");
+        }
+        drawLine(); // 使用RAF优化的绘线
+      }
+      clearTimeout(mainDataZoomTimer);
+    }, 100);
+  });
 
-// 绘制线
-const drawLine = () => {
-  if (!mainChartIns) return;
-  const mainChartOption = mainChartIns?.getOption();
-  if (!mainChartOption) return;
-  mainChartIns?.setOption(
-    {
-      ...mainChartOption,
-      graphic: [
-        ...getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, () => {
-          updateWarningLineAndDraw();
-        }),
-      ],
-    },
-    true
-  );
-  drawBrush();
-};
+  mainChartIns?.on("highlight", (data) => {
+    let index = data.dataIndex || -1;
+    if (data.batch) {
+      index = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
+    }
+    clearTimeout(highlightTimer);
+    highlightTimer = setTimeout(() => {
+      activeIndex.value = index;
+      clearTimeout(highlightTimer);
+    }, 20);
+  });
 
-// 区域框选
-const drawBrush = () => {
-  const { time } = chartData.value;
-  // 如果传入了刷选时间段
-  if (props.brushRange && time?.length) {
-    // 传入时段的始末时间
-    let startTime = dayjs(props.brushRange[0]).format("YYYY-MM-DD 00:00:00");
-    let endTime = dayjs(props.brushRange[1]).format("YYYY-MM-DD 23:59:59");
-    // 匹配到对应K线的时间段始末时间
-    let brushStartTime = null;
-    let brushEndTime = null;
-    switch (props.cycle) {
-      // 日
-      case "6": {
-        brushStartTime = time.find((item) => dayjs(item).format("YYYY-MM-DD") === dayjs(startTime).format("YYYY-MM-DD"));
-        brushEndTime = brushStartTime;
-        break;
-      }
-      // 周
-      case "7": {
-        brushStartTime = time.find((item) => {
-          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(startTime).day(5).format("YYYY-MM-DD");
-        });
-        brushEndTime = time.findLast((item) => {
-          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(endTime).day(5).format("YYYY-MM-DD");
-        });
-        break;
-      }
-      // 月
-      case "8": {
-        brushStartTime = time.find((item) => {
-          return dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(startTime).endOf("month").format("YYYY-MM-DD");
-        });
-        brushEndTime = time.findLast((item) => {
-          return dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(endTime).endOf("month").format("YYYY-MM-DD");
-        });
-        break;
-      }
-      default: {
-        brushStartTime = time.find((item) => {
-          const condition1 = dayjs(item).format("YYYY-MM-DD") === dayjs(startTime).format("YYYY-MM-DD");
-          const condition2 = new Date(item).getTime() >= new Date(startTime).getTime();
-          return condition1 && condition2;
-        });
-        brushEndTime = time.findLast((item) => {
-          const condition1 = dayjs(item).format("YYYY-MM-DD") === dayjs(endTime).format("YYYY-MM-DD");
-          const condition2 = new Date(item).getTime() <= new Date(endTime).getTime();
-          return condition1 && condition2;
-        });
+  mainChartIns?.on("globalout", () => {
+    const timer = setTimeout(() => {
+      clearTimeout(timer);
+      const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;
+      activeIndex.value = index;
+    }, 30);
+  });
+
+  let echartsContextMenuTimer = null;
+  mainChartIns?.on("contextmenu", (params) => {
+    echartsContextMenuTimer = setTimeout(() => {
+      if (params.componentType === "graphic") {
+        warningItem.value = params.info;
+        menuData.value = [
+          { label: "删除画线", key: "deleteWarningLine" },
+          { label: "修改画线", key: "changeWarningLine" },
+        ];
       }
-    }
-    mainChartIns.dispatchAction({
-      type: "brush",
-      areas: [
-        {
-          brushType: "lineX",
-          coordRange: [brushStartTime, brushEndTime],
-          xAxisIndex: 0,
-        },
-      ],
+      clearTimeout(echartsContextMenuTimer);
+      echartsContextMenuTimer = null;
     });
-  }
+  });
 };
 
-// 更新预警线并绘制
+// 预警线相关辅助函数
 const updateWarningLineAndDraw = async () => {
   const res = await getWarningLine({ featureId: props.featureId });
   warningLineData.value = res?.body || [];
   drawLine();
   emit("change", "warningLine", warningLineData.value);
 };
-
 const menuClick = async (item) => {
   const { variety, varietyName, featureId, featureType } = props;
+
   if (item.key === "drawWarningLine") {
-    // 画线预警
-    // 拿到当前主图配置项
     const mainChartOption = mainChartIns?.getOption();
     const oldTooltip = mainChartOption.tooltip[0];
+
     mainChartIns?.setOption({
       ...mainChartOption,
-      // 指示器样式
       tooltip: {
         ...oldTooltip,
-        // 坐标轴指示器
         axisPointer: {
-          // 保留原有部分配置
           ...oldTooltip.axisPointer,
-          // X轴指示线的宽度
-          lineStyle: {
-            width: 0,
-          },
-          // Y轴指示线的宽度
-          crossStyle: {
-            width: 2,
-          },
-          // 文本标签
+          lineStyle: { width: 0 },
+          crossStyle: { width: 2 },
           label: {
-            // 保留原有部分配置
             ...oldTooltip.axisPointer.label,
-            // 颜色改为透明
             backgroundColor: "transparent",
-            // 仅显示Y轴值
-            formatter: (data) => "",
+            formatter: () => "",
           },
         },
       },
     });
-    // 编写点击事件:获取到数据发送给后端
+
     const handleClick = async (el) => {
-      // (1).在触发点击事件后,第一时间将图表绑定的点击事件清除
       mainChartIns?.getZr().off("mousedown", handleClick);
-      // (2).根据点击位置获取到Y轴具体数据
       const yAxisValue = mainChartIns?.convertFromPixel({ yAxisIndex: 0 }, el.offsetY);
-      // (3).格式化画线预警价格
       const newWarnPrice = Math.round(yAxisValue * 1000) / 1000;
-      // (4).将指示器恢复成原始样式
+
       mainChartIns?.setOption({
         ...mainChartOption,
-        // 指示器样式
         tooltip: {
           ...oldTooltip,
           axisPointer: {
             ...oldTooltip.axisPointer,
-            lineStyle: {
-              width: 1,
-            },
-            crossStyle: {
-              width: 1,
-            },
+            lineStyle: { width: 1 },
+            crossStyle: { width: 1 },
             label: {
               ...oldTooltip.axisPointer.label,
               backgroundColor: null,
@@ -708,21 +599,20 @@ const menuClick = async (item) => {
           },
         },
       });
-      // (6).发送新增预警线请求
+
       await addWarningLine({
-        featureCode: variety, //品种代码
-        featureName: varietyName, //品种名称
-        featureId, //品种id
-        featureType, //品种类型
+        featureCode: variety,
+        featureName: varietyName,
+        featureId,
+        featureType,
         warnPrice: newWarnPrice,
       });
       ElMessage.success("画线预警成功!");
       updateWarningLineAndDraw();
     };
-    // 4.绑定echarts点击事件
+
     mainChartIns?.getZr().on("mousedown", handleClick);
   } else if (item.key === "deleteWarningLine") {
-    // 删除预警线
     await deleteWarningLine({ id: warningItem.value.id });
     ElMessage.success("画线预警删除成功");
     updateWarningLineAndDraw();
@@ -731,25 +621,55 @@ const menuClick = async (item) => {
     warningLineChangeValue.value = warningItem.value.warnPrice;
   }
 };
-
 const changeWarningLine = async () => {
   const { variety, varietyName, featureId, featureType } = props;
   await updateWarningLine({
     id: warningItem.value.id,
-    featureCode: variety, //品种代码
-    featureName: varietyName, //品种名称
-    featureId, //品种id
-    featureType, //品种类型
+    featureCode: variety,
+    featureName: varietyName,
+    featureId,
+    featureType,
     warnPrice: warningLineChangeValue.value,
   });
   ElMessage.success("画线预警修改成功");
   updateWarningLineAndDraw();
 };
-
 const closeContextMenuCallBack = () => {
   menuData.value = [...defaultMenuData];
 };
 
+onMounted(() => {
+  initRequestByEnv(props.env);
+  getMainData();
+  window.addEventListener("keydown", handleKeyDownEvent);
+});
+watch(
+  () => [props.variety, props.cycle, props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator],
+  () => {
+    // 重置加载状态
+    isLoadHistory = false;
+    isloadAllHistory = false;
+    getMainData();
+  },
+  { deep: true },
+);
+onUnmounted(() => {
+  // 取消所有动画帧
+  if (renderFrameId) {
+    cancelAnimationFrame(renderFrameId);
+    renderFrameId = null;
+  }
+  if (drawLineFrameId) {
+    cancelAnimationFrame(drawLineFrameId);
+    drawLineFrameId = null;
+  }
+  mainChartIns?.off("datazoom");
+  mainChartIns?.off("highlight");
+  mainChartIns?.off("globalout");
+  mainChartIns?.dispose();
+  resizeRo?.dispose();
+  window.removeEventListener("keydown", handleKeyDownEvent);
+});
 defineExpose({
   draw: (type, data) => {
     if (type === "warningLine") {
@@ -760,6 +680,107 @@ defineExpose({
 });
 </script>
 
+<template>
+  <div
+    class="klineBasic"
+    @mousemove="isHover = true"
+    @mouseout="isHover = false"
+  >
+    <div class="klineBasic-tips">
+      <KlineTips
+        :variety="variety"
+        :data="chartData"
+        :activeIndex="activeIndex"
+      />
+    </div>
+    <div
+      class="klineBasic-main"
+      :style="{ height: config.showSubChart ? '70%' : '100%' }"
+    >
+      <Contextmenu @closeContextMenuCallBack="closeContextMenuCallBack">
+        <div
+          ref="klineBasicMainRef"
+          style="height: 100%"
+        ></div>
+        <template #popover>
+          <el-menu
+            :style="{
+              borderRadius: '4px',
+              overflow: 'hidden',
+              background: '#fff',
+              borderRight: 0,
+            }"
+          >
+            <el-menu-item
+              v-for="item in menuData"
+              style="height: 36px"
+              :key="item.key"
+              :index="item.key"
+              @click="menuClick(item)"
+            >
+              {{ item.label }}
+            </el-menu-item>
+          </el-menu>
+        </template>
+      </Contextmenu>
+    </div>
+    <div
+      class="klineBasic-sub"
+      v-if="config.showSubChart"
+    >
+      <KlineSub
+        ref="klineSubRef"
+        v-model="subIndicator"
+        :data="chartData"
+        :cycle="cycle"
+        :activeIndex="activeIndex"
+        :subIndicatorList="indicatorStore?.subIndicatorList"
+      />
+    </div>
+    <div
+      class="klineBasic-empty"
+      v-if="isEmpty"
+    >
+      <el-empty
+        class="klineBasic-empty-content"
+        description="暂无数据"
+      />
+    </div>
+    <div
+      class="klineBasic-error"
+      v-if="isError"
+    >
+      <div class="klineBasic-error-content">加载失败，请刷新重试</div>
+      <div style="text-align: center">
+        <el-button @click="getMainData">刷新</el-button>
+      </div>
+    </div>
+  </div>
+  <!-- 画线预警-修改价格弹窗 -->
+  <el-dialog
+    v-model="warningLineChangeVisible"
+    title="画线预警-修改价格"
+    width="30%"
+    align-center
+  >
+    <span style="margin-right: 10px">预警价格:</span>
+    <el-input-number
+      v-model="warningLineChangeValue"
+      placeholder="输入预警价格"
+    />
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="warningLineChangeVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          @click="changeWarningLine"
+          >确定</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
 <style lang="scss" scoped>
 .klineBasic {
   width: 100%;