st-comp 0.0.5 → 0.0.7

package/packages/Kline/index.ts

@@ -1,8 +1,8 @@
-import { App } from "vue";
-import StKline from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-kline", StKline);
-  },
-};
+import { App } from "vue";
+import StKline from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-kline", StKline);
+  },
+}

package/packages/Kline/index.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="st-kline">
+    <!-- 顶部Tips -->
     <div class="st-kline-header">
       <Tips
         :activeIndex="activeIndex"
         :klineData="klineData"
         :indicatorData="indicatorData"
-        :indicatorConfig="indicatorList[indicator]"
+        :indicatorConfig="indicatorConfigList[indicator]"
       />
     </div>
+    <!-- 图表 -->
     <st-echarts
       v-if="option"
       :option="option"
@@ -17,112 +19,197 @@
         dark: klineThemeDark,
       }"
       @highlight="highlight"
+      @afterInit="afterInit"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { getKline, getIndicator, getIndicatorList, getOption } from './utils'
   import dayjs from 'dayjs'
-  import klineThemeLight from './kline_theme_light.json'
+  import { ref, onMounted } from 'vue'
+  import Tips from './components/Tips/index.vue'
   import klineThemeDark from './kline_theme_dark.json'
-  import Tips from './components/TIps/index.vue'
+  import klineThemeLight from './kline_theme_light.json'
+  import type { EChartsType, EChartsOption } from 'echarts'
+  import type { KlineDataType, IndicatorDataType, IndicatorConfigType } from './type.d.ts'
+  import { getKline, getIndicator, getIndicatorConfigList, getOption } from './utils'
 
   const props = defineProps({
+    // 品种代码
     code: {
       type: String,
       required: true,
-    }, // 股票代码
+    },
+    // 默认展示K线条数
     defaultCount: {
       type: Number,
-      default: () => 500
-    }, // 默认k线条数
-    endTime: {
+      default: () => 500,
+    },
+    // 结束时间
+    tradeDate: {
       type: String,
       required: true,
-    }, // 结束时间
+    },
+    // 周期名称
     frequency: {
       type: String,
       required: true,
-    }, // 周期名称
+    },
+    // 指标线类型
     indicator: {
       type: String,
       required: true,
-    },  // 指标线名称
+    },
   })
 
-  const option = ref<any>(null)
-  const klineData = ref([])
-  const indicatorData = ref([])
-  const indicatorList = ref({})
-  const activeIndex = ref(0)
-
-  // 图表高亮，用于记录当前高亮tooltip
-  const highlight = (data, chart) => {
-    if (data) {
-      // 图表内部移动
-      activeIndex.value = typeof data?.batch[0]?.dataIndex === 'number' ? data?.batch[0]?.dataIndex : -1
-    } else {
-      // 移出图表
-      activeIndex.value = chart.getOption().dataZoom[0].endValue
-    }
-  }
+  const option = ref<any>(null) // 图表配置
+  const klineData = ref<KlineDataType>([]) // K线数据
+  const indicatorData = ref<IndicatorDataType>([]) // 指标线具体数据
+  const indicatorConfigList = ref<IndicatorConfigType>({}) // 指标线配置项
+  const activeIndex = ref(0) // 当前鼠标激活的数据索引
 
