st-comp 0.0.53 → 0.0.55

package/package.json

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

package/packages/KlineNew/components/KlineSlide/index.vue

@@ -122,7 +122,6 @@ defineExpose({
       }
     })
     slideEndIndex = slideEndIndex === -1 ? props.data.length - 1 : slideEndIndex
-    slideStartIndex = slideEndIndex - slideStartIndex > maxValueSpan ? slideEndIndex - maxValueSpan : slideStartIndex
     slideChart.setOption({
       dataZoom: [
         {
@@ -130,6 +129,9 @@ defineExpose({
           startValue: slideStartIndex,
           endValue: slideEndIndex,
           maxValueSpan,
+          textStyle: {
+            color: '#ccc',
+          }
         },
         {
           type: 'inside',

package/packages/KlineNew/components/KlineUtils/index.vue

@@ -1,264 +1,302 @@
 <template></template>
 
 <script setup lang="ts">
-import * as talib from 'talib.js'
+import * as talib from "talib.js";
 
-let isInit = false // 是否初始化
-let loading = true // 初始化loading
-let requestPromise: any[] = [] // 用于存储loading中的计算请求
+let isInit = false; // 是否初始化
+let loading = true; // 初始化loading
+let requestPromise: any[] = []; // 用于存储loading中的计算请求
 
 // 导出数据长度处理
 const sliceData = (data: any[], length: number) => {
-  return data.length > length ? data.slice(data.length - length) : data
-}
+  return data.length > length ? data.slice(data.length - length) : data;
+};
 
 defineExpose({
   // 注册计算指标线方法
   initTalib: async () => {
     if (!isInit) {
       // 未初始化
-      isInit = true
-      await talib.init('./talib.wasm')
-      loading = false
-      requestPromise.forEach(resolve => {
-        resolve()
-      })
-    } else if(loading) {
+      isInit = true;
+      await talib.init("./talib.wasm");
+      loading = false;
+      requestPromise.forEach((resolve) => {
+        resolve();
+      });
+    } else if (loading) {
       // 正在初始化
       return new Promise((resolve) => {
-        requestPromise.push(resolve)
-      })
+        requestPromise.push(resolve);
+      });
     }
   },
   // 键盘事件处理
   handleKeyDown: (e: any, params: any) => {
-    let { startValue, endValue, maxIndex } = params
-    if (e.code === 'ArrowLeft') {
+    let { startValue, endValue, maxIndex } = params;
+    if (e.code === "ArrowLeft") {
       // 左按键
       if (startValue === 0) {
-        return
+        return;
       }
-      startValue = startValue - 1
-      endValue = endValue - 1
-    } else if (e.code === 'ArrowRight') {
+      startValue = startValue - 1;
+      endValue = endValue - 1;
+    } else if (e.code === "ArrowRight") {
       // 右按键
       if (endValue === maxIndex) {
-        return
+        return;
       }
-      startValue = startValue + 1
-      endValue = endValue + 1
-    } else if (e.code === 'ArrowUp') {
+      startValue = startValue + 1;
+      endValue = endValue + 1;
+    } else if (e.code === "ArrowUp") {
       // 上按键-放大 最少保持5条数据
-      if(endValue - startValue < 5) {
-        return
+      if (endValue - startValue < 5) {
+        return;
       }
-      const diff = Math.floor((endValue - startValue) / 2) + 1
-      startValue = startValue + diff
+      const diff = Math.floor((endValue - startValue) / 2) + 1;
+      startValue = startValue + diff;
       if (endValue - startValue < 5) {
-        startValue = endValue - 4
+        startValue = endValue - 4;
       }
-    } else if (e.code === 'ArrowDown') {
+    } else if (e.code === "ArrowDown") {
       // 下按键-缩小
-      const diff = Math.min(500, (endValue - startValue))
-      startValue = startValue - diff - 1
+      const diff = Math.min(500, endValue - startValue);
+      startValue = startValue - diff - 1;
     }
-    return({
+    return {
       startValue,
-      endValue
-    })
+      endValue,
+    };
   },
   // 根据时间解析dataZoom
   getDataZoomInfoByTime: (params: any) => {
-    const { showStartTime, showEndTime, xAxisData, maxShowDays } = params
-    let startValue = -1
-    let endValue = -1
-    let dayPerTime: any = {}
+    const { showStartTime, showEndTime, xAxisData, maxShowDays } = params;
+    let startValue = -1;
+    let endValue = -1;
+    let dayPerTime: any = {};
     xAxisData.forEach((time: any, index: number) => {
-      const date = time.split(' ')[0]
-      dayPerTime[date] = dayPerTime[date] || 0
-      dayPerTime[date] += 1
+      const date = time.split(" ")[0];
+      dayPerTime[date] = dayPerTime[date] || 0;
+      dayPerTime[date] += 1;
       if (new Date(time) >= new Date(showStartTime) && startValue === -1) {
-        startValue = index
+        startValue = index;
       }
       if (new Date(time) <= new Date(showEndTime)) {
-        endValue = index
+        endValue = index;
       }
-    })
+    });
     return {
       startValue,
       endValue,
       maxValueSpan: Math.max(...Object.values(dayPerTime)) * maxShowDays,
-    }
+    };
   },
-  // 计算绘图数据（拖动轴使用）
-  formatDataBySlide: (formatDataParams: any) => {
-    const { originDrawData, addData, startTime, endTime, mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config, timeRange } = formatDataParams
-    let drawData: any = {}
-    const { loadAddCount, preLoadCount } = config
+  /**
+   * @description: 计算绘图数据（拖动轴使用）
+   * @returns: {
+   *  originData, // 原始格式的K线数据 [时间, 开, 高, 低, 收, 交易量, 交易总额]
+   *  candlestickData, // 整理格式后的K线数据 [开, 收, 低, 高, 昨收, 交易总额]
+   *  mainIndicatorData, // 主图指标线数据
+   *  subIndicatorData, // 副图指标线数据
+   *  xAxisData, // 便捷数据 - K线时间轴
+   *  startTime, // 便捷数据 - K线首根时间
+   *  endTime // 便捷数据 - K线末根时间
+   *  length, // 便捷数据 - K线长度
+   * }
+   */
+  formatDataBySlide: (params: any) => {
+    // 1.解构入参
+    const { originDrawData, addData, startTime, endTime } = params;
+    const { mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config, timeRange } = params;
+    const { loadAddCount, preLoadCount } = config;
 
-    const time: any[] = [] // 新增数据全部时间数据，用于计算指标线
-    const open: any[]  = [] // 新增数据全部开盘价，用于指标线计算
-    const close: any[]  = [] // 新增数据全部收盘价，用于指标线计算
-    const high: any[]  = [] // 新增数据全部最高价，用于指标线计算
-    const low: any[]  = [] // 新增数据全部最低价，用于指标线计算
-    let xAxisData: any[] = [] // 用于绘图的x轴时间数据
-    let candlestickData: any[] = [] // 用于绘图的k线图数据
-
-    const originData = addData.filter((item: any, index: number) => {
-      // 赋值
-      time.push(item[0])
-      open.push(item[1])
-      close.push(item[4])
-      high.push(item[2])
-      low.push(item[3])
-      xAxisData.push(item[0])
-      candlestickData.push([ item[1], item[4], item[3], item[2], index === 0 ? 0 : addData[index - 1][4], item[6] ])
-      // 取范围中的数据
-      if (startTime && endTime) {
-        return new Date(startTime) <= new Date(item[0]) && new Date(item[0]) <= new Date(endTime)
-      } else if (endTime) {
-        return index >= addData.length - loadAddCount && new Date(timeRange[0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(timeRange[1])
-      } else if (startTime) {
-        return index >= preLoadCount && new Date(timeRange[0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(timeRange[1])
-      }
-      return false
-    })
-    xAxisData = sliceData(xAxisData, originData.length)
-    candlestickData = sliceData(candlestickData, originData.length)
-    // 指标线相关计算
-    const indicatorFormatData = { time, open, close, high, low, originData: addData }
-    const mainIndicatorConfig = mainIndicatorList.find((item: any) => item.value === mainIndicator).config
-    const mainIndicatorData = mainIndicatorConfig.map((item: any) => ({
-      ...item,
-      data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData, {
-        time: [], open: [], close: [], high: [], low: [], originData: []
-      }) : [], xAxisData.length),
-    }))
-    const subIndicatorConfig = subIndicatorList.find((item: any) => item.value === subIndicator).config
-    const subIndicatorData = subIndicatorConfig.reduce((res: any[], item: any) => {
-      if (item.source === 'calculation') {
-        return [
-          ...res,
-          {
-            ...item,
-            data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData) : [], xAxisData.length)
-          }
-        ]
-      }
-      return res
-    }, [])
-    // 根据不同情况处理数据
+    // 2.初始化K线基础返回数据
+    // =============================================================================================================
+    let originData: any[] = [];
+    let candlestickData: any[] = [];
+    let xAxisData: any[] = [];
+    let indicatorKlineData: any[] = []; // 由于指标线的特性, 计算时会用到渲染范围之外的K线, 所以用这个参数保留最全的数据
+    // [重新加载||历史加载||后续加载]
     if (startTime && endTime) {
-      // 重新搜索
-      drawData = {
-        originData, // 原数据
-        xAxisData, // 时间数据
-        candlestickData, // k线数据
-        mainIndicatorData, // 主图指标线数据
-        subIndicatorData, // 副图数据
-      }
+      // 重新加载
+      originData = addData.filter((item: any) => {
+        return new Date(item[0]) >= new Date(startTime) && new Date(item[0]) <= new Date(endTime);
+      });
+      indicatorKlineData = [...addData];
     } else if (endTime) {
-      // 加载历史数据
-      drawData = {
-        originData: [...originData, ...originDrawData.originData], // 原数据
-        xAxisData: [...xAxisData, ...originDrawData.xAxisData], // 时间数据
-        candlestickData: [...candlestickData, ...originDrawData.candlestickData], // k线数据
-        mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
-          return {
-            ...item,
-            data: [...mainIndicatorData[index].data, ...item.data],
-          }
-        }), // 主图指标线数据
-        subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
-          return {
-            ...item,
-            data: [...subIndicatorData[index].data, ...item.data],
-          }
-        }), // 副图数据
-      }
+      // 历史加载
+      originData = [
+        ...addData.filter((item: any, index: number) => {
+          return (
+            index >= addData.length - loadAddCount &&
+            new Date(timeRange[0]) <= new Date(item[0]) &&
+            new Date(item[0]) <= new Date(timeRange[1])
+          );
+        }),
+        ...originDrawData.originData,
+      ];
+      indicatorKlineData = [...addData, ...originDrawData.originData];
     } else if (startTime) {
-      // 加载新数据
-      drawData = {
-        originData: [...originDrawData.originData, ...originData], // 原数据
-        xAxisData: [...originDrawData.xAxisData, ...xAxisData], // 时间数据
-        candlestickData: [...originDrawData.candlestickData, ...candlestickData], // k线数据
-        mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
-          return {
-            ...item,
-            data: [...item.data, ...mainIndicatorData[index].data],
-          }
-        }), // 主图指标线数据
-        subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
-          return {
-            ...item,
-            data: [...item.data, ...subIndicatorData[index].data],
-          }
-        }), // 副图数据
-      }
+      // 后续加载
+      originData = [
+        ...originDrawData.originData,
+        ...addData.filter((item: any, index: number) => {
+          return (
+            index >= preLoadCount &&
+            new Date(timeRange[0]) <= new Date(item[0]) &&
+            new Date(item[0]) <= new Date(timeRange[1])
+          );
+        }),
+      ];
+      indicatorKlineData = [...originDrawData.originData, ...addData];
     }
