st-comp 0.0.45 → 0.0.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.45",
+  "version": "0.0.47",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,12 +17,11 @@
     "echarts": "^5.4.3",
     "element-plus": "^2.3.14",
     "pinia": "^2.1.6",
-    "st-func": "^0.0.14",
+    "st-func": "^0.0.18",
     "talib.js": "^0.1.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "vue": "^3.3.4",
     "@vitejs/plugin-vue": "^4.2.3",
     "sass": "^1.69.3",
     "ssh2": "^1.14.0",
@@ -31,6 +30,7 @@
     "unplugin-auto-import": "^0.17.1",
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.5",
+    "vue": "^3.3.4",
     "vue-tsc": "^1.8.5"
   }
 }

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

@@ -10,16 +10,10 @@ import type { EChartsType } from 'echarts'
 let slideChart: EChartsType
 let resizeRo: any // dom元素监听事件
 let slideDataZoomTimer: any = null // 滑动图数据缩放定时器
-const defaultCOnfig = {
-  preLoadDays: 50, // 预加载天数
-  defaultShowDays: 50, // 默认显示天数
-  maxShowDays: 200, // 最大展示天数
-}
 
 const emit = defineEmits(['change'])
 const props = defineProps({
   data: { type: Array, default: () => [] }, // 时间数据
-  config: { type: Object, default: () => {} }, // 配置数据
 })
 
 const slideChartRef = ref<HTMLElement>() // 拖动轴
@@ -28,7 +22,6 @@ watch(
   () => props.data,
   () => {
     draw()
-    change(props.data.length - 1 - defaultCOnfig.defaultShowDays, props.data.length - 1)
   },
   { deep: true },
 )
