st-comp 0.0.246 → 0.0.247

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.246",
+  "version": "0.0.247",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/KlineBasic/components/KlineSub/index.vue

@@ -37,22 +37,23 @@ import { formatIndicatorNumber } from "../../utils"
 import { stMath } from "st-func";
 const { round } = stMath;
 
-let subChart;
-let resizeRo; // dom元素监听事件
+let subChart = null;
+let resizeRo = null;
+const isAlive = ref(true); // 组件活跃状态
 
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   cycle: {
     type: [String, Number],
     default: () => null,
-  }, // 周期id
+  },
   data: { type: Object, require: true },
   activeIndex: { type: [Number, String], require: true },
-  modelValue: { type: String, required: true }, // 副图指标
-  subIndicatorList: { type: Array, required: true }, // 副图指标列表
+  modelValue: { type: String, required: true },
+  subIndicatorList: { type: Array, required: true },
 });
 
-const subChartRef = ref(); // 拖动轴
+const subChartRef = ref();
 const subIndicator = computed({
   get() {
     return props.modelValue;
@@ -63,27 +64,41 @@ const subIndicator = computed({
 });
 
 const subIndicatorTips = computed(() => {
+  if (!isAlive.value) return [];
   const { data, activeIndex } = props;
   return data?.subIndicator?.map((item) => ({ label: item.key, color: item.color, value: formatIndicatorNumber(item.data[activeIndex]) })) || [];
 });
+
 onMounted(() => {
+  isAlive.value = true;
+  if (!subChartRef.value) return;
+  
   subChart = echarts.init(subChartRef.value);
-  // 绑定resize事件
+  
   let isFirst = true;
   resizeRo = new ResizeObserver(() => {
     if (isFirst) {
-      isFirst = null;
+      isFirst = false;
       return;
     }
-    subChart.resize();
+    if (isAlive.value && subChart && !subChart.isDisposed()) {
+      subChart.resize();
+    }
   });
   resizeRo.observe(subChartRef.value);
 });
 
 onUnmounted(() => {
-  subChart.dispose();
-  resizeRo.disconnect();
-  resizeRo = null;
+  isAlive.value = false;
+  
+  if (subChart && !subChart.isDisposed()) {
+    subChart.dispose();
+    subChart = null;
+  }
+  if (resizeRo) {
+    resizeRo.disconnect();
+    resizeRo = null;
+  }
 });
 
 // 获取副图颜色
@@ -113,10 +128,15 @@ const getSubBarStyle = (data, index) => {
 
 defineExpose({
   connect: (chart) => {
+    if (!isAlive.value || !subChart || subChart.isDisposed()) return;
     echarts.connect([chart, subChart]);
-  }, // 联动
+  },
   draw: (drawConfig, config) => {
+    if (!isAlive.value || !subChart || subChart.isDisposed()) return;
+    
     nextTick(() => {
+      if (!isAlive.value || !subChart || subChart.isDisposed()) return;
+      
       const { startValue, endValue, maxValueSpan } = drawConfig;
       const { leftYAxisRange, rightYAxisRange } = props.data.subIndicator[0];
       const series = props.data.subIndicator.map((item) => {
@@ -271,7 +291,7 @@ defineExpose({
         true
       );
     });
-  }, // 重置
+  },
 });
 </script>
 
@@ -309,4 +329,4 @@ defineExpose({
     height: calc(100% - 26px);
   }
 }
-</style>
+</style>

package/packages/KlineBasic/components/KlineTips/index.vue

@@ -32,13 +32,13 @@ const close = ref(null);
 
 watch(() => props.activeIndex, () => { 
   if (close.value === null) {
-    close.value = props.data.data[props.activeIndex][1]
+    close.value = props.data.data[props.activeIndex]?.[1] ?? 0
   }
 });
 
 watch(() => props.data, () => { 
   if (close.value === null) {
-    close.value = props.data.data[props.activeIndex][1]
+    close.value = props.data.data[props.activeIndex]?.[1] ?? 0
   }
 });
 

package/packages/KlineBasic/index.vue

@@ -3,7 +3,7 @@ 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 { addResizeListener, debounce } from "st-func";
 import { getMainOptions, getWarningLineOptions } from "./utils";
 import KlineTips from "./components/KlineTips/index.vue";
 import KlineSub from "./components/KlineSub/index.vue";
@@ -17,9 +17,6 @@ let renderFrameId = null; // 渲染帧ID
 let drawLineFrameId = null; // 绘线帧ID
 let brushFrameId = null; // 区域框选帧ID
 
-let highlightTimer; // 高亮事件定时器
-let mainDataZoomTimer; // datazoom事件定时器
-
 let isLoadHistory = false; // 是否正在加载历史数据
 let isloadAllHistory = false; // 是否加载完全部历史数据
 
@@ -103,10 +100,10 @@ const config = computed(() => {
     addCounts: 2000,
     maxShowCounts: 5000,
     loadCheckCounts: 500,
-    showSubChart: true,
     gridTop: 48,
     gridLeft: 80,
     gridRight: 50,
+    showSubChart: true,
     showWarningLine: true,
     getFactorData: true,
     ...props.config,
@@ -359,13 +356,13 @@ const getMainData = async () => {
       params.endTime = endTime;
     } else if (startTime) {
       params.startTime = startTime;
-      params.limit = defaultShowCounts + addCounts;
+      params.limit = addCounts;
     } else if (endTime) {
       params.endTime = endTime;
-      params.limit = defaultShowCounts + addCounts;
+      params.limit = addCounts;
     } else {
       params.endTime = dayjs().add(1, "hour").format("YYYY-MM-DD HH:mm:ss");
-      params.limit = defaultShowCounts + addCounts;
+      params.limit = addCounts;
     }
 
     const res = await getKlineBasic(params);
@@ -496,9 +493,9 @@ const handleKeyDownEvent = ({ code, ctrlKey }) => {
 };
 // 图表事件
 const addEventListener = () => {
-  mainChartIns?.on("datazoom", (params) => {
-    clearTimeout(mainDataZoomTimer);
-    mainDataZoomTimer = setTimeout(() => {
+  mainChartIns?.on(
+    "datazoom",
+    debounce((params) => {
       const { loadCheckCounts } = config.value;
       if (mainChartIns?.getOption()?.dataZoom?.[0]) {
         const { startValue } = mainChartIns?.getOption()?.dataZoom?.[0];
@@ -508,33 +505,33 @@ const addEventListener = () => {
         }
         drawLine(); // 使用RAF优化的绘线
       }
-      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;
+    }, 100),
+  );
+
+  mainChartIns?.on(
+    "highlight",
+    debounce((data) => {
+      let index = data.dataIndex || -1;
+      if (data.batch) {
+        index = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
+      }
       activeIndex.value = index;
-    }, 30);
-  });
+    }, 20),
+  );
+
+  mainChartIns?.on(
+    "globalout",
+    debounce(() => {
+      if (mainChartIns) {
+        const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;
+        activeIndex.value = index;
+      }
+    }, 30),
+  );
 
-  let echartsContextMenuTimer = null;
-  mainChartIns?.on("contextmenu", (params) => {
-    echartsContextMenuTimer = setTimeout(() => {
+  mainChartIns?.on(
+    "contextmenu",
+    debounce((params) => {
       if (params.componentType === "graphic") {
         warningItem.value = params.info;
         menuData.value = [
@@ -542,10 +539,8 @@ const addEventListener = () => {
           { label: "修改画线", key: "changeWarningLine" },
         ];
       }
-      clearTimeout(echartsContextMenuTimer);
-      echartsContextMenuTimer = null;
-    });
-  });
+    }, 0),
+  );
 };
 
 // 预警线相关辅助函数
@@ -686,7 +681,10 @@ defineExpose({
     @mousemove="isHover = true"
     @mouseout="isHover = false"
   >
-    <div class="klineBasic-tips">
+    <div
+      v-if="chartData.time?.length"
+      class="klineBasic-tips"
+    >
       <KlineTips
         :variety="variety"
         :data="chartData"

package/src/pages/KlineBasic/index.vue

@@ -178,14 +178,14 @@ import { getCycleList, host } from './api';
 const indicatorStore = useIndicatorStore();
 
 // 显示模式
-const displayMode = ref('single'); // single: 单周期, multi: 多周期
+const displayMode = ref('multi'); // single: 单周期, multi: 多周期
 const show = ref(false);
 
 // 周期映射
 const cycleMap = {
-  '15m': { value: '1', label: '15分钟' },
-  '30m': { value: '2', label: '30分钟' },
-  '60m': { value: '3', label: '60分钟' },
+  '15m': { value: '3', label: '15分钟' },
+  '30m': { value: '4', label: '30分钟' },
+  '60m': { value: '5', label: '60分钟' },
   '1d': { value: '6', label: '日线' },
   '1w': { value: '7', label: '周线' },
   '1mon': { value: '8', label: '月线' }
@@ -193,9 +193,9 @@ const cycleMap = {
 
 // 多周期展示的周期列表
 const multiCycleList = [
-  { cycle: '1', cycleLabel: '15分钟' },   // 15m
-  { cycle: '2', cycleLabel: '30分钟' },   // 30m
-  { cycle: '3', cycleLabel: '60分钟' },   // 60m
+  { cycle: '3', cycleLabel: '15分钟' },   // 15m
+  { cycle: '4', cycleLabel: '30分钟' },   // 30m
+  { cycle: '5', cycleLabel: '60分钟' },   // 60m
   { cycle: '6', cycleLabel: '日线' },     // 1d
   { cycle: '7', cycleLabel: '周线' },     // 1w
   { cycle: '8', cycleLabel: '月线' }      // 1mon