st-comp 0.0.44 → 0.0.46

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

@@ -0,0 +1,446 @@
+<template>
+  <div
+    class="kline"
+    @mousemove="isSelect = true"
+    @mouseout="isSelect = false"
+  >
+    <div class="kline-mainTips">
+      <st-klineTips :drawData="drawData" :activeIndex="activeIndex"/>
+    </div>
+    <div class="kline-mainChart" ref="mainChartRef"></div>
+    <div class="kline-sub">
+      <st-klineSub ref="klineSubRef" v-model="subIndicator" :config="config" :drawData="drawData" :activeIndex="activeIndex" :subIndicatorList="subIndicatorList" />
+    </div>
+    <st-klineSlide ref="slideChartRef" :data="slideData" @change="slideChange" />
+    <st-klineUtils ref="klineUtilsRef" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, computed } from "vue"
+import * as echarts from 'echarts'
+import { getKlineDataApi, formatConfig } from './utils'
+import dayjs from "dayjs"
+import { stMath } from 'st-func'
+const { round } = stMath
+
+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: () => ({}) }, // 配置
+})
+
+let mainChart
+let mainDataZoomTimer = null // 主图数据缩放定时器
+let isLoadHistory = false // 是否正在加载历史数据
+let isloadAllHistory = false // 是否加载完全部历史数据
+let isLoadNew = false // 是否正在加载新数据
+let isloadAllNew = false // 是否加载完全部新数据
+let resizeRo // dom元素监听事件
+let highlightTimer = null // 高亮处理事件的定时器
+
+const mainChartRef = ref() // 主图
+const klineSubRef = ref() // 副图
+const slideChartRef = ref() // 拖动轴
+const klineUtilsRef = ref() // k线辅助函数实例
+const isSelect = ref(false) // 是否选中，选中可通过键盘按键操作
+const drawData = ref({}) // 绘图数据
+const slideData = ref([])
+const activeIndex = ref(0) // 显示的index
+const subIndicator = ref('VOL') // 副图指标
+
+const config = computed(() => {
+  const freqName = props.freqDict.find((item) => item.value === props.freqId).label
+  return formatConfig(props.config, freqName)
+})
+
+watch(
+  () => props.code,
+  async() => {
+    isLoadHistory = false
+    isloadAllHistory = false
+    isLoadNew = false
+    isloadAllNew = false
+    const res = 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',
+    })
+    slideData.value = res.map(i => [i[0], i[4]])
+    getMainData(
+      `${slideData.value[slideData.value.length - 1 - defaultShowDays][0].split(' ')[0]} 00:00:00`,
+      `${slideData.value[slideData.value.length - 1][0].split(' ')[0]} 24:00:00`
+    )
+  },
+  { deep: true }
+)
+
+watch(
+  () => [props.freqId, props.mainIndicator, subIndicator],
+  () => {
+    const { defaultShowDays } = config.value
+    isLoadHistory = false
+    isloadAllHistory = false
+    isLoadNew = false
+    isloadAllNew = false
+    getMainData(
+      `${slideData.value[slideData.value.length - 1 - defaultShowDays][0].split(' ')[0]} 00:00:00`,
+      `${slideData.value[slideData.value.length - 1][0].split(' ')[0]} 24:00:00`
+    )
+  },
+  { deep: true }
+)
+
+onMounted(async () => {
+  const { defaultShowYears, defaultShowDays } = config.value
+  // 初始化指标计算方法
+  await klineUtilsRef.value.initTalib()
+  mainChart = echarts.init(mainChartRef.value)
+  klineSubRef.value.connect(mainChart)
+  addEventListener()
+  // 请求滚动条数据
+  const res = 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',
+  })
+  slideData.value = res.map(i => [i[0], i[4]])
+  await getMainData(
+    `${slideData.value[slideData.value.length - 1 - defaultShowDays][0].split(' ')[0]} 00:00:00`,
+    `${slideData.value[slideData.value.length - 1][0].split(' ')[0]} 24:00:00`
+  )
+  // 绑定resize事件
+  let isFirst = true
+  resizeRo = new ResizeObserver(() => {
+    if (isFirst) {
+      isFirst = null
+      return
+    }
+    mainChart.resize()
+  })
+  resizeRo.observe(mainChartRef.value)
+  window.addEventListener('keydown', keyDownEvent)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', keyDownEvent)
+  mainChart.off('datazoom')
+  mainChart.off('highlight')
+  mainChart.off('globalout')
+  mainChart.dispose()
+  resizeRo.disconnect()
+  resizeRo = null
+})
+
+// 绑定事件
+const addEventListener = () => {
+  mainChart.on('datazoom', (params) => {
+    clearTimeout(mainDataZoomTimer)
+    mainDataZoomTimer = setTimeout(() => {
+      const { loadCheckCount, loadAddCount, preLoadCount } = config.value
+      const { startValue, endValue } = mainChart.getOption().dataZoom[0]
+      const klineDataTime = mainChart.getOption().xAxis[0].data
+      const startTime = klineDataTime[startValue].split(' ')[0]
+      const endTime = klineDataTime[endValue].split(' ')[0]
+      // 加载数据
+      if (startValue < loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
+        // 左侧数据小于1000条，加载左侧数据
+        isLoadHistory = true
+        getMoreData({
+          queryType: '1',
+          endTime: drawData.value.startTime,
+          cycle: props.freqId,
+          limit: loadAddCount + preLoadCount,
+        })
+      }
+      if (endValue > drawData.value.length - loadCheckCount && isLoadNew === false && isloadAllNew === false) {
+        // 右侧数据小于1000条，加载右侧数据
+        isLoadNew = true
+        getMoreData({
+          queryType: '2',
+          startTime: drawData.value.endTime,
+          cycle: props.freqId,
+          limit: loadAddCount,
+          preLimit: preLoadCount, // 向前多查询数量
+        })
+      }
+      // 重置滚动条
+      slideChartRef.value.resetSlide(startTime, endTime, config.value.maxShowDays)
+      clearTimeout(mainDataZoomTimer)
+    }, 100)
+  })
+  // 高亮事件
+  mainChart.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)
+  })
+  // 移出图表事件
+  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()
+  const { startValue, endValue } = option.dataZoom[0]
+  mainChart.dispatchAction({
+    type: 'dataZoom',
+    ...klineUtilsRef.value.handleKeyDown(e, { startValue, endValue, maxIndex: option.xAxis[0].data.length - 1})
+  })
+}
+
+// 拖动轴发生变化
+const slideChange = async({ startTime, endTime }) => {
+  isLoadHistory = false
+  isloadAllHistory = false
+  isLoadNew = false
+  isloadAllNew = false
+  getMainData(startTime, endTime)
+}
+
+// 获取首屏K线数据
+const getMainData = async(startTime, endTime) => {
+  const { preLoadCount, maxShowDays, preLoadDays } = config.value
+  let startIndex = -1
+  let endIndex = -1
+  slideData.value.forEach((item, index) => {
+    if (item[0].split(' ')[0] === startTime.split(' ')[0]) {
+      startIndex = index
+    }
+    if (item[0].split(' ')[0] === endTime.split(' ')[0]) {
+      endIndex = index
+    }
+  })
+  const loadStartTime = `${slideData.value[startIndex - preLoadDays < 0 ? 0 : startIndex - preLoadDays][0].split(' ')[0]} 00:00:00`
+  const loadEndTime = `${slideData.value[endIndex + preLoadDays > slideData.value.length ? slideData.value.length - 1 : endIndex + preLoadDays][0].split(' ')[0]} 24:00:00`
+  const params = {
+    queryType: '0',
+    startTime: loadStartTime,
+    endTime: loadEndTime,
+    preLimit: preLoadCount, // 向前多查询数量
+    cycle: props.freqId,
+  }
+  const res = await getKlineData(params)
+  drawData.value = klineUtilsRef.value.formatDataBySlide({
+    originDrawData: drawData.value,
+    addData: res,
+    startTime: params.startTime,
+    endTime: params.endTime,
+    mainIndicator: props.mainIndicator,
+    mainIndicatorList: props.mainIndicatorList,
+    subIndicator: subIndicator.value,
+    subIndicatorList: props.subIndicatorList,
+    config: config.value,
+    timeRange: [slideData.value[0][0], slideData.value[slideData.value.length - 1][0]],
+  })
+  const dataZoomInfo = klineUtilsRef.value.getDataZoomInfoByTime({
+    showStartTime: startTime,
+    showEndTime: endTime,
+    xAxisData: drawData.value.xAxisData,
+    maxShowDays
+  })
+  draw('main', { ...dataZoomInfo })
+  draw('sub', { ...dataZoomInfo })
+  activeIndex.value = mainChart.getOption().dataZoom[0].endValue
+  slideChartRef.value.resetSlide(startTime, endTime, config.value.maxShowDays)
+}
+
+// 获取更多数据
+const getMoreData = async(params) => {
+  const { preLoadCount, maxShowDays } = config.value
+  const res = await getKlineData(params)
+  drawData.value = klineUtilsRef.value.formatDataBySlide({
+    originDrawData: drawData.value,
+    addData: params.queryType === '1' ? res.slice(0, res.length - 1) : res.slice(1),
+    startTime: params.startTime,
+    endTime: params.endTime,
+    mainIndicator: props.mainIndicator,
+    mainIndicatorList: props.mainIndicatorList,
+    subIndicator: subIndicator.value,
+    subIndicatorList: props.subIndicatorList,
+    config: config.value,
+    timeRange: [slideData.value[0][0], slideData.value[slideData.value.length - 1][0]],
+  })
+  const { startValue, endValue } = mainChart.getOption().dataZoom[0]
+  const klineDataTime = mainChart.getOption().xAxis[0].data
+  const showStartTime = klineDataTime[startValue]
+  const showEndTime = klineDataTime[endValue]
+  if (params.queryType === '1') {
+    // 加载历史数据
+    if (new Date(slideData.value[0][0]) > new Date(res[0][0])) {
+      // 表示历史数据已加载完
+      isloadAllHistory = true
+    }
+    isLoadHistory = false
+  } else {
+    // 加载新数据
+    if (res.length < 1 + preLoadCount) {
+      // 表示已经加载完全部新数据
+      isloadAllNew = true
+      isLoadNew = false
+      return
+    }
+    isLoadNew = false
+  }
+  const dataZoomInfo = klineUtilsRef.value.getDataZoomInfoByTime({ showStartTime, showEndTime, xAxisData: drawData.value.xAxisData, maxShowDays })
+  draw('main', { ...dataZoomInfo })
+  draw('sub', { ...dataZoomInfo })
+}
+
+// 获取k线数据
+const getKlineData = async(params) => {
+  const apiParams = {
+    contractType: 0, // 合约类型 0-主连 1-加权
+    variety: props.code, // 品种
+    right: 1, // 0-不复权 1-前复权 2-后复权
+    ...params,
+  }
+  const res = await getKlineDataApi(apiParams)
+  return res
+}
+
+// 绘制函数
+const draw = (type, params = {}) => {
+  const { startValue, endValue, maxValueSpan } = params
+  const callBackMap = new Map([
+    [ "main", () => {
+      const { xAxisData, candlestickData, mainIndicatorData } = drawData.value
+      const indicatorSeries = mainIndicatorData.map((item) => {
+        return {
+          name: item.key,
+          type: 'line',
+          silent: true,
+          symbol: 'none',
+          data: item.data,
+          lineStyle: {
+            width: item.width || 1,
+          },
+          itemStyle: {
+            color: item.color,
+          }
+        }
+      })
+      mainChart.setOption({
+        animation: false,
+        grid: {
+          left: `${config.value.gridLeft}px`,
+          top: '20px',
+          right: `${config.value.gridRight}px`,
+          bottom: '6px',
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            startValue,
+            endValue,
+            maxValueSpan,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          appendToBody: true,
+          confine: true,
+          axisPointer: {
+            type: 'cross',
+            label: {
+              rich: {},
+              formatter: data => {
+                const { axisDimension, value } = data
+                if(axisDimension === 'x') {
+                  return ''
+                } else {
+                  return String(round(value))
+                }
+              }
+            },
+          },
+          formatter: () => '',
+        },
+        xAxis: {
+          show: false,
+          type: 'category',
+          data: xAxisData,
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dotted",
+              color: "#333",
+            },
+          },
+          min: (value) => round(value.min),
+          max: (value) => round(value.max),
+        },
+        series: [
+          {
+            type: 'candlestick',
+            data: candlestickData,
+            itemStyle: {
+              color: "transparent",
+              color0: "#00FFFF",
+              borderColor: "#FF0000",
+              borderColor0: "#00FFFF",
+              borderWidth: 1,
+            },
+          },
+          ...indicatorSeries,
+        ]
+      }, true)
+    }],
+    [ "sub", () => {
+      klineSubRef.value.draw({ startValue, endValue, maxValueSpan })
+    }],
+  ]);
+  const callBack = callBackMap.get(type);
+  if (callBack instanceof Function) {
+    callBack();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.kline {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  &-mainTips {
+    height: 26px;
+  }
+  &-mainChart {
+    width: 100%;
+    height: calc(65% - 26px);
+  }
+  &-subTips {
+    height: 16px;
+  }
+  &-sub {
+    width: 100%;
+    height: calc(35% - 50px - 16px);
+  }
+}
+</style>

package/src/pages/KlineNew/components/KlineSlide/utils.js

@@ -0,0 +1,78 @@
+import axios from 'axios'
+
+const defaultConfig = {
+  defaultShowDays: 50, // 默认展示天数，会根据不同周期进行赋值
+  preLoadDays: 50, // 预加载天数，会分局不同周期进行赋值
+  maxShowDays: 500, // 最大展示天数，会分局不同周期进行赋值
+  defaultShowYears: 10, // 默认展示多少年数据
+  preLoadCount: 800, // 预加载数据条数(用于计算指标线)
+  loadCheckCount: 500, // 加载数据检查条数
+  loadAddCount: 2000, // 加载数据条数
+  gridLeft: 60, // echarts绘图左侧grid距离
+  gridRight: 20, // echarts绘图右侧grid距离
+}
+
+const 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, // 最大展示天数
+  }
+}
+
+// 获取配置
+export const formatConfig = (config, freqName) => {
+  return {
+    ...defaultConfig,
+    ...freqConfig[freqName],
+    ...config,
+  }
+}
+
+// 默认获取k线参数
+export const getKlineDataApi = async(params) => {
+  const res = await axios({
+    method: 'post',
+    headers: {
+      token: '041fd377d5d5efc7e08e2ed5b61b0c8d',
+    },
+    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    data: params,
+  })
+  return res.data.body
+}