-    // 添加一些字段，用于方便使用
-    drawData.length = drawData.xAxisData.length
-    drawData.startTime = drawData.xAxisData[0]
-    drawData.endTime = drawData.xAxisData[drawData.length - 1]
-    return drawData
+    originData.forEach((item, index) => {
+      candlestickData.push([item[1], item[4], item[3], item[2], index === 0 ? 0 : originData[index - 1][4], item[6]]);
+      xAxisData.push(item[0]);
+    });
+    // =============================================================================================================
+
+    // 3.初始化指标线基础返回数据
+    // =============================================================================================================
+    let mainIndicatorData = [];
+    let subIndicatorData = [];
+    const indicatorParams: { [key: string]: any[] } = {
+      time: [],
+      open: [],
+      close: [],
+      high: [],
+      low: [],
+      originData: indicatorKlineData,
+    };
+    // 由于指标线数据是纯值数组, 没有二位数组的时间让echarts固定渲染, 意味着它的数据渲染顺序必须与渲染的K线相呼应
+    // 所以我们要从indicatorKlineData中抽出来originData的开始结束索引, 用于后面切割生成的指标线数据
+    let startIndex: null | number = null;
+    let endIndex: null | number = null;
+    indicatorKlineData.forEach((item: any, index: number) => {
+      indicatorParams.time.push(item[0]);
+      indicatorParams.open.push(item[1]);
+      indicatorParams.close.push(item[4]);
+      indicatorParams.high.push(item[2]);
+      indicatorParams.low.push(item[3]);
+      if (item[0] === originData[0][0]) {
+        startIndex = index;
+      }
+      if (item[0] === originData[originData.length - 1][0]) {
+        endIndex = index + 1;
+      }
+    });
+    // 3.1.主图指标线计算
+    mainIndicatorData = mainIndicatorList
+      .find(({ value }: { value: any }) => value === mainIndicator)
+      .config.map((item: any) => {
+        const { calculationFn } = item;
+        const otherIndicatorParams = { time: [], open: [], close: [], high: [], low: [], originData: [] };
+        return {
+          ...item,
+          data: calculationFn
+            ? calculationFn(talib, indicatorParams, otherIndicatorParams).slice(startIndex, endIndex)
+            : [],
+        };
+      });
+    // 3.2.副图指标线计算
+    subIndicatorData = subIndicatorList
+      .find(({ value }: { value: any }) => value === subIndicator)
+      .config.reduce((result: any[], item: any) => {
+        const { source, calculationFn } = item;
+        if (source === "calculation") {
+          return [
+            ...result,
+            {
+              ...item,
+              data: calculationFn ? calculationFn(talib, indicatorParams).slice(startIndex, endIndex) : [],
+            },
+          ];
+        }
+        return result;
+      }, []);
+    // =============================================================================================================
+
+    return {
+      originData,
+      candlestickData,
+      mainIndicatorData,
+      subIndicatorData,
+      xAxisData,
+      startTime: originData[0][0],
+      endTime: originData[originData.length - 1][0],
+      length: originData.length,
+    };
   },
   // 计算绘图数据（根据长度使用）
   formatDataByCount: (formatDataParams: any) => {
-    const { originDrawData, addData, mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config } = formatDataParams
-    let drawData: any = {}
-    const { addCount, preLoadCount } = config
+    const { originDrawData, addData, mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config } =
+      formatDataParams;
+    let drawData: any = {};
+    const { addCount, preLoadCount } = config;
 
-    const time: any[] = [] // 新增数据全部时间数据，用于计算指标线
-    const open: any[]  = [] // 新增数据全部开盘价，用于指标线计算
-    const close: any[]  = [] // 新增数据全部收盘价，用于指标线计算
-    const high: any[]  = [] // 新增数据全部最高价，用于指标线计算
-    const low: any[]  = [] // 新增数据全部最低价，用于指标线计算
-    let xAxisData: any[] = [] // 用于绘图的x轴时间数据
-    let candlestickData: any[] = [] // 用于绘图的k线图数据
+    const time: any[] = []; // 新增数据全部时间数据，用于计算指标线
+    const open: any[] = []; // 新增数据全部开盘价，用于指标线计算
+    const close: any[] = []; // 新增数据全部收盘价，用于指标线计算
+    const high: any[] = []; // 新增数据全部最高价，用于指标线计算
+    const low: any[] = []; // 新增数据全部最低价，用于指标线计算
+    let xAxisData: any[] = []; // 用于绘图的x轴时间数据
+    let candlestickData: any[] = []; // 用于绘图的k线图数据
 
     const originData = addData.filter((item: any, index: number) => {
       // 赋值
-      time.push(item[0])
-      open.push(item[1])
-      close.push(item[4])
-      high.push(item[2])
-      low.push(item[3])
-      xAxisData.push(item[0])
-      candlestickData.push([ item[1], item[4], item[3], item[2], index === 0 ? 0 : addData[index - 1][4], item[6] ])
+      time.push(item[0]);
+      open.push(item[1]);
+      close.push(item[4]);
+      high.push(item[2]);
+      low.push(item[3]);
+      xAxisData.push(item[0]);
+      candlestickData.push([item[1], item[4], item[3], item[2], index === 0 ? 0 : addData[index - 1][4], item[6]]);
       if (addData.length >= addCount + preLoadCount - 1) {
         // 还有未加载数据
-        return index >= preLoadCount
+        return index >= preLoadCount;
       } else {
         // 全部剩余数据
-        return true
+        return true;
       }
-    })
-    xAxisData = sliceData(xAxisData, originData.length)
-    candlestickData = sliceData(candlestickData, originData.length)
+    });
+    xAxisData = sliceData(xAxisData, originData.length);
+    candlestickData = sliceData(candlestickData, originData.length);
     // 指标线相关计算