-  const getKlineData = async() => {
-    const { code, defaultCount, endTime, frequency } = props
-    const res = await getKline(code, defaultCount, endTime, frequency)
+  // 获取K线数据
+  const getKlineData = async () => {
+    const { code, defaultCount, tradeDate, frequency } = props
+    const res = await getKline(code, defaultCount, tradeDate, frequency)
     return res.data
   }
 
-  const getIndicatorData = async(klineData) => {
+  // 获取指标线具体数据
+  const getIndicatorData = async (klineData: KlineDataType) => {
     if (klineData.length === 0) return
     const { code, frequency, indicator } = props
     const start_date = dayjs(new Date(klineData[0][0] * 1000)).format('YYYY-MM-DD')
     const end_date = dayjs(new Date(klineData[klineData.length - 1][0] * 1000)).format('YYYY-MM-DD')
     const indicatorRes = await getIndicator(code, start_date, end_date, frequency, indicator)
-    return indicatorRes.data.datetime.reduce((res, date, index) => {
-      if (date >= klineData[0][0] && date <= klineData[klineData.length - 1][0]){
-        return [...res, {
-          ...Object.keys(indicatorRes.data).reduce((keyRes, key) => {
-            return {
-              ...keyRes,
-              [key]: indicatorRes.data[key][index]
-            }
-          }, {})
-        }]
-      }
-      return res
-    }, [])
+    // 格式处理,只格式化获取处于K线之中的指标线数据
+    return indicatorRes.data.datetime
+      ? indicatorRes.data.datetime.reduce((res: IndicatorDataType, date: number, index: number) => {
+          if (date >= klineData[0][0] && date <= klineData[klineData.length - 1][0]) {
+            return [
+              ...res,
+              {
+                ...Object.keys(indicatorRes.data).reduce((keyRes, key) => {
+                  return {
+                    ...keyRes,
+                    [key]: indicatorRes.data[key][index],
+                  }
+                }, {}),
+              },
+            ]
+          }
+          return res
+        }, [])
+      : null
   }
 
-  const getData = async() => {
+  // 初始化
+  const init = async () => {
+    // 1.获取K线数据
     klineData.value = await getKlineData()
+    // 2.默认Tips激活展示最后一条
     activeIndex.value = klineData.value.length - 1
+    // 3.获取指标线具体数据
     indicatorData.value = await getIndicatorData(klineData.value)
-    const indicatorListRes = await getIndicatorList()
-    indicatorList.value = indicatorListRes.data
-    option.value = await getOption({ 
+    // 4.获取指标相关配置
+    indicatorConfigList.value = (await getIndicatorConfigList()).data
+    // 5.获取图表配置
+    option.value = await getOption({
       kLineData: klineData.value,
       indicatorData: indicatorData.value,
       indicator: props.indicator,
-      indicatorList: indicatorList.value,
-      defaultShowBarCount: 200
+      indicatorConfigList: indicatorConfigList.value,
+      defaultShowBarCount: 200,
     })
   }
 
-  getData()
+  // 图表高亮，用于记录当前高亮tooltip
+  const highlight = (data: any, chart: EChartsType) => {
+    if (data) {
+      // 图表内部移动
+      activeIndex.value =
+        typeof data?.batch[0]?.dataIndex === 'number' ? data?.batch[0]?.dataIndex : -1
+    } else {
+      // 移出图表
+      const chartOptions: EChartsOption = chart.getOption() as EChartsOption
+      if (chartOptions.dataZoom instanceof Array) {
+        activeIndex.value = chartOptions.dataZoom[0].endValue as number
+      }
+    }
+  }
+  // 默认区域刷选
+  const afterInit = (chart: EChartsType) => {
+    /**
+     * 获取匹配用户选择的交易日期对应X轴的索引,用于刷选范围区域
+     * 匹配思路:
+     * 1.时间轴均转换为年月日字符串做对比,相等则算匹配成功
+     * 2.特殊周期K线需要特殊处理:
+     *    [1w]:时间需要均转换成所处星期的星期五日期,判断它们星期五日期是否相等
+     *    [1m,5m,15m,30m,60m]:包含前一交易日21点后的,排除掉交易日期21点后的
+     */
+    const { tradeDate, frequency } = props
+    const xAxisData = option.value.xAxis.data
+    let brushXIndexList: Array<number> = []
+    // 长周期判断
+    xAxisData.forEach((xItem: number, index: number) => {
+      // X轴年月日
+      const xItemDate = dayjs(xItem * 1000).format('YYYY-MM-DD')
+      xItemDate === tradeDate && brushXIndexList.push(index)
+      // 如果是周线,则需要判断两者周五日期是否相等
+      if (frequency === '1w') {
+        dayjs(xItemDate).day(5).format('YYYY-MM-DD') ===
+          dayjs(tradeDate).day(5).format('YYYY-MM-DD') && brushXIndexList.push(index)
+      }
+    })
+    const shortFreq = ['1m', '5m', '15m', '30m', '60m']
+    // 短周期判断
+    if (shortFreq.includes(frequency)) {
+      // 拿到上一个交易日
+      const lastTradeDateIndex = brushXIndexList[0] - 1
+      const lastTradeDate = dayjs(xAxisData[lastTradeDateIndex] * 1000).format('YYYY-MM-DD')
+      // 包含了上一个交易日21点之后的数据索引数组
+      const lastTrade21List: Array<number> = []
+      xAxisData.forEach((xItem: number, index: number) => {
+        if (
+          dayjs(xItem * 1000).format('YYYY-MM-DD') === lastTradeDate &&
+          dayjs(xItem * 1000).isSameOrAfter(`${lastTradeDate} 21:00:00`)
+        ) {
+          lastTrade21List.push(index)
+        }
+      })
+      // 排除匹配到交易日期21点之后的数据索引
+      const finallyDateIndex = brushXIndexList[brushXIndexList.length - 1]
+      const finallyDate = dayjs(xAxisData[finallyDateIndex] * 1000).format('YYYY-MM-DD 21:00:00')
+      brushXIndexList = [...lastTrade21List, ...brushXIndexList].filter(item => {
+        return dayjs(xAxisData[item] * 1000).isBefore(finallyDate)
+      })
+    }
+    chart.dispatchAction({
+      type: 'brush',
+      areas: [
+        {
+          brushType: 'lineX',
+          coordRange: [brushXIndexList[0], brushXIndexList.slice(-1)[0]],
+          xAxisIndex: 0,
+        },
+      ],
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
 </script>
 
 <style lang="scss" scoped>
-.st-kline {
-  width: 100%;
-  height: 100%;
-  background: #000;
-  position: relative;
-  &-header {
-    position: absolute;
-    padding: 2px 0 0 4px;
+  .st-kline {
+    width: 100%;
+    height: 100%;
+    background: #000;
+    position: relative;
+    &-header {
+      position: absolute;
+      padding: 2px 0 0 4px;
+    }
   }
-}
 </style>

package/packages/Kline/type.d.ts

@@ -1,9 +1,13 @@
+// K线数据类型
 export type KlineDataItem = [number, number, number, number, number, number, number, number, number]
+export type KlineDataType = Array<KlineDataItem>
 
+// 指标线数据类型
 export interface IndicatorDataItem {
   datetime: number;
   [key: string]: number;
 }
+export type IndicatorDataType = Array<IndicatorDataItem>
 
 export interface InOption {
   kLineData: KlineDataItem[];
@@ -12,3 +16,19 @@ export interface InOption {
   indicatorList: any;
   defaultShowBarCount: number;
 }
+
+// 指标线配置项数据类型
+export interface IndicatorConfigType {
+  [key: string]: {
+    [key: string]: string
+  };
+}
+
+// 获取图表配置项入参类型
+export interface InOption {
+  kLineData: KlineDataType;
+  indicatorData: IndicatorDataType;
+  indicator: string;
+  indicatorConfigList: any;
+  defaultShowBarCount: number;
+}

package/packages/Kline/utils.ts

@@ -1,26 +1,113 @@
 import axios from 'axios'
+import dayjs from 'dayjs'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
 import type { KlineDataItem, IndicatorDataItem, InOption } from './type.d.ts'
+dayjs.extend(isSameOrAfter)
 
-// 获取k线数据
-export const getKline = (code: string, bar_count: number, dt: string, frequency: string) => {
-  return axios(`http://116.62.161.92:8005/history_kline?code=${code}&bar_count=${bar_count}&dt=${dt}&frequency=${frequency}`)
+/**
+ * @description: 获取固定间隔后的交易日
+ * @param {string} currentDate 初始交易日期
+ * @param {number | undefined} days 间隔天数
+ * @return {*}
+ */
+const getTradeByAddDays = (currentDate: string, days: number | undefined) => {
+  return axios({
+    headers: {
+      Token: '8c9e48f3bfff810c3403829233f76515',
+    },
+    method: 'post',
+    url: '/proxy/review/review/getTradeByAddDays',
+    data: {
+      currentDate,
+      days,
+    },
+  })
 }
 
-// 获取指标线列表
-export const getIndicatorList = () => {
-  return axios('http://116.62.161.92:8005/get_indicator')
+/**
+ * @description: 获取K线数据
+ * @param {string} code 品种代码
+ * @param {number} bar_count 请求数据条数
+ * @param {string} tradeDate 交易日期
+ * @param {string} frequency 周期
+ * @return {*}
+ */
+export const getKline = async (
+  code: string,
+  bar_count: number,
+  tradeDate: string,
+  frequency: string
+) => {
+  // 周期对应的间隔交易日
+  const timeIntervalMap = new Map([
+    ['1m', 1],
+    ['5m', 1],
+    ['15m', 4],
+    ['30m', 8],
+    ['60m', 16],
+    ['1d', 80],
+    ['1w', 80],
+  ])
+  // 根据周期判断逻辑请求到对应的间隔末尾交易日
+  const interval = timeIntervalMap.get(frequency)
+  const res = await getTradeByAddDays(tradeDate, interval)
+  const nowDate = dayjs().format('YYYY-MM-DD')
+  const resDate = res.data.body.tradeDate.split(' ')[0]
+  let dt: null | string = null
+  // 判断接口获取到的交易日是否大于等于今日,如果为真,则以今日日期为末尾
+  if (dayjs(resDate).isSameOrAfter(nowDate)) {
+    dt = dayjs().format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    dt = `${resDate} 23:59:59`
+  }
+  return axios(
+    `http://116.62.161.92:8005/history_kline?code=${code}&bar_count=${bar_count}&dt=${dt}&frequency=${frequency}`
+  )
 }
 
-// 获取指标线数据
-export const getIndicator = (code: string, start_date: string, end_date: string, frequency: string, indicator: string) => {
-  return axios(`http://116.62.161.92:8005/realtime_indicator?code=${code}&start_date=${start_date}&end_date=${end_date}&indicator=${indicator}&frequency=${frequency}`)
+/**
+ * @description: 获取指标线下拉列表类型数据以及相关样式配置
+ * @return {*}
+ */
+export const getIndicatorConfigList = () => {
+  return axios('http://116.62.161.92:8005/get_indicator')
 }
 
+/**
+ * @description: 获取指标线具体数据
+ * @param {string} code 品种代码
+ * @param {string} start_date 开始日期
+ * @param {string} end_date 结束日期
+ * @param {string} frequency 周期
+ * @param {string} indicator 指标类型
+ * @return {*}
+ */
+export const getIndicator = (
+  code: string,
+  start_date: string,
+  end_date: string,
+  frequency: string,
+  indicator: string
+) => {
+  return axios(
+    `http://116.62.161.92:8005/realtime_indicator?code=${code}&start_date=${start_date}&end_date=${end_date}&indicator=${indicator}&frequency=${frequency}`
+  )
+}
 
+/**
+ * @description: 格式化数字:保留后三位小数
+ * @param {number} value
+ * @return {*}
+ */
 export const formatValue = (value: number) => {
   return value || value === 0 ? Math.round(value * 1000) / 1000 : null
 }
 
+/**
+ * @description: 格式化价格:万 || 亿 || 万亿
+ * @param {number} value
+ * @return {*}
+ */
 export const formatPrice = (value: number) => {
   if (value >= 1000000000000) {
     return `${(value / 1000000000000).toFixed(2)}万亿`
@@ -33,14 +120,13 @@ export const formatPrice = (value: number) => {
   }
 }
 
-export const getOption = async(data: InOption) => {
-  const {
-    kLineData,
-    indicatorData,
-    indicator,
-    indicatorList,
-    defaultShowBarCount
-  } = data
+/**
+ * @description: 格式化K线图配置项
+ * @param {InOption} data
+ * @return {*}
+ */
+export const getOption = async (data: InOption) => {
+  const { kLineData, indicatorData, indicator, indicatorConfigList, defaultShowBarCount } = data
   // 处理k线数据，x轴数据
   const candlestickData: any[] = [] // k线数据
   const xAxisData: number[] = [] // x轴数据
@@ -57,25 +143,29 @@ export const getOption = async(data: InOption) => {
   })
 
   // 处理指标线数据
-  const indicatorInfo = indicatorList[indicator]
-  const lineSeries = Object.keys(indicatorData[0]).filter(i => i !== 'datetime').map((key: string) => {
-    let color = 'rgba(238, 238, 238, 0.5)'
-    if (indicatorInfo && indicatorInfo[key]) {
-      color = `#${indicatorInfo[key].split('#')[1]}`
-    }
-    return {
-      name: key,
-      type: 'line',
-      symbol: 'none',
-      data: indicatorData.map(i => i[key]),
-      lineStyle: {
-        width: 1,
-      },
-      itemStyle: {
-        color,
-      },
-    }
-  })
+  const indicatorInfo = indicatorConfigList[indicator]
+  const lineSeries = indicatorData
+    ? Object.keys(indicatorData[0])
+        .filter(i => i !== 'datetime')
+        .map((key: string) => {
+          let color = 'rgba(238, 238, 238, 0.5)'
+          if (indicatorInfo && indicatorInfo[key]) {
+            color = `#${indicatorInfo[key].split('#')[1]}`
+          }
+          return {
+            name: key,
+            type: 'line',
+            symbol: 'none',
+            data: indicatorData.map(i => i[key]),
+            lineStyle: {
+              width: 1,
+            },
+            itemStyle: {
+              color,
+            },
+          }
+        })
+    : []
 
   return {
     dataset: {
@@ -85,9 +175,9 @@ export const getOption = async(data: InOption) => {
       },
     },
     grid: {
-      left: '60px',
-      top: '40px',
-      right: '60px',
+      left: '50px',
+      top: '50px',
+      right: '30px',
       bottom: '30px',
     },
     tooltip: {
@@ -98,18 +188,23 @@ export const getOption = async(data: InOption) => {
         label: {
           formatter: (data: any) => {
             const { axisDimension, value } = data
-            if(axisDimension === 'x') {
-              return value
+            if (axisDimension === 'x') {
+              return dayjs(new Date(value * 1000)).format('YYYY-MM-DD HH:mm')
             } else {
               return String(formatValue(value))
             }
-          }
+          },
         },
       },
     },
     xAxis: {
       type: 'category',
       data: xAxisData,
+      axisLine: {
+        lineStyle: {
+          color: 'red',
+        },
+      },
       splitLine: {
         show: true,
         lineStyle: {
@@ -118,6 +213,7 @@ export const getOption = async(data: InOption) => {
       },
       axisLabel: {
         show: true,
+        formatter: data => dayjs(new Date(data * 1000)).format('YYYY-MM-DD HH:mm'),
       },
     },
     yAxis: [
@@ -126,6 +222,9 @@ export const getOption = async(data: InOption) => {
         min: 'dataMin',
         axisLine: {
           show: true,
+          lineStyle: {
+            color: 'red',
+          },
         },
         splitLine: {
           show: true,
@@ -134,7 +233,7 @@ export const getOption = async(data: InOption) => {
           },
         },
         axisLabel: {
-          formatter: (value: number) => formatValue(value)
+          formatter: (value: number) => formatValue(value),
         },
       },
     ],
@@ -154,5 +253,20 @@ export const getOption = async(data: InOption) => {
       },
       ...lineSeries,
     ],
+    toolbox: {
+      show: false,
+    },
+    brush: {
+      xAxisIndex: 'all',
+      brushLink: 'all',
+      transformable: false,
+      outOfBrush: {
+        colorAlpha: 1,
+      },
+      brushStyle: {
+        color: 'rgba(120,140,180,0)',
+        borderColor: 'rgba(255,255,255,0.4)',
+      },
+    },
   }
-}
+}

package/packages/List/index.ts

@@ -1,8 +1,8 @@
-import { App } from "vue";
-import StList from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("StList", StList);
-  },
-};
+import { App } from "vue";
+import StList from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-list", StList);
+  },
+}

package/packages/Table/index.ts

@@ -1,8 +1,8 @@
-import { App } from "vue";
-import StTable from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-table", StTable);
-  },
-};
+import { App } from "vue";
+import StTable from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-table", StTable);
+  },
+}