st-comp 0.0.15 → 0.0.17

package/packages/Kline/index.vue

@@ -1,141 +1,321 @@
-<template>
-  <div class="st-kline">
-    <!-- 顶部Tips -->
-    <div class="st-kline-header">
-      <Tips
-        :activeIndex="activeIndex"
-        :klineData="klineData"
-        :indicatorData="indicatorData"
-        :indicatorConfig="indicatorConfigList[indicator]"
-      />
-    </div>
-    <!-- 图表 -->
-    <st-echarts
-      v-if="option"
-      :option="option"
-      :themeConfig="{
-        name: 'kline',
-        light: klineThemeLight,
-        dark: klineThemeDark,
-      }"
-      @highlight="highlight"
-      @afterInit="afterInit"
-    />
-  </div>
-</template>
-
 <script setup lang="ts">
-  import dayjs from 'dayjs'
-  import { ref, onMounted } from 'vue'
+  import * as echarts from 'echarts'
+  import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
   import Tips from './components/Tips/index.vue'
-  import klineThemeDark from './kline_theme_dark.json'
-  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'
+  import Contextmenu from './components/Contextmenu/index.vue'
+  import { getOption, getLineOption } from './option'
+  import { printConsole, formatPrice } from './utils'
+  import type { EChartsType, EChartsOption, ECElementEvent, DataZoomComponentOption } from 'echarts'
+  import type { KlineDataType, LineDataType, InConfig, MenuDataType } from './type.d.ts'
 
   /**
    * 组件接收参数
-   * @param {String} code 品种代码
-   * @param {Number} defaultCount 默认K线总条数
-   * @param {String} tradeDate 最终交易日时间
-   * @param {String} frequency 周期名称
-   * @param {String} indicator 指标线类型
+   * @param {Object} indicator 指标线
+   * @param {KlineDataType} klineData K线数据
+   * @param {Array} markData 标注点位数据 [开平点, 买卖点, 信号点,...]
+   * @param {Array} lineData K线额外画线数据 [预警线, 持仓线, 条件单, ...]
+   * @param {Array} brushRange 区域刷选范围数据
+   * @param {Array} defaultMenuData 菜单项数据
+   *
+   * @param {InConfig} config 其他配置项数据
    */
   const props = defineProps({
-    code: {
-      type: String,
-      required: true,
+    indicator: {
+      type: Object,
+      default: () => ({
+        DKX: 'LINE#FFFFFF',
+        EMA120: 'LINE#E4007F',
+        EMA240: 'LINE#999999',
+        EMA60: 'LINE#00FF00',
+        MADKX: 'LINE#FFFF00',
+        WINDOW: '#0',
+      }),
     },
-    defaultCount: {
-      type: Number,
-      default: () => 500,
+    klineData: {
+      type: Array,
+      default: () => [],
     },
-    tradeDate: {
-      type: String,
-      required: true,
+    markData: {
+      type: Array,
+      default: () => [],
     },
-    frequency: {
-      type: String,
-      required: true,
+    lineData: {
+      type: Array,
+      default: () => [],
     },
-    indicator: {
-      type: String,
-      required: true,
+    brushRange: {
+      type: Array,
+      default: () => [],
+    },
+    defaultMenuData: {
+      type: Array,
+      default: () => [],
+    },
+    config: {
+      type: Object,
+      default: () => ({}),
     },
   })
 
-  const option = ref<any>(null) // 图表配置
-  const klineData = ref<KlineDataType>([]) // K线数据
-  const indicatorData = ref<IndicatorDataType>([]) // 指标线具体数据
-  const indicatorConfigList = ref<IndicatorConfigType>({}) // 指标线配置项
-  const activeIndex = ref(0) // 当前鼠标激活的数据索引
-
-  // 获取K线数据
-  const getKlineData = async () => {
-    const { code, defaultCount, tradeDate, frequency } = props
-    const res = await getKline(code, defaultCount, tradeDate, frequency)
-    return res.data
+  /**
+   * K线功能默认配置
+   * @param {Number} totalBarCount k线总条数
+   * @param {Number} defaultShowBarCount k线默认展示条数
+   * @param {Number} preBarCount k线预加载条数，用于计算指标线
+   * ---------------------------------------------------------
+   * @param {Number} gridLeft k线组件grid: left
+   * @param {Number} gridTop k线组件grid: top
+   * @param {Number} gridRight k线组件grid: right
+   * @param {Number} gridBottom k线组件grid: bottom
+   * ---------------------------------------------------------
+   * @param {Object} warningConfig 预警线配置
+   * @param {Object} positionConfig 持仓线配置
+   * @param {Object} conditionConfig 条件单配置
+   */
+  const defaultConfig: InConfig = {
+    totalBarCount: 3000,
+    defaultShowBarCount: 120,
+    preBarCount: 800,
+    gridLeft: 60,
+    gridTop: 0,
+    gridRight: 60,
+    gridBottom: 30,
+    // 预警线配置
+    warningConfig: {
+      draggable: false,
+      lineColor: '#fff',
+      textColor: '#fff',
+    },
+    // 持仓线配置
+    positionConfig: {
+      draggable: false,
+      lineColor: '#e45d07',
+      textColor: '#fff',
+    },
+    // 条件单配置
+    conditionConfig: {
+      draggable: false,
+      lineColor: '#fff',
+      textColor: '#fff',
+      profitLineColor: '#b71e44',
+      profitTextColor: '#fff',
+      lossLineColor: '#749b66',
+      lossTextColor: '#fff',
+    },
   }
 
-  // 获取指标线具体数据
-  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)
-    // 格式处理,只格式化获取处于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],
-                  }
-                }, {}),
-              },
-            ]
+  /**
+   * @description: 合并后的功能配置项
+   */
+  const config: { value: InConfig } = computed(() => {
+    return { ...defaultConfig, ...props.config }
+  })
+
+  const option = ref<any>(null) // 处理后的echarts配置
+  const activeIndex = ref(-1) // 当前鼠标激活的数据索引
+
+  // Tips: [开, 收, 低, 高, 成交额, 昨收]
+  const kLineTips = computed(() => {
+    if (option.value && option.value.dataset[0]?.source?.klineData[activeIndex.value]) {
+      const klineItem = option.value.dataset[0].source.klineData[activeIndex.value]
+      // 计算涨跌比
+      let ratio = (((klineItem[1] - klineItem[5]) / klineItem[1]) * 100).toFixed(2)
+      let ratioColor = +ratio === 0.0 ? 'white' : +ratio > 0 ? 'red' : '#00ff00'
+      return [
+        {
+          label: '开',
+          value: klineItem[0],
+          color: 'rgb(153, 153, 153)',
+        },
+        {
+          label: '高',
+          value: klineItem[3],
+          color: 'rgb(153, 153, 153)',
+        },
+        {
+          label: '低',
+          value: klineItem[2],
+          color: 'rgb(153, 153, 153)',
+        },
+        {
+          label: '收',
+          value: klineItem[1],
+          color: 'rgb(153, 153, 153)',
+        },
+        {
+          label: '额',
+          value: formatPrice(klineItem[4]),
+          color: 'rgb(153, 153, 153)',
+        },
+        {
+          label: '涨跌',
+          value: `${ratio}%`,
+          color: ratioColor,
+        },
+      ]
+    }
+    return []
+  })
+  // Tips: 指标
+  const indicatorTips = computed(() => {
+    if (option.value && option.value.dataset[0]?.source?.indicatorData) {
+      return option.value.dataset[0].source.indicatorData.reduce((result: any, next: any) => {
+        next.data[activeIndex.value] &&
+          result.push({
+            label: next.key,
+            value: (next.data[activeIndex.value]).toFixed(2),
+            color: next.color,
+          })
+        return result
+      }, [])
+    }
+    return []
+  })
+
+  // 监视: props[klineData, indicator, markData] -> 重绘全部
+  watch(
+    () => [props.klineData, props.indicator, props.markData],
+    () => {
+      draw()
+    },
+    {
+      deep: true,
+    }
+  )
+  // 监视: props.lineData - 额外画线数据 -> 重新绘制额外线
+  watch(
+    () => props.lineData,
+    async () => {
+      printConsole('st-kline组件消息:props.lineData监控,额外画线数据发生改变,重绘->line', {
+        color: 'red',
+      })
+      draw('line')
+    },
+    {
+      deep: true,
+    }
+  )
+  // 监视: props.brushRange - 区域刷选数据 -> 重新刷选
+  watch(
+    () => props.brushRange,
+    async () => {
+      printConsole('st-kline组件消息:props.brushRange监控,区域刷选数据发生改变,重绘->brush', {
+        color: 'red',
+      })
+      draw('brush')
+    },
+    {
+      deep: true,
+    }
+  )
+
+  /**
+   * @description: 图表绘制函数
+   * @param {?String} type 绘制类型[Kline-K线,line-额外线条,brush-区域刷选,不传-全部]
+   */
+  const draw = async (type?: string) => {
+    const callBackMap = new Map([
+      // kline-K线绘制
+      [
+        'kline',
+        async () => {
+          const newOption = await getOption(
+            props.klineData as KlineDataType,
+            props.markData,
+            props.indicator,
+            config.value
+          )
+          const { graphic } = echartsInstance.getOption() ?? { graphic: [] }
+          option.value = { ...newOption, graphic }
+          echartsInstance.setOption(option.value, true)
+          printConsole('st-kline组件消息:K线绘制完毕-draw', { color: 'green' })
+        },
+      ],
+      // line-额外线条绘制
+      [
+        'line',
+        () => {
+          const echartsOptions = echartsInstance.getOption()
+          const graphic = getLineOption(props.lineData as LineDataType, config.value, echartsInstance)
+          option.value = { ...echartsOptions, graphic }
+          echartsInstance.setOption(option.value, {
+            replaceMerge: ['graphic'],
+          })
+          printConsole('st-kline组件消息:额外画线绘制完毕-draw', { color: 'green' })
+        },
+      ],
+      // brush-区域刷选
+      [
+        'brush',
+        () => {
+          const { brushRange } = props
+          if (brushRange instanceof Array && brushRange.length > 0) {
+            echartsInstance.dispatchAction({
+              type: 'brush',
+              areas: [
+                {
+                  brushType: 'lineX',
+                  coordRange: [brushRange[0] + '', brushRange[1] + ''],
+                  xAxisIndex: 0,
+                },
+              ],
+            })
+            printConsole('st-kline组件消息:区域刷选绘制完毕-draw', { color: 'green' })
           }
-          return res
-        }, [])
-      : null
+        },
+      ],
+      // 全部绘制
+      [
+        undefined,
+        async () => {
+          await draw('kline')
+          await draw('line')
+          await draw('brush')
+        },
+      ],
+    ])
+    const callBack = callBackMap.get(type)
+    if (callBack instanceof Function) {
+      await callBack()
+    }
   }
 