-    const indicatorFormatData = { time, open, close, high, low, originData: addData }
-    const mainIndicatorConfig = mainIndicatorList.find((item: any) => item.value === mainIndicator).config
+    const indicatorFormatData = { time, open, close, high, low, originData: addData };
+    const mainIndicatorConfig = mainIndicatorList.find((item: any) => item.value === mainIndicator).config;
     const mainIndicatorData = mainIndicatorConfig.map((item: any) => ({
       ...item,
-      data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData, {
-        time: [], open: [], close: [], high: [], low: [], originData: []
-      }) : [], xAxisData.length),
-    }))
-    let subIndicatorData = []
+      data: sliceData(
+        item.calculationFn
+          ? item.calculationFn(talib, indicatorFormatData, {
+              time: [],
+              open: [],
+              close: [],
+              high: [],
+              low: [],
+              originData: [],
+            })
+          : [],
+        xAxisData.length
+      ),
+    }));
+    let subIndicatorData = [];
     if (subIndicator && subIndicatorList) {
-      const subIndicatorConfig = subIndicatorList.find((item: any) => item.value === subIndicator).config
+      const subIndicatorConfig = subIndicatorList.find((item: any) => item.value === subIndicator).config;
       subIndicatorData = subIndicatorConfig.reduce((res: any[], item: any) => {
-        if (item.source === 'calculation') {
+        if (item.source === "calculation") {
           return [
             ...res,
             {
               ...item,
-              data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData) : [], xAxisData.length)
-            }
-          ]
+              data: sliceData(
+                item.calculationFn ? item.calculationFn(talib, indicatorFormatData) : [],
+                xAxisData.length
+              ),
+            },
+          ];
         }
