st-comp 0.0.44 → 0.0.45

package/packages/KlineNew/index.vue

@@ -4,65 +4,99 @@
     @mousemove="isSelect = true"
     @mouseout="isSelect = false"
   >
+    <div class="kline-mainTips">
+      <MainTips :drawData="drawData" :activeIndex="activeIndex"/>
+    </div>
     <div class="kline-mainChart" ref="mainChartRef"></div>
-    <div class="kline-subChart" ref="subChartRef"></div>
-    <div class="kline-slideChart" ref="slideChartRef"></div>
+    <div class="kline-sub">
+      <KlineSub ref="klineSubRef" v-model="subIndicator" :drawData="drawData" :activeIndex="activeIndex" :subIndicatorList="subIndicatorList" />
+    </div>
+    <KlineSlide ref="slideChartRef" :data="slideData" @change="slideChange" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue"
+import { ref, onMounted, onUnmounted, watch, computed } from "vue"
 import * as echarts from 'echarts'
 import type { EChartsType } from 'echarts'
-import { getMainOption, getSubOption, getSlideOption } from './option.js'
-import { getKlineDataApi } from './utils.js'
+import { getMainOption } from './option.js'
+import { getKlineDataApi, formatData, initTalib } from './utils.js'
 import dayjs from "dayjs"
+import MainTips from "./components/MainTips/index.vue"
+import klineConfig from './klineConfig.js'
+import KlineSlide from "./components/KlineSlide/index.vue"
+import KlineSub from "./components/KlineSub/index.vue"
 