-  // 初始化
-  const init = async () => {
-    // 1.获取K线数据
-    klineData.value = await getKlineData()
-    // 2.默认Tips激活展示最后一条
-    activeIndex.value = klineData.value.length - 1
-    // 3.获取指标线具体数据
-    indicatorData.value = await getIndicatorData(klineData.value)
-    // 4.获取指标相关配置
-    indicatorConfigList.value = (await getIndicatorConfigList()).data
-    // 5.获取图表配置
-    const params = {
-      kLineData: klineData.value,
-      indicatorData: indicatorData.value,
-      indicator: props.indicator,
-      indicatorConfigList: indicatorConfigList.value,
-      defaultShowBarCount: 200,
-    }
-    option.value = await getOption(params)
+  //----------------------------右键菜单功能相关----------------------------------
+  const cursorPenVisible = ref(false) // 画笔模式开关
+
+  const menuData = ref<MenuDataType>([])
+
+  /**
+   * @description: 点击菜单项
+   * @param {Object} item 菜单项的数据
+   */
+  const menuClick = (item: any) => {
+    const { callBack } = item
+    callBack instanceof Function && callBack(echartsInstance, cursorPenVisible)
+  }
+
+  /**
+   * @description: 菜单关闭的回调
+   * @todo: 进行菜单内容的初始化
+   */
+  const closeContextMenuCallBack = () => {
+    menuData.value = props.defaultMenuData as MenuDataType
   }
 
+  //----------------------------Echarts基座-------------------------------
+  const echartsRef = ref<HTMLElement>()
+  let echartsInstance: EChartsType // echarts实例
+  let chartDomObserver: any // 监视图表DOM变化
+
   /**
-   * echarts相关事件--
-   * 鼠标移动激活数据时触发,动态更新Tips数据
-  */
+   * @description: echarts数据高亮回调
+   * @param {any} data echarts数据
+   * @param {EChartsType} chart echarts实例
+   */
   const highlight = (data: any, chart: EChartsType) => {
     if (data) {
       // 图表内部移动
-      activeIndex.value =
-        typeof data?.batch[0]?.dataIndex === 'number' ? data?.batch[0]?.dataIndex : -1
+      activeIndex.value = typeof data?.batch[0]?.dataIndex === 'number' ? data?.batch[0]?.dataIndex : -1
     } else {
       // 移出图表
       const chartOptions: EChartsOption = chart.getOption() as EChartsOption
@@ -144,28 +324,181 @@
       }
     }
   }