package/src/pages/KlineNew/index.vue

@@ -1,12 +1,80 @@
 <template>
-  <div style="width: 100%; height: 100%;">
-    <st-klineNew />    
+  <div style="width: 100%">
+    <el-select v-model="freqId" :style="{ width: '120px', marginRight: '12px' }">
+      <el-option v-for="item in freqOption" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <el-select v-model="mainIndicator" :style="{ width: '120px', marginRight: '12px' }">
+      <el-option v-for="item in mainIndicatorList" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <el-select v-model="chartMode" :style="{ width: '200px', marginRight: '12px' }">
+      <el-option v-for="item in chartModeList" :key="item" :label="item" :value="item" />
+    </el-select>
   </div>
+  <el-tabs v-model="activeName" class="demo-tabs">
+    <el-tab-pane v-for="(item, index) in tabsList" :key="item.name" :label="item.label" :name="item.name">
+      <div style="height: calc(100vh - 64px - 40px - 40px - 40px - 16px - 32px)">
+        <component
+          :is="item.component"
+          :code="'RU'"
+          :freqId="freqId"
+          :freqDict="freqOption"
+          :mainIndicator="mainIndicator"
+          :mainIndicatorList="mainIndicatorList"
+          :subIndicatorList="subIndicatorList"
+          :chartMode="chartMode"
+        ></component>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
-<script setup lang="ts">
-</script>
+<script setup>
+import { ref } from "vue";
+import KlineSlide from "./components/KlineSlide/index.vue";
+import KlineBasic from "./components/KlineBasic/index.vue";
+import KlineAction from "./components/KlineAction/index.vue";
+import { mainIndicatorList, subIndicatorList } from "st-func";
+
+const freqOption = [
+  { value: "1", label: "1m" },
+  { value: "2", label: "5m" },
+  { value: "3", label: "15m" },
+  { value: "4", label: "30m" },
+  { value: "5", label: "60m" },
+  { value: "6", label: "1d" },
+  { value: "7", label: "1w" },
+  { value: "8", label: "1mon" },
+];
+const freqId = ref("5");
+const mainIndicator = ref("DKX_EMA");
 