-const config = {
-  defaultShowDays: 50, // 默认展示天数
-  preLoadDays: 50, // 预加载天数
+const props = defineProps({
+  code: { type: String, required: true }, // 品种代码
+  freqId: { type: String, required: true }, // 周期
+  freqDict: { type: Object, required: true }, // 周期字典
+  mainIndicator: { type: String, required: true }, // 主图指标
+  mainIndicatorList: { type: Array, required: true }, // 主图指标列表
+  subIndicatorList: { type: Array, required: true }, // 副图指标列表
+  config: { type: Object, default: () => ({}) }, // 配置
+})
+
+const defaultconfig = {
+  defaultShowDays: 50, // 默认展示天数，会根据不同周期进行赋值
+  preLoadDays: 50, // 预加载天数，会分局不同周期进行赋值
+  maxShowDays: 500, // 最大展示天数，会分局不同周期进行赋值
+  defaultShowYears: 10, // 默认展示多少年数据
   preLoadCount: 800, // 预加载数据条数(用于计算指标线)
   loadCheckCount: 500, // 加载数据检查条数
+  loadAddCount: 2000, // 加载数据条数
 }
 let mainChart: EChartsType
-let subChart: EChartsType
-let slideChart: EChartsType
-let mainDataZoomTimer: any = null
-let slideDataZoomTimer: any = null
+let mainDataZoomTimer: any = null // 主图数据缩放定时器
 let isLoadHistory: boolean = false // 是否正在加载历史数据
 let isloadAllHistory: boolean = false // 是否加载完全部历史数据
 let isLoadNew: boolean = false // 是否正在加载新数据
 let isloadAllNew: boolean = false // 是否加载完全部新数据
-let resizeRo: any
-let slideData: any[] = [] // 拖动轴数据
-let klineData: any[] = [] // 时间轴数据
+let resizeRo: any // dom元素监听事件
+let highlightTimer: any = null // 高亮处理事件的定时器
 
-const mainChartRef = ref<HTMLElement>()
-const subChartRef = ref<HTMLElement>()
-const slideChartRef = ref<HTMLElement>()
-const isSelect = ref(false)
+const mainChartRef = ref<HTMLElement>() // 主图
+const klineSubRef = ref<HTMLElement>() // 副图
+const slideChartRef = ref<HTMLElement>() // 拖动轴
+const isSelect = ref(false) // 是否选中，选中可通过键盘按键操作
+const drawData = ref({
+  originData: [], // 原数据
+  xAxisData: [], // 时间数据
+  candlestickData: [], // k线数据
+  mainIndicatorData: [], // 主图指标线数据
+  subIndicatorData: [], // 副图数据
+  length: 0, // 数据长度
+  startTime: '', // 开始时间
+  endTime: '', // 结束时间
+}) // 绘图数据
+const slideData = ref([])
+const activeIndex = ref(0) // 显示的index
+const subIndicator = ref('VOL') // 副图指标
+
+const config = computed(() => {
+  const freqName = props.freqDict.find((item: any) => item.value === props.freqId).label
+  return {
+    ...defaultconfig,
+    ...klineConfig.freqConfig[freqName],
+    ...props.config,
+  }
+})
+
+watch(
+  () => [props.code, props.freqId, props.mainIndicator, subIndicator],
+  () => {
+    slideChartRef.value?.reset()
+  },
+  { deep: true }
+)
 
 onMounted(async () => {
-  // 请求滚动条数据
-  slideData = await getKlineData({
-    queryType: '0',
-    startTime: `${dayjs().subtract(5, 'year').format("YYYY-MM-DD")} 00:00:00`,
-    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    cycle: '6',
-  })
-  // 请求首屏k线数据
-  const { startTime, showStartTime, endTime, showEndTime } = getTime(slideData.length - 1 - config.defaultShowDays, slideData.length - 1)
-  klineData = await getKlineData({
-    queryType: '0',
-    startTime: `${startTime} 00:00:00`,
-    endTime: `${endTime} 24:00:00`,
-    cycle: '5',
-  })
-  init()
+  // 初始化指标计算方法
+  await initTalib()
+  mainChart = echarts.init(mainChartRef.value)
+  klineSubRef.value.connect(mainChart)
   addEventListener()
-  draw('main', { showStartTime, showEndTime })
-  draw('sub', { showStartTime, showEndTime })
-  draw('slide')
+  initChart()
   // 绑定resize事件
   let isFirst: boolean | null = true
   resizeRo = new ResizeObserver(() => {
@@ -71,8 +105,6 @@ onMounted(async () => {
       return
     }
     mainChart.resize()
-    subChart.resize()
-    slideChart.resize()
   })
   resizeRo.observe(mainChartRef.value)
   window.addEventListener('keydown', keyDownEvent)
@@ -81,206 +113,224 @@ onMounted(async () => {
 onUnmounted(() => {
   window.removeEventListener('keydown', keyDownEvent)
   mainChart.dispose()
-  subChart.dispose()
-  slideChart.dispose()
   resizeRo.disconnect()
   resizeRo = null
 })
 
-const init = () => {
-  mainChart = echarts.init(mainChartRef.value)
-  subChart = echarts.init(subChartRef.value)
-  slideChart = echarts.init(slideChartRef.value)
-  echarts.connect([mainChart, subChart])
+// 项目初始化
+const initChart = async () => {
+  // 配置初始化
+  isLoadHistory = false
+  isloadAllHistory = false
+  isLoadNew = false
+  isloadAllNew = false
+  const { defaultShowYears } = config.value
+  // 请求滚动条数据
+  await getKlineData({
+    queryType: '0',
+    startTime: `${dayjs().subtract(defaultShowYears, 'year').format("YYYY-MM-DD")} 00:00:00`,
+    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    cycle: '6',
+  })
 }
 
+// 绑定事件
 const addEventListener = () => {
   mainChart.on('datazoom', (params: any) => {
     clearTimeout(mainDataZoomTimer)
     mainDataZoomTimer = setTimeout(() => {
+      const { loadCheckCount, loadAddCount, preLoadCount } = config.value
       let startIndex = 0
       let endIndex = 0
       if (params.batch) {
         const { start, end } = params.batch[0]
-        startIndex = Math.floor(start * klineData.length / 100)
-        endIndex = end === 100 ? klineData.length - 1 : Math.floor(end * klineData.length / 100)
+        startIndex = Math.floor(start * drawData.value.length / 100)
+        endIndex = end === 100 ? drawData.value.length - 1 : Math.floor(end * drawData.value.length / 100)
       } else {
         startIndex = params.startValue
         endIndex = params.endValue
       }
       // 加载数据
-      if (startIndex < config.loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
+      if (startIndex < loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
         // 左侧数据小于1000条，加载左侧数据
         isLoadHistory = true
         getMoreData({
           queryType: '1',
-          endTime: klineData[0][0],
-          cycle: '5',
-          limit: 2000,
+          endTime: drawData.value.startTime,
+          cycle: props.freqId,
+          limit: loadAddCount + preLoadCount,
         })
       }
-      if (endIndex > klineData.length - config.loadCheckCount && isLoadNew === false && isloadAllNew === false) {
+      if (endIndex > drawData.value.length - loadCheckCount && isLoadNew === false && isloadAllNew === false) {
         // 右侧数据小于1000条，加载右侧数据
         isLoadNew = true
         getMoreData({
           queryType: '2',
-          startTime: klineData[klineData.length - 1][0],
-          cycle: '5',
-          limit: 2000,
+          startTime: drawData.value.endTime,
+          cycle: props.freqId,
+          limit: loadAddCount,
+          preLimit: preLoadCount, // 向前多查询数量
         })
       }
       // 重置滚动条
       const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
-      const startTime = (klineData[startValue][0] as string).split(' ')[0]
-      const endTime = (klineData[endValue][0] as string).split(' ')[0]
-      const slideTime = slideData.map(item => (item[0] as string).split(' ')[0])
-      slideChart.dispatchAction({
-        type: 'dataZoom',
-        startValue: slideTime.indexOf(startTime),
-        endValue: slideTime.indexOf(endTime)
-      })
+      const klineDataTime = (mainChart.getOption().xAxis as any)[0].data
+      const startTime = (klineDataTime[startValue] as string).split(' ')[0]
+      const endTime = (klineDataTime[endValue] as string).split(' ')[0]
+      slideChartRef.value.resetSlide(startTime, endTime)
       clearTimeout(mainDataZoomTimer)
-    }, 300)
-  })
-  slideChart.on('datazoom', (params: any) => {
-    if(!params.dataZoomId) return
-    clearTimeout(slideDataZoomTimer)
-    slideDataZoomTimer = setTimeout(async() => {
-      const { start, end } = params
-      const startIndex = Math.floor(start * slideData.length / 100)
-      const endIndex = end === 100 ? slideData.length - 1 : Math.floor(end * slideData.length / 100)
-      const { startTime, showStartTime, endTime, showEndTime } = getTime(startIndex, endIndex)
-      klineData = await getKlineData({
-        queryType: '0',
-        startTime: `${startTime} 00:00:00`,
-        endTime: `${endTime} 24:00:00`,
-        cycle: '5',
-      })
-      isLoadHistory = false
-      isloadAllHistory = false
-      isLoadNew = false
-      isloadAllNew = false
-      draw('main', { showStartTime, showEndTime })
-      draw('sub', { showStartTime, showEndTime })
-      clearTimeout(slideDataZoomTimer)
     }, 100)
   })
+  // 高亮事件
+  mainChart.on('highlight', (data: any) => {
+    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)
+  })
+  // 移出图表事件
+  mainChart.on('globalout', () => {
+    const index = mainChart.getOption().dataZoom[0].endValue
+    activeIndex.value = index
+  })
 }
 
-  // 键盘事件 
-  const keyDownEvent = e => {
-    // 只有选中或者按ctrl才激活按键
-    if (!(e.ctrlKey || isSelect.value)) return
-    const option = mainChart.getOption()
-    let { startValue, endValue } = (option.dataZoom as any)[0]
-    if (e.code === 'ArrowLeft') {
-      // 左按键
-      if (startValue === 0) {
-        return
-      }
-      startValue = startValue - 1
-      endValue = endValue - 1
-      mainChart.dispatchAction({
-        type: 'highlight',
-        dataIndex: endValue,
-      })
-    } else if (e.code === 'ArrowRight') {
-      // 右按键
-      if (endValue === (option.xAxis as any)[0].data.length - 1) {
-        return
-      }
-      startValue = startValue + 1
-      endValue = endValue + 1
-      mainChart.dispatchAction({
-        type: 'highlight',
-        dataIndex: endValue,
-      })
-    } else if (e.code === 'ArrowUp') {
-      // 上按键-放大 最少保持5条数据
-      if(endValue - startValue < 5) {
-        return
-      }
-      const diff = Math.floor((endValue - startValue) / 2) + 1
-      startValue = startValue + diff
-      if (endValue - startValue < 5) {
-        startValue = endValue - 4
-      }
-    } else if (e.code === 'ArrowDown') {
-      // 下按键-缩小
-      const diff = Math.min(500, (endValue - startValue))
-      startValue = startValue - diff - 1
+// 键盘事件 
+const keyDownEvent = e => {
+  // 只有选中或者按ctrl才激活按键
+  if (!(e.ctrlKey || isSelect.value)) return
+  const option = mainChart.getOption()
+  let { startValue, endValue } = (option.dataZoom as any)[0]
+  if (e.code === 'ArrowLeft') {
+    // 左按键
+    if (startValue === 0) {
+      return
     }
+    startValue = startValue - 1
+    endValue = endValue - 1
     mainChart.dispatchAction({
-      type: 'dataZoom',
-      startValue,
-      endValue
+      type: 'highlight',
+      dataIndex: endValue,
     })
+  } else if (e.code === 'ArrowRight') {
+    // 右按键
+    if (endValue === (option.xAxis as any)[0].data.length - 1) {
+      return
+    }
+    startValue = startValue + 1
+    endValue = endValue + 1
+    mainChart.dispatchAction({
+      type: 'highlight',
+      dataIndex: endValue,
+    })
+  } else if (e.code === 'ArrowUp') {
+    // 上按键-放大 最少保持5条数据
+    if(endValue - startValue < 5) {
+      return
+    }
+    const diff = Math.floor((endValue - startValue) / 2) + 1
+    startValue = startValue + diff
+    if (endValue - startValue < 5) {
+      startValue = endValue - 4
+    }
+  } else if (e.code === 'ArrowDown') {
+    // 下按键-缩小
+    const diff = Math.min(500, (endValue - startValue))
+    startValue = startValue - diff - 1
   }
+  mainChart.dispatchAction({
+    type: 'dataZoom',
+    startValue,
+    endValue
+  })
+}
 
-const getTime = (startIndex: number, endIndex: number) => {
-  const startTime = (slideData[startIndex - config.preLoadDays < 0 ? 0 : startIndex - config.preLoadDays][0] as string).split(' ')[0]
-  const showStartTime = (slideData[startIndex][0] as string).split(' ')[0]
-  const endTime = (slideData[endIndex + config.preLoadDays > slideData.length ? slideData.length - 1 : endIndex + config.preLoadDays][0] as string).split(' ')[0]
-  const showEndTime = (slideData[endIndex][0] as string).split(' ')[0]
-  return { startTime, showStartTime, endTime, showEndTime }
+// 拖动轴发生变化
+const slideChange = async({ startTime, showStartTime, endTime, showEndTime }) => {
+  const { preLoadCount } = config.value
+  await getKlineData({
+    queryType: '0',
+    startTime,
+    endTime,
+    preLimit: preLoadCount, // 向前多查询数量
+    cycle: props.freqId,
+  })
+  draw('main', { showStartTime, showEndTime })
+  draw('sub', { showStartTime, showEndTime })
 }
 
+// 获取更多数据
 const getMoreData = async(params: any) => {
-  const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
-  const showStartTime = klineData[startValue][0]
-  const showEndTime = klineData[endValue][0]
+  const { preLoadCount } = config.value
   const res = await getKlineData(params)
+  const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
+  const klineDataTime = (mainChart.getOption().xAxis as any)[0].data
+  const showStartTime = klineDataTime[startValue]
+  const showEndTime = klineDataTime[endValue]
   if (params.queryType === '1') {
     // 加载历史数据
-    if (new Date(slideData[0][0]) > new Date(res[0][0])) {
+    if (new Date(slideData.value[0][0]) > new Date(res[0][0])) {
       // 表示历史数据已加载完
       isloadAllHistory = true
-      klineData = [
-        ...res.filter(item => new Date(item[0]) >= new Date(slideData[0][0])),
-        ...klineData.slice(1)
-      ]
-    } else {
-      klineData = [...res, ...klineData.slice(1)]
     }
     isLoadHistory = false
   } else {
     // 加载新数据
-    if (res.length === 0) {
+    if (res.length < 1 + preLoadCount) {
       // 表示已经加载完全部新数据
       isloadAllNew = true
       isLoadNew = false
       return
     }
-    klineData = [...klineData, ...res.slice(1)]
+    isLoadNew = false
   }
   draw('main', { showStartTime, showEndTime })
   draw('sub', { showStartTime, showEndTime })
 }
 
+// 获取k线数据
 const getKlineData = async(params: any) => {
-  const res = await getKlineDataApi({
+  const apiParams = {
     contractType: 0, // 合约类型 0-主连 1-加权
-    variety: "RU", // 品种
-    preLimit: 0, // 向前多查询数量
-    postLimit: 0, // 向后多查询数量
-    right: 0, // 0-不复权 1-前复权 2-后复权
+    variety: props.code, // 品种
+    right: 1, // 0-不复权 1-前复权 2-后复权
     ...params,
+  }
+  const res = await getKlineDataApi(apiParams)
+  if (slideData.value.length === 0) {
+    slideData.value = res.map(i => [i[0], i[4]])
+    return res
+  }
+  drawData.value = formatData({
+    originDrawData: drawData.value,
+    addData: res,
+    params: apiParams,
+    mainIndicator: props.mainIndicator,
+    mainIndicatorList: props.mainIndicatorList,
+    subIndicator: subIndicator.value,
+    subIndicatorList: props.subIndicatorList,
+    config: config.value,
+    slideData: slideData.value,
   })
   return res
 }
 
+// 绘制函数
 const draw = (type: string, params: any = {}) => {
   const { showStartTime, showEndTime } = params
-  const { defaultShowDays } = config
+  const { maxShowDays } = config.value
+  const { subIndicatorList } = props
   const callBackMap = new Map([
     [ "main", () => {
-      mainChart.setOption(getMainOption({ data: klineData, showStartTime, showEndTime }))
+      mainChart.setOption(getMainOption({ showStartTime, showEndTime, drawData: drawData.value, maxShowDays }), true)
     }],
     [ "sub", () => {
-      subChart.setOption(getSubOption({ data: klineData, showStartTime, showEndTime }))
-    }],
-    [ "slide", () => {
-      slideChart.setOption(getSlideOption({ data: slideData, defaultShowDays }))
+      klineSubRef.value.draw({ showStartTime, showEndTime, drawData: drawData.value , subIndicator: subIndicator.value, subIndicatorList, maxShowDays })
     }],
   ]);
   const callBack = callBackMap.get(type);
@@ -294,17 +344,20 @@ const draw = (type: string, params: any = {}) => {
 .kline {
   width: 100%;
   height: 100%;
+  background: #000;
+  &-mainTips {
+    height: 26px;
+  }
   &-mainChart {
     width: 100%;
-    height: 60%;
+    height: calc(65% - 26px);
   }
-  &-subChart {
-    width: 100%;
-    height: calc(40% - 50px);
+  &-subTips {
+    height: 16px;
   }
-  &-slideChart {
+  &-sub {
     width: 100%;
-    height: 50px;
+    height: calc(35% - 50px - 16px);
   }
 }
 </style>

package/packages/KlineNew/klineConfig.ts

@@ -0,0 +1,44 @@
+export default {
+  freqConfig: {
+    '1m': {
+      defaultShowDays: 2, // 默认展示天数
+      preLoadDays: 4, // 预加载天数
+      maxShowDays: 20, // 最大展示天数
+    },
+    '5m': {
+      defaultShowDays: 4, // 默认展示天数
+      preLoadDays: 10, // 预加载天数
+      maxShowDays: 20, // 最大展示天数
+    },
+    '15m': {
+      defaultShowDays: 12, // 默认展示天数
+      preLoadDays: 24, // 预加载天数
+      maxShowDays: 50, // 最大展示天数
+    },
+    '30m': {
+      defaultShowDays: 25, // 默认展示天数
+      preLoadDays: 50, // 预加载天数
+      maxShowDays: 100, // 最大展示天数
+    },
+    '60m': {
+      defaultShowDays: 50, // 默认展示天数
+      preLoadDays: 100, // 预加载天数
+      maxShowDays: 200, // 最大展示天数
+    },
+    '1d': {
+      defaultShowDays: 200, // 默认展示天数
+      preLoadDays: 400, // 预加载天数
+      maxShowDays: 800, // 最大展示天数
+    },
+    '1w': {
+      defaultShowDays: 1000, // 默认展示天数
+      preLoadDays: 2000, // 预加载天数
+      maxShowDays: 4000, // 最大展示天数
+    },
+    '1mon': {
+      defaultShowDays: 4000, // 默认展示天数
+      preLoadDays: 8000, // 预加载天数
+      maxShowDays: 16000, // 最大展示天数
+    }
+  }
+}