+
+  /**
+   * @description: echarts数据缩放的相关参数
+   * @param {any} datazoomTimer 缩放回调函数的延时器
+   * @param {Number} datazoomTime 缩放回调函数的延时器的时间
+   * @param {Function} datazoom 数据缩放的回调函数
+   */
+  let datazoomTimer: any = null
+  const datazoomTime: number = 300
+  const datazoom = () => {
+    clearTimeout(datazoomTimer)
+    datazoomTimer = setTimeout(() => {
+      draw('line')
+      clearTimeout(datazoomTimer)
+      datazoomTimer = null
+    }, datazoomTime)
+  }
+
   /**
-   * echarts相关事件--
-   * 修改echarts图表配置渲染后,进行的回调
-  */
-  const afterInit = (chart: EChartsType) => {
+   * @description: echarts鼠标右击事件回调
+   */
+  let echartsContextMenuTimer: any = null
+  const echartsContextMenu = (params: ECElementEvent) => {
+    echartsContextMenuTimer = setTimeout(() => {
+      // 判定是否点击到的元素为额外画线
+      if (params.componentType === 'graphic') {
+        const { oncontextmenu } = params.info?.event ?? {}
+        oncontextmenu instanceof Function && oncontextmenu(params, params.info, menuData)
+      }
+      clearTimeout(echartsContextMenuTimer)
+      echartsContextMenuTimer = null
+    })
+  }
+
+  // 绑定事件
+  const addEventListener = () => {
+    echartsInstance.on('highlight', (data: any) => {
+      highlight(data, echartsInstance)
+    })
+    echartsInstance.on('globalout', () => {
+      highlight(null, echartsInstance)
+    })
+    echartsInstance.on('contextmenu', (params: ECElementEvent) => {
+      echartsContextMenu(params)
+    })
+    echartsInstance.on('datazoom', () => {
+      datazoom()
+    })
+  }
+
+  // 解绑事件
+  const removeEventListener = () => {
+    echartsInstance.off('highlight')
+    echartsInstance.off('globalout')
+    echartsInstance.off('contextmenu')
+    echartsInstance.off('datazoom')
+  }
 
+  /**
+   * @description: K线组件初始化
+   */
+  const init = async () => {
+    let Initializing: boolean | null = true // 正在初始化
+    // 1.初始化图表
+    echartsInstance = echarts.init(echartsRef.value) as EChartsType
+    // 2.绘制
+    await draw()
+    // 3.初始化右键菜单
+    menuData.value = props.defaultMenuData as MenuDataType
+    // 4.初始化数据激活索引
+    activeIndex.value =
+      ((echartsInstance.getOption().dataZoom as DataZoomComponentOption[])[0].endValue as number) ?? -1
+    // 5.进行图表事件绑定
+    addEventListener()
+    // 6.进行DOM监控,图表重加载
+    chartDomObserver = new ResizeObserver(() => {
+      if (Initializing) {
+        Initializing = null
+        return
+      }
+      echartsInstance.resize()
+      draw('line')
+    })
+    chartDomObserver.observe(echartsRef.value)
   }
 
   onMounted(() => {
     init()
   })
+
+  onUnmounted(() => {
+    // 1.解绑
+    removeEventListener()
+    // 2.销毁实例
+    echartsInstance.dispose()
+    // 3.取消监听图表DOM
+    chartDomObserver.disconnect()
+    chartDomObserver = null
+  })
 </script>
 
+<template>
+  <!-- 神兔-K线组件 -->
+  <div class="st-kline">
+    <!-- Tips -->
+    <div class="st-kline-header">
+      <!-- 开, 高, 低, 收 -->
+      <Tips :data="kLineTips" />
+      <!-- 指标 -->
+      <Tips :data="indicatorTips" />
+    </div>
+    <!-- 图表 + 菜单 -->
+    <Contextmenu
+      class="st-kline-body"
+      @closeContextMenuCallBack="closeContextMenuCallBack"
+    >
+      <!-- 图表 -->
+      <div
+        ref="echartsRef"
+        :class="cursorPenVisible ? 'st-kline-chart cursorPen' : 'st-kline-chart'"
+      />
+      <!-- 菜单 -->
+      <template #popover>
+        <el-menu class="menu">
+          <el-menu-item
+            v-for="item in menuData"
+            :key="item.label"
+            :index="item.label"
+            class="menuItem"
+            @click="menuClick(item)"
+          >
+            {{ item.label }}
+          </el-menu-item>
+        </el-menu>
+      </template>
+    </Contextmenu>
+  </div>
+</template>
+
+<style lang="scss">
+  // 需要写在外面,不然会被Vue唯一标识符顶掉导致样式不生效
+  .cursorPen canvas {
+    cursor: url(./images/pen.png) -30 30, auto !important;
+  }
+</style>
 <style lang="scss" scoped>
   .st-kline {
     width: 100%;
     height: 100%;
     background: #000;
-    position: relative;
+    overflow-x: hidden;
+    position: relative; // 配合提供给菜单定位
+    // K线头部区域: Tips
     &-header {
+      height: 34px;
       position: absolute;
-      padding: 2px 0 0 4px;
+      left: 66px;
+    }
+    &-body {
+      width: 100%;
+      height: 100%;
+    }
+    &-chart {
+      width: 100%;
+      height: 100%;
+    }
+    .menu {
+      border-radius: 4px;
+      overflow: hidden;
+      background-color: white;
+      border-right: 0;
+      .menuItem {
+        font-size: 16px;
+        height: 32px;
+      }
     }
   }
 </style>