-        return res
-      }, [])
+        return res;
+      }, []);
     }
     // 根据不同情况处理数据
     if (originDrawData.length) {
@@ -271,15 +309,15 @@ defineExpose({
           return {
             ...item,
             data: [...mainIndicatorData[index].data, ...item.data],
-          }
+          };
         }), // 主图指标线数据
         subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
           return {
             ...item,
             data: [...subIndicatorData[index].data, ...item.data],
-          }
+          };
         }), // 副图数据
-      }
+      };
     } else {
       // 首屏数据
       drawData = {
@@ -288,17 +326,16 @@ defineExpose({
         candlestickData, // k线数据
         mainIndicatorData, // 主图指标线数据
         subIndicatorData, // 副图数据
-      }
+      };
     }
     // 添加一些字段，用于方便使用
-    drawData.length = drawData.xAxisData.length
-    drawData.startTime = drawData.xAxisData[0]
-    drawData.endTime = drawData.xAxisData[drawData.length - 1]
-    return drawData
+    drawData.length = drawData.xAxisData.length;
+    drawData.startTime = drawData.xAxisData[0];
+    drawData.endTime = drawData.xAxisData[drawData.length - 1];
+    return drawData;
   },
   fn: () => {},
-})
+});
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

package/src/pages/KlineNew/components/KlineSlide/index.vue

@@ -212,11 +212,11 @@ const slideChange = async({ startTime, endTime }) => {
   isloadAllHistory = false
   isLoadNew = false
   isloadAllNew = false
-  getMainData(startTime, endTime)
+  getMainData(startTime, endTime, false)
 }
 
 // 获取首屏K线数据
-const getMainData = async(startTime, endTime) => {
+const getMainData = async(startTime, endTime, isResetSlide = true) => {
   const { preLoadCount, maxShowDays, preLoadDays } = config.value
   let startIndex = -1
   let endIndex = -1
@@ -259,7 +259,9 @@ const getMainData = async(startTime, endTime) => {
   draw('main', { ...dataZoomInfo })
   draw('sub', { ...dataZoomInfo })
   activeIndex.value = mainChart.getOption().dataZoom[0].endValue
-  slideChartRef.value.resetSlide(startTime, endTime, config.value.maxShowDays)
+  if (isResetSlide) {
+    slideChartRef.value.resetSlide(startTime, endTime, config.value.maxShowDays)
+  }
 }
 
 // 获取更多数据