@@ -37,7 +30,6 @@ onMounted(() => {
   slideChart = echarts.init(slideChartRef.value)
   addEventListener()
   draw()
-  change(props.data.length - 1 - defaultCOnfig.defaultShowDays, props.data.length - 1)
   // 绑定resize事件
   let isFirst: boolean | null = true
   resizeRo = new ResizeObserver(() => {
@@ -75,18 +67,13 @@ const addEventListener = () => {
 
 // 拖动回调
 const change = (startIndex: number, endIndex: number) => {
-  const { preLoadDays } = defaultCOnfig
   const data: any = props.data
   if (data.length === 0) return
-  const startTime = (data[startIndex - preLoadDays < 0 ? 0 : startIndex - preLoadDays][0] as string).split(' ')[0]
-  const showStartTime = (data[startIndex][0] as string).split(' ')[0]
-  const endTime = (data[endIndex + preLoadDays > data.length ? data.length - 1 : endIndex + preLoadDays][0] as string).split(' ')[0]
-  const showEndTime = (data[endIndex][0] as string).split(' ')[0]
+  const startTime = (data[startIndex][0] as string).split(' ')[0]
+  const endTime = (data[endIndex][0] as string).split(' ')[0]
   emit('change', {
     startTime: `${startTime} 00:00:00`,
-    showStartTime: `${showStartTime} 00:00:00`,
     endTime: `${endTime} 24:00:00`,
-    showEndTime: `${showEndTime} 24:00:00`,
   })
 }
 
@@ -101,20 +88,6 @@ const draw = () => {
       left: '80px',
       right: '80px',
     },
-    dataZoom: [
-      {
-        show: true,
-        startValue: data.length - 1 - defaultCOnfig.defaultShowDays,
-        endValue: data.length - 1,
-        maxValueSpan: defaultCOnfig.maxShowDays,
-      },
-      {
-        type: 'inside',
-        startValue: data.length - 1 - defaultCOnfig.defaultShowDays,
-        endValue: data.length - 1,
-        maxValueSpan: defaultCOnfig.maxShowDays,
-      }
-    ],
     xAxis: {
       type: 'category',
       data: xAxisData,
@@ -133,15 +106,7 @@ const draw = () => {
 }
 
 defineExpose({
-  reset: () => {
-    slideChart.dispatchAction({
-      type: 'dataZoom',
-      startValue: props.data.length - 1 - defaultCOnfig.defaultShowDays,
-      endValue: props.data.length - 1,
-    })
-    change(props.data.length - 1 - defaultCOnfig.defaultShowDays, props.data.length - 1)
-  }, // 重置
-  resetSlide: (startTime, endTime) => {
+  resetSlide: (startTime: string, endTime: string, maxValueSpan: number) => {
     let slideStartIndex = -1
     let slideEndIndex = -1
     props.data.forEach((item: any, index: number) => {
@@ -155,12 +120,23 @@ defineExpose({
       } else if (slideEndIndex === -1 && new Date(item[0]) > new Date(endTime)) {
         slideEndIndex = index - 1
       }
-
     })
-    slideChart.dispatchAction({
-      type: 'dataZoom',
-      startValue: slideStartIndex,
-      endValue: slideEndIndex
+    slideEndIndex = slideEndIndex === -1 ? props.data.length - 1 : slideEndIndex
+    slideChart.setOption({
+      dataZoom: [
+        {
+          show: true,
+          startValue: slideStartIndex,
+          endValue: slideEndIndex,
+          maxValueSpan,
+        },
+        {
+          type: 'inside',
+          startValue: slideStartIndex,
+          endValue: slideEndIndex,
+          maxValueSpan,
+        }
+      ],
     })
   }, // 重置
 })

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

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from "vue"
+import { ref, onMounted, onUnmounted, nextTick, computed } from "vue"
 import * as echarts from 'echarts'
 import type { EChartsType } from 'echarts'
 import Tips from '../Tips/index.vue'
@@ -39,6 +39,7 @@ const props = defineProps({
   activeIndex: { type: Number, require: true },
   modelValue: { type: String, required: true }, // 副图指标
   subIndicatorList: { type: Array, required: true }, // 副图指标列表
+  config: { type: Object, require: true }, // 配置
 })
 
 const subChartRef = ref<HTMLElement>() // 拖动轴
@@ -54,7 +55,7 @@ const subIndicator = computed({
 const subIndicatorTips = computed(() => {
   const { drawData, activeIndex } = props
   const subIndicatorInfo = props.subIndicatorList.find((item: any) => item.value === subIndicator.value)
-  if (drawData.originData[activeIndex]) {
+  if (drawData.originData && drawData.originData[activeIndex]) {
     return subIndicatorInfo.config.map((item: any) => {
       let value = '-'
       if (item.source === 'origin') {
@@ -118,180 +119,168 @@ defineExpose({
     echarts.connect([chart, subChart])
   },// 联动
   draw: (config) => {
-    const { showStartTime, showEndTime, drawData, subIndicator, subIndicatorList, maxShowDays } = config
-    const { xAxisData, subIndicatorData, candlestickData, originData } = drawData
-    const subIndicatorInfo = subIndicatorList.find((item: any) => item.value === subIndicator)
-    let startValue = -1
-    let endValue = -1
-    let dayPerTime: any = {}
-    xAxisData.forEach((time: any, index: number) => {
-      dayPerTime[time.split(' ')[0]] = dayPerTime[time.split(' ')[0]] || 0
-      dayPerTime[time.split(' ')[0]] += 1
-      if (new Date(time) >= new Date(showStartTime) && startValue === -1) {
-        startValue = index
-      }
-      if (new Date(time) <= new Date(showEndTime)) {
-        endValue = index
-      }
-    })
-    const maxShowCount = Math.max(...Object.values(dayPerTime)) * maxShowDays
-    const series: any[] = []
-    // 主图
-    if (subIndicatorInfo.series === 'bar') {
-      let data = []
-      if (subIndicatorInfo.source === 'origin') {
-        data = originData.map((i: any) => i[subIndicatorInfo.dataIndex])
-      } else {
-        data = subIndicatorData?.find((i: any) => i.key === subIndicatorInfo.dataIndex)?.data || []
-      }
-
-      series.push({
-        name: 'subMain',
-        xAxisIndex: 0,
-        yAxisIndex: 1,
-        type: 'bar',
-        silent: true,
-        symbol: 'none',
-        data: data.map((item: any, index: number) => {
-          if (subIndicatorInfo.color === 'kline') {
-            return {
-              value: item,
-              itemStyle: getSubBarStyle(candlestickData, index),
-            }
-          } else if (subIndicatorInfo.color === 'value') {
-            return {
-              value: item,
-              itemStyle: {
-                color: item >= 0 ? '#FF0000' : '#00FFFF',
-              },
-            }
-          } else {
-            return {
-              value: item,
-              itemStyle: {
-                color: subIndicatorInfo.color,
-              },
-            } 
-          }
-        }),
-      })
-    }
-
-    // 处理副图指标线数据
-    subIndicatorData.forEach((item: any) => {
-      if (item.series === 'line') {
+    nextTick(() => {
+      const { startValue, endValue, maxValueSpan } = config
+      const { xAxisData, subIndicatorData, candlestickData, originData } = (props.drawData as any)
+      const subIndicatorInfo: any = props.subIndicatorList.find((item: any) => item.value === subIndicator.value)
+      const series: any[] = []
+      // 主图
+      if (subIndicatorInfo.series === 'bar') {
         let data = []
-        if (item.source === 'origin') {
-          data = originData.map((i: any) => i[item.dataIndex])
-        } else if (item.source === 'calculation') {
-          data = item.data
+        if (subIndicatorInfo.source === 'origin') {
+          data = originData.map((i: any) => i[subIndicatorInfo.dataIndex])
+        } else {
+          data = subIndicatorData?.find((i: any) => i.key === subIndicatorInfo.dataIndex)?.data || []
         }
+
         series.push({
+          name: 'subMain',
           xAxisIndex: 0,
-          yAxisIndex: item.yAxis === 'right' ? 2 : 1,
-          name: item.key,
-          type: 'line',
+          yAxisIndex: 1,
+          type: 'bar',
           silent: true,
           symbol: 'none',
-          data,
-          lineStyle: {
-            width: 1,
-          },
-          itemStyle: {
-            color: item.color,
-          },
+          data: data.map((item: any, index: number) => {
+            if (subIndicatorInfo.color === 'kline') {
+              return {
+                value: item,
+                itemStyle: getSubBarStyle(candlestickData, index),
+              }
+            } else if (subIndicatorInfo.color === 'value') {
+              return {
+                value: item,
+                itemStyle: {
+                  color: item >= 0 ? '#FF0000' : '#00FFFF',
+                },
+              }
+            } else {
+              return {
+                value: item,
+                itemStyle: {
+                  color: subIndicatorInfo.color,
+                },
+              } 
+            }
+          }),
         })
       }
-    })
 
-    subChart.setOption({
-      animation: false,
-      grid: {
-        left: '60px',
-        top: '10px',
-        right: '20px',
-        bottom: '20px',
-      },
-      dataZoom: [
-        {
-          type: 'inside',
-          startValue,
-          endValue,
-          maxValueSpan: maxShowCount,
+      // 处理副图指标线数据
+      subIndicatorData.forEach((item: any) => {
+        if (item.series === 'line') {
+          let data = []
+          if (item.source === 'origin') {
+            data = originData.map((i: any) => i[item.dataIndex])
+          } else if (item.source === 'calculation') {
+            data = item.data
+          }
+          series.push({
+            xAxisIndex: 0,
+            yAxisIndex: item.yAxis === 'right' ? 2 : 1,
+            name: item.key,
+            type: 'line',
+            silent: true,
+            symbol: 'none',
+            data,
+            lineStyle: {
+              width: 1,
+            },
+            itemStyle: {
+              color: item.color,
+            },
+          })
         }
-      ],
-      tooltip: {
-        trigger: 'axis',
-        appendToBody: true,
-        confine: true,
-        axisPointer: {
-          type: 'cross',
-          label: {
-            rich: {},
-            formatter: (data: any) => {
-              const { axisDimension, value } = data
-              if(axisDimension === 'x') {
-                return value
-              } else if(data.axisIndex === 1) {
-                return String(round(value))
+      })
+
+      subChart.setOption({
+        animation: false,
+        grid: {
+          left: `${props.config.gridLeft}px`,
+          top: '10px',
+          right: `${props.config.gridRight}px`,
+          bottom: '20px',
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            startValue,
+            endValue,
+            maxValueSpan,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          appendToBody: true,
+          confine: true,
+          axisPointer: {
+            type: 'cross',
+            label: {
+              rich: {},
+              formatter: (data: any) => {
+                const { axisDimension, value } = data
+                if(axisDimension === 'x') {
+                  return value
+                } else if(data.axisIndex === 1) {
+                  return String(round(value))
+                }
               }
-            }
+            },
           },
+          formatter: () => ''
         },
-        formatter: () => ''
-      },
-      xAxis: {
-        type: "category",
-        data: xAxisData,
-        axisLine: {
-          show: true,
-        },
-        splitLine: {
-          show: false,
-        },
-        axisLabel: {
-          show: true,
-          formatter: (data: string) => data,
-        },
-      },
-      yAxis: [
-        {
-          position: 'right',
-        },
-        {
-          position: 'left',
-          min: subIndicatorInfo.leftYAxisRange === 'cover' ? (value: any) => value.min : null,
-          max: subIndicatorInfo.leftYAxisRange === 'cover' ? (value: any) => value.max : null,
-          splitNumber: 1,
+        xAxis: {
+          type: "category",
+          data: xAxisData,
           axisLine: {
             show: true,
           },
           splitLine: {
+            show: false,
+          },
+          axisLabel: {
             show: true,
-            lineStyle: {
-              type: 'dotted',
-              color: '#333',
-            },
+            formatter: (data: string) => data,
           },
         },
-        {
-          position: 'right',
-          min: subIndicatorInfo.rightYAxisRange === 'cover' ? (value: any) => value.min : null,
-          max: subIndicatorInfo.rightYAxisRange === 'cover' ? (value: any) => value.max : null,
-          splitNumber: 1,
-          axisLine: {
-            show: false,
+        yAxis: [
+          {
+            position: 'right',
           },
-          splitLine: {
-            show: false,
+          {
+            position: 'left',
+            min: subIndicatorInfo.leftYAxisRange === 'cover' ? (value: any) => value.min : null,
+            max: subIndicatorInfo.leftYAxisRange === 'cover' ? (value: any) => value.max : null,
+            splitNumber: 1,
+            axisLine: {
+              show: true,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dotted',
+                color: '#333',
+              },
+            },
           },
-          axisLabel: {
-            show: false,
-          }
-        },
-      ],
-      series,
-    }, true)
+          {
+            position: 'right',
+            min: subIndicatorInfo.rightYAxisRange === 'cover' ? (value: any) => value.min : null,
+            max: subIndicatorInfo.rightYAxisRange === 'cover' ? (value: any) => value.max : null,
+            splitNumber: 1,
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            }
+          },
+        ],
+        series,
+      }, true)
+    })
   }, // 重置
 })
 </script>

package/packages/KlineNew/components/{MainTips → KlineTips}/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="kline-mainTips">
+  <div class="kline-tips">
     <Tips :data="mainTips" />
     <Tips :data="mainIndicatorTips" />
   </div>
@@ -24,10 +24,10 @@
   })
 
   const mainTips = computed(() => {
-    const { drawData, activeIndex } = props
+    const { drawData, activeIndex } = (props as any)
+    if (drawData.candlestickData && drawData.candlestickData[activeIndex]) {
     const itemData = drawData.candlestickData[activeIndex]
-    if (itemData) {
-      const diff = round(multiply(divide(subtract(itemData[2], itemData[4]), itemData[4]), 100))
+      const diff = round(multiply(divide(subtract(itemData[1], itemData[4]), itemData[4]), 100))
       let diffColor
       if (diff > 0) {
         diffColor = 'red'
@@ -37,8 +37,8 @@
       return [
         { label: '开', value: round(itemData[0]) },
         { label: '高', value: round(itemData[3]) },
-        { label: '低', value: round(itemData[1]) },
-        { label: '收', value: round(itemData[2]) },
+        { label: '低', value: round(itemData[2]) },
+        { label: '收', value: round(itemData[1]) },
         { label: '涨跌', value: `${diff}%`, color: diffColor },
       ]
     }
@@ -47,14 +47,14 @@
 
   const mainIndicatorTips = computed(() => {
     const { drawData, activeIndex } = props
-    return drawData.mainIndicatorData.map(item => {
+    return drawData?.mainIndicatorData?.map(item => {
       return { label: item.key, value: round(item.data[activeIndex]), color: item.color }
-    })
+    }) || []
   })
 </script>
 
 <style lang="scss" scoped>
-  .kline-mainTips {
+  .kline-tips {
     padding-left: 3px;
     width: 100%;
   }