-<style lang="scss" scoped>
+const chartMode = ref("价差分布图");
+const chartModeList = ["二腿价格走势图", "二腿价格走势百分比图", "二腿相关度", "价差周期性", "价差分布图"];
+
+const tabsList = [
+  {
+    label: "基础K线组件(条数限制)",
+    name: "KlineBasic",
+    component: KlineBasic,
+  },
+  {
+    label: "带拖拽的K线组件",
+    name: "KlineSlide",
+    component: KlineSlide,
+  },
+  {
+    label: "带操作的K线组件",
+    name: "KlineAction",
+    component: KlineAction,
+  },
+];
+const activeName = ref("KlineAction");
+</script>
 
+<style lang="scss">
+.klineDemoDialog {
+  .el-dialog__body {
+    height: calc(100% - 54px - 60px);
+  }
+}
 </style>

package/vite.config.ts

@@ -17,7 +17,7 @@ export default ({ mode }) => {
     Components({
       resolvers: [ElementPlusResolver()],
     }),
-    createExportFile(),
+    createExportFile({ external: ['KlineNew'] }),
   ]
 
   if (mode === 'test') {

package/vitePlugins/createExportFile.ts

@@ -7,7 +7,7 @@ const toFirstLowerCase = (word) => {
   return `${word[0].toLowerCase()}${word.substr(1)}`
 }
 
-export default () => {
+export default ({ external }) => {
   return {
     name: 'createExport',
     buildStart() {
@@ -22,6 +22,7 @@ export default () => {
         const filterFiles = files.filter(fileName => !fileName.includes('.'))
         // 生成每个组件的导出文件
         filterFiles.forEach(fileName => {
+          if (external.includes(fileName)) return
           const content = `import { App } from "vue";
 import St${fileName} from "./index.vue";