st-comp 0.0.165 → 0.0.166

package/package.json

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

package/packages/KlinePlus/components/SliderChart.vue

@@ -3,7 +3,7 @@
 import dayjs from "dayjs";
 import * as echarts from "echarts";
 import { debounce } from "st-func";
-import { ref, onMounted, onUnmounted, nextTick, inject } from "vue";
+import { ref, onMounted, onUnmounted, watch, nextTick, inject } from "vue";
 
 const { request } = inject("stConfig"); // 组件库全局配置
 
@@ -12,6 +12,8 @@ const sliderChartRef = ref(null);
 
 const emit = defineEmits(["change"]);
 const props = defineProps({
+  // K线当屏时间范围
+  screenTimeRange: { type: Array, required: true },
   // 品种代码
   varietyCode: { type: String, required: true },
   // 品种市场类型: 0-期货, 1-股票, 2-期权
@@ -28,8 +30,8 @@ const klineData = ref({
   time: [],
 });
 
-// 重新载入数据
-const reload = async () => {
+// 获取日线数据
+const getData = async () => {
   const params = {
     varietyCode: props.varietyCode,
     cycle: "6",
@@ -63,7 +65,7 @@ const reload = async () => {
 
   draw("init");
 };
-// 拖动拖拽轴
+// 拖动拖拽轴事件
 const handleDataZoomChange = debounce((params) => {
   if (!params.dataZoomId) return;
   const option = sliderChartIns.getOption();
@@ -78,6 +80,10 @@ const handleDataZoomChange = debounce((params) => {
     // 未检测到, 便不执行后续逻辑
   }
 }, 200);
+// 重置拖拽轴位置
+const reset = debounce(({ startTime, endTime }) => {
+  draw("reset", { startTime, endTime });
+}, 100);
 
 // 绘制
 const draw = (type, params) => {
@@ -130,6 +136,12 @@ const draw = (type, params) => {
         ],
       };
       sliderChartIns.setOption(option, true);
+
+      // 避免K线主体数据加载快于拖拽轴, 在这里检测一下, 如果K线已加载了那么就重定位一下
+      if (props.screenTimeRange.length) {
+        const [startTime, endTime] = props.screenTimeRange;
+        reset({ startTime, endTime });
+      }
       break;
     }
     // 根据时间, 更新拖拽轴定位
@@ -170,19 +182,24 @@ onMounted(() => {
   nextTick(() => {
     sliderChartIns = echarts.init(sliderChartRef.value);
     sliderChartIns.on("datazoom", handleDataZoomChange);
-    reload();
+    getData();
   });
 });
+// 监控: [当屏首末时间] => 拖拽轴重定位
+watch(
+  () => props.screenTimeRange,
+  (newValue) => {
+    const [startTime, endTime] = newValue;
+    reset({ startTime, endTime });
+  },
+  { deep: true }
+);
 onUnmounted(() => {
   sliderChartIns.off("datazoom");
   sliderChartIns.dispose();
 });
 defineExpose({
-  reload,
-  // DOM缩放
   resize: debounce(() => sliderChartIns.resize(), 100),
-  // 重置拖拽轴的定位
-  reset: debounce(({ startTime, endTime }) => draw("reset", { startTime, endTime }), 100),
 });
 </script>
 

package/packages/KlinePlus/index.vue

@@ -576,7 +576,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
   }
 };
 
-// 拖拽轴: 拖拽
+// 拖拽轴: 拖拽回调
 const handleSliderChange = (params) => {
   const { startTime, endTime } = params;
   getMainData({ startTime, endTime });
@@ -678,15 +678,6 @@ watch(
   },
   { deep: true }
 );
-// 监控: [当屏首末时间] => 拖拽轴重定位
-watch(
-  () => screenTimeRange.value,
-  (newValue) => {
-    const [startTime, endTime] = newValue;
-    sliderChartRef.value?.reset({ startTime, endTime });
-  },
-  { deep: true }
-);
 onUnmounted(() => {
   // 解绑
   mainChartIns.off("highlight");
@@ -766,6 +757,7 @@ defineExpose({
       <div class="slider-chart">
         <SliderChart
           ref="sliderChartRef"
+          :screenTimeRange="screenTimeRange"
           :varietyCode="varietyCode"
           :varietyStock="varietyStock"
           :rightType="rightType"