st-comp 0.0.21 → 0.0.23

package/packages/Kline/index.vue

@@ -1,409 +1,612 @@
 <script setup lang="ts">
-  import * as echarts from 'echarts'
-  import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
-  import Tips from './components/Tips/index.vue'
-  import Contextmenu from './components/Contextmenu/index.vue'
-  import { getOption, getLineOption } from './option'
-  import { printConsole, formatValue, formatPrice } from './utils'
-  import type { EChartsType, EChartsOption, ECElementEvent, DataZoomComponentOption } from 'echarts'
-  import type { KlineDataType, LineDataType, InConfig, MenuDataType } from './type.d.ts'
+import * as echarts from "echarts";
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import Tips from "./components/Tips/index.vue";
+import Contextmenu from "./components/Contextmenu/index.vue";
+import { getOption, getLineOption } from "./option";
+import { printConsole, formatValue, formatPrice } from "./utils";
+import type { EChartsType, EChartsOption, ECElementEvent, DataZoomComponentOption } from "echarts";
+import type { KlineDataType, LineDataType, InConfig, MenuDataType } from "./type.d.ts";
 
-  /**
-   * 组件接收参数
-   * @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({
-    indicator: {
-      type: Object,
-      default: () => ({}),
-    },
-    klineData: {
-      type: Array,
-      default: () => [],
-    },
-    markData: {
-      type: Array,
-      default: () => [],
-    },
-    lineData: {
-      type: Array,
-      default: () => [],
-    },
-    brushRange: {
-      type: Array,
-      default: () => [],
-    },
-    defaultMenuData: {
-      type: Array,
-      default: () => [],
-    },
-    config: {
-      type: Object,
-      default: () => ({}),
-    },
-  })
+/**
+ * 组件接收参数
+ * @param {Object} indicator 指标线
+ * @param {KlineDataType} klineData K线数据
+ * @param {Array} markData 标注点位数据 [开平点, 买卖点, 信号点,...]
+ * @param {Array} lineData K线额外画线数据 [预警线, 持仓线, 条件单, ...]
+ * @param {Array} brushRange 区域刷选范围数据
+ * @param {Array} defaultMenuData 菜单项数据
+ * @param {Boolean} isSelect 组件是否被选中
+ *
+ * @param {InConfig} config 其他配置项数据
+ */
+const props = defineProps({
+  indicator: {
+    type: Object,
+    default: () => ({}),
+  },
+  klineData: {
+    type: Array,
+    default: () => [],
+  },
+  markData: {
+    type: Array,
+    default: () => [],
+  },
+  lineData: {
+    type: Array,
+    default: () => [],
+  },
+  brushRange: {
+    type: Array,
+    default: () => [],
+  },
+  defaultMenuData: {
+    type: Array,
+    default: () => [],
+  },
+  isSelect: {
+    type: Boolean,
+    default: () => false,
+  },
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 
-  /**
-   * 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',
-    },
-    // Tips配置
-    tipsConfig: {
-      open: true,
-      heigh: true,
-      low: true,
-      close: true,
-      business: true,
-      riseAndFall: true
-    }
-  }
+/**
+ * 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: 2000,
+  defaultShowBarCount: 200,
+  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",
+  },
+  // Tips配置
+  tipsConfig: {
+    open: true,
+    heigh: true,
+    low: true,
+    close: true,
+    business: true,
+    riseAndFall: true,
+  },
+  // 动态加载配置
+  dynamicLoadConfig: {
+    historyVisible: false,
+    historyLoadCallBack: () => {},
+    futureVisible: false,
+    futureLoadCallBack: () => {},
+  },
+};
 
-  /**
-   * @description: 合并后的功能配置项
-   */
-  const config: { value: InConfig } = computed(() => {
-    return { ...defaultConfig, ...props.config }
-  })
+/**
+ * @description: 合并后的功能配置项
+ */
+const config: { value: InConfig } = computed(() => {
+  return { ...defaultConfig, ...props.config };
+});
 
-  const option = ref<any>(null) // 处理后的echarts配置
-  const activeIndex = ref(-1) // 当前鼠标激活的数据索引
+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]
-      // 处理结果
-      const result = []
-      const { open, heigh, low, close, business, riseAndFall } = config.value.tipsConfig
-      open && result.push({ label: '开', value: formatValue(klineItem[0]), color: 'rgb(153, 153, 153)' })
-      heigh && result.push({ label: '高', value: formatValue(klineItem[3]), color: 'rgb(153, 153, 153)' })
-      low && result.push({ label: '低', value: formatValue(klineItem[2]), color: 'rgb(153, 153, 153)' })
-      close && result.push({ label: '收', value: formatValue(klineItem[1]), color: 'rgb(153, 153, 153)' })
-      business && result.push({ label: '额', value: formatPrice(klineItem[4]), color: 'rgb(153, 153, 153)' })
-      if (riseAndFall) {
-        let ratio = (((klineItem[1] - klineItem[5]) / klineItem[1]) * 100).toFixed(2)
-        let ratioColor = +ratio === 0.0 ? 'white' : +ratio > 0 ? 'red' : '#00ff00'
-        result.push({ label: '涨跌', value: `${ratio}%`, color: ratioColor })
-      }
-      return result
+// 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];
+    // 处理结果
+    const result = [];
+    const { open, heigh, low, close, business, riseAndFall } = config.value.tipsConfig;
+    open && result.push({ label: "开", value: formatValue(klineItem[0]), color: "rgb(153, 153, 153)" });
+    heigh && result.push({ label: "高", value: formatValue(klineItem[3]), color: "rgb(153, 153, 153)" });
+    low && result.push({ label: "低", value: formatValue(klineItem[2]), color: "rgb(153, 153, 153)" });
+    close && result.push({ label: "收", value: formatValue(klineItem[1]), color: "rgb(153, 153, 153)" });
+    business && result.push({ label: "额", value: formatPrice(klineItem[4]), color: "rgb(153, 153, 153)" });
+    if (riseAndFall) {
+      let ratio = (((klineItem[1] - klineItem[5]) / klineItem[1]) * 100).toFixed(2);
+      let ratioColor = +ratio === 0.0 ? "white" : +ratio > 0 ? "red" : "#00ff00";
+      result.push({ 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: formatValue(next.data[activeIndex.value]),
-            color: next.color,
-          })
-        return result
-      }, [])
-    }
-    return []
-  })
+    return result;
+  }
+  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: formatValue(next.data[activeIndex.value]),
+          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,
-    }
-  )
+// 监视: 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' })
-          }
-        },
-      ],
-      // 全部绘制
-      [
-        undefined,
-        async () => {
-          await draw('kline')
-          await draw('line')
-          await draw('brush')
-        },
-      ],
-    ])
-    const callBack = callBackMap.get(type)
-    if (callBack instanceof Function) {
-      await callBack()
-    }
+/**
+ * @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" });
+        }
+      },
+    ],
+    // 全部绘制
+    [
+      undefined,
+      async () => {
+        await draw("kline");
+        await draw("line");
+        await draw("brush");
+      },
+    ],
+    // history-K线历史数据绘制
+    [
+      "history",
+      async () => {
+        const chartOption = echartsInstance.getOption();
+        const newOption = await getOption(
+          props.klineData as KlineDataType,
+          props.markData,
+          props.indicator,
+          config.value
+        );
+        const addDataLength =
+          newOption.dataset.source.klineData.length - chartOption.dataset[0].source.klineData.length;
+        echartsInstance.setOption(
+          {
+            ...newOption,
+            dataZoom: [
+              {
+                type: "inside",
+                xAxisIndex: [0, 0],
+                startValue: chartOption.dataZoom[0].startValue + addDataLength,
+                endValue: chartOption.dataZoom[0].endValue + addDataLength,
+              },
+            ],
+          },
+          true
+        );
+      },
+    ],
+    // future-后续数据绘制
+    [
+      "future",
+      async () => {
+        const chartOption = echartsInstance.getOption();
+        const newOption = await getOption(
+          props.klineData as KlineDataType,
+          props.markData,
+          props.indicator,
+          config.value
+        );
+        echartsInstance.setOption(
+          {
+            ...newOption,
+            dataZoom: [
+              {
+                type: "inside",
+                xAxisIndex: [0, 0],
+                start: ((props.klineData.length - config.value.defaultShowBarCount) / props.klineData.length) * 100, // 保持缩放大小不变
+                // start: ((chartOption.dataZoom[0].startValue + 1) / (props.klineData.length - config.value.preBarCount)) * 100, // 保持启始位置不变
+                end: 99.99,
+              },
+            ],
+          },
+          true
+        );
+      },
+    ],
+  ]);
+  const callBack = callBackMap.get(type);
+  if (callBack instanceof Function) {
+    await callBack();
   }
+};
 
-  //----------------------------右键菜单功能相关----------------------------------
-  const cursorPenVisible = ref(false) // 画笔模式开关
+//----------------------------右键菜单功能相关----------------------------------
+const cursorPenVisible = ref(false); // 画笔模式开关
 
-  const menuData = ref<MenuDataType>([])
+const menuData = ref<MenuDataType>([]);
 
-  /**
-   * @description: 点击菜单项
-   * @param {Object} item 菜单项的数据
-   */
-  const menuClick = (item: any) => {
-    const { callBack } = item
-    callBack instanceof Function && callBack(echartsInstance, cursorPenVisible)
-  }
+/**
+ * @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
-  }
+/**
+ * @description: 菜单关闭的回调
+ * @todo: 进行菜单内容的初始化
+ */
+const closeContextMenuCallBack = () => {
+  menuData.value = props.defaultMenuData as MenuDataType;
+};
 
-  //----------------------------Echarts基座-------------------------------
-  const echartsRef = ref<HTMLElement>()
-  let echartsInstance: EChartsType // echarts实例
-  let chartDomObserver: any // 监视图表DOM变化
+//----------------------------Echarts基座-------------------------------
+const echartsRef = ref<HTMLElement>();
+let echartsInstance: EChartsType; // echarts实例
+let chartDomObserver: any; // 监视图表DOM变化
 
-  /**
-   * @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
-    } else {
-      // 移出图表
-      const chartOptions: EChartsOption = chart.getOption() as EChartsOption
-      if (chartOptions.dataZoom instanceof Array) {
-        activeIndex.value = chartOptions.dataZoom[0].endValue as number
-      }
+/**
+ * @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;
+  } else {
+    // 移出图表
+    const chartOptions: EChartsOption = chart.getOption() as EChartsOption;
+    if (chartOptions.dataZoom instanceof Array) {
+      activeIndex.value = chartOptions.dataZoom[0].endValue as number;
     }
   }
+};
 
+/**
+ * @description: echarts数据缩放的相关参数
+ * @param {any} datazoomTimer 缩放回调函数的延时器
+ * @param {Number} datazoomTime 缩放回调函数的延时器的时间
+ * @param {Function} datazoom 数据缩放的回调函数
+ *
+ * 判断具体是拖拽,还是缩放的逻辑
+ * 根据start~end的差值前后是否变动
+ * 因为拖拽时,他们的差值是恒定的,缩放时是会变动
+ */
+let datazoomTimer: any = null;
+const datazoomTime: number = 300;
+let historyIsLoading = false;
+let historyIsAllLoad = ref(false);
+let futureIsLoading = false;
+let futureIsAllLoad = ref(false);
+const datazoom = async (params: any) => {
+  // 执行[方向键]时,返回的是startValue和endValue
+  // 执行[鼠标]时,返回的是batch
   /**
-   * @description: echarts数据缩放的相关参数
-   * @param {any} datazoomTimer 缩放回调函数的延时器
-   * @param {Number} datazoomTime 缩放回调函数的延时器的时间
-   * @param {Function} datazoom 数据缩放的回调函数
+   * @description: 历史数据动态加载渲染逻辑
+   * 前置条件:
+   * 1.允许开启历史动态加载
+   * 2.如果剩余K线根数不足100根
+   * 3.没有正在加载历史数据
+   * 4.历史数据并未已全部获取
    */
-  let datazoomTimer: any = null
-  const datazoomTime: number = 300
-  const datazoom = () => {
-    clearTimeout(datazoomTimer)
-    datazoomTimer = setTimeout(() => {
-      draw('line')
-      clearTimeout(datazoomTimer)
-      datazoomTimer = null
-    }, datazoomTime)
+  // 获取左侧剩余K线根数
+  const historyLength = params.batch ? params.batch[0].start * config.value.totalBarCount : params.startValue;
+  if (
+    config.value.dynamicLoadConfig.historyVisible &&
+    historyLength <= 100 &&
+    !historyIsLoading &&
+    !historyIsAllLoad.value
+  ) {
+    historyIsLoading = true;
+    await config.value.dynamicLoadConfig.historyLoadCallBack(historyIsAllLoad);
+    await draw("history");
+    historyIsLoading = false;
   }
-
   /**
-   * @description: echarts鼠标右击事件回调
+   * @description: 后续数据动态加载渲染逻辑
+   * 前置条件:
+   * 1.允许开启后续动态加载
+   * 2.右侧已为图表尽头
+   * 3.没有正在加载后续数据
+   * 4.后续数据并未已全部获取
+   * 5.仅仅在[鼠标拖拽,方向键左右]时
    */
-  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
-    })
+  // 获取右侧K线是否最后一根
+  const nowIsEnd = params.batch
+    ? params.batch[0].end === 100
+    : params.endValue >= props.klineData.length - config.value.preBarCount - 1;
+  if (config.value.dynamicLoadConfig.futureVisible && nowIsEnd && !futureIsLoading && !futureIsAllLoad.value) {
+    futureIsLoading = true;
+    await config.value.dynamicLoadConfig.futureLoadCallBack(futureIsAllLoad);
+    await draw("future");
+    futureIsLoading = false;
   }
+  clearTimeout(datazoomTimer);
+  datazoomTimer = setTimeout(() => {
+    draw("line");
+    clearTimeout(datazoomTimer);
+    datazoomTimer = null;
+  }, datazoomTime);
+};
+/**
+ * @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 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", (params: any) => {
+    datazoom(params);
+  });
+};
 
-  // 解绑事件
-  const removeEventListener = () => {
-    echartsInstance.off('highlight')
-    echartsInstance.off('globalout')
-    echartsInstance.off('contextmenu')
-    echartsInstance.off('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
+// 键盘事件
+const keyDownEvent = (e: KeyboardEvent) => {
+  if (!echartsInstance) return;
+  // 只有选中或者按ctrl才激活按键
+  if (!(e.ctrlKey || props.isSelect)) return;
+  const option = echartsInstance.getOption() as EChartsOption;
+  let { startValue, endValue } = (option.dataZoom as DataZoomComponentOption[])[0] as {
+    startValue: number;
+    endValue: number;
+  };
+  const handleLeft = () => {
+    // 左按键
+    if (startValue === 0) {
+      return;
+    }
+    startValue = startValue - 1;
+    endValue = endValue - 1;
+    echartsInstance.dispatchAction({
+      type: "dataZoom",
+      startValue,
+      endValue,
+    });
+  };
+  const handleRight = () => {
+    // 右按键
+    // 如果开启了动态后续数据加载
+    if (config.value.dynamicLoadConfig.futureVisible && !futureIsLoading && !futureIsAllLoad.value) {
+      startValue = startValue + 1;
+      endValue = endValue + 1;
+      echartsInstance.dispatchAction({
+        type: "dataZoom",
+        startValue,
+        endValue,
+      });
+    } else {
+      if (endValue === option.xAxis[0].data.length - 1) {
+        return;
       }
-      echartsInstance.resize()
-      draw('line')
-    })
-    chartDomObserver.observe(echartsRef.value)
-  }
+      startValue = startValue + 1;
+      endValue = endValue + 1;
+      echartsInstance.dispatchAction({
+        type: "dataZoom",
+        startValue,
+        endValue,
+      });
+    }
+  };
+  const handleUp = () => {
+    // 上按键-放大 最少保持5条数据
+    if (endValue - startValue < 5) {
+      return;
+    }
+    const diff = Math.floor((endValue - startValue) / 2) + 1;
+    startValue = startValue + diff;
+    if (endValue - startValue < 5) {
+      startValue = endValue - 4;
+    }
+    echartsInstance.dispatchAction({
+      type: "dataZoom",
+      startValue,
+      endValue,
+    });
+  };
+  const handleDown = () => {
+    // 下按键-缩小
+    const diff = Math.min(500, endValue - startValue);
+    startValue = startValue - diff - 1;
+    echartsInstance.dispatchAction({
+      type: "dataZoom",
+      startValue,
+      endValue,
+    });
+  };
+  const callBackMap = new Map([
+    ["ArrowLeft", handleLeft],
+    ["ArrowRight", handleRight],
+    ["ArrowUp", handleUp],
+    ["ArrowDown", handleDown],
+  ]);
+  const callBack = callBackMap.get(e.code);
+  callBack instanceof Function && callBack();
+};
+
+/**
+ * @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);
+  // 7.绑定键盘事件
+  window.addEventListener("keydown", keyDownEvent);
+};
 
-  onMounted(() => {
-    init()
-  })
+onMounted(() => {
+  init();
+});
 
-  onUnmounted(() => {
-    // 1.解绑
-    removeEventListener()
-    // 2.销毁实例
-    echartsInstance.dispose()
-    // 3.取消监听图表DOM
-    chartDomObserver.disconnect()
-    chartDomObserver = null
-  })
+onUnmounted(() => {
+  // 1.解绑
+  removeEventListener();
+  window.removeEventListener("keydown", keyDownEvent);
+  // 2.销毁实例
+  echartsInstance.dispose();
+  // 3.取消监听图表DOM
+  chartDomObserver.disconnect();
+  chartDomObserver = null;
+});
 </script>
 
 <template>
@@ -417,15 +620,9 @@
       <Tips :data="indicatorTips" />
     </div>
     <!-- 图表 + 菜单 -->
-    <Contextmenu
-      class="st-kline-body"
-      @closeContextMenuCallBack="closeContextMenuCallBack"
-    >
+    <Contextmenu class="st-kline-body" @closeContextMenuCallBack="closeContextMenuCallBack">
       <!-- 图表 -->
-      <div
-        ref="echartsRef"
-        :class="cursorPenVisible ? 'st-kline-chart cursorPen' : 'st-kline-chart'"
-      />
+      <div ref="echartsRef" :class="cursorPenVisible ? 'st-kline-chart cursorPen' : 'st-kline-chart'" />
       <!-- 菜单 -->
       <template #popover>
         <el-menu class="menu">
@@ -445,41 +642,41 @@
 </template>
 
 <style lang="scss">
-  // 需要写在外面,不然会被Vue唯一标识符顶掉导致样式不生效
-  .cursorPen canvas {
-    cursor: url(./images/pen.png) -30 30, auto !important;
-  }
+// 需要写在外面,不然会被Vue唯一标识符顶掉导致样式不生效
+.cursorPen canvas {
+  cursor: url(./images/pen.png) -30 30, auto !important;
+}
 </style>
 <style lang="scss" scoped>
-  .st-kline {
+.st-kline {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  overflow-x: hidden;
+  position: relative; // 配合提供给菜单定位
+  // K线头部区域: Tips
+  &-header {
+    height: 34px;
+    position: absolute;
+    left: 66px;
+  }
+  &-body {
     width: 100%;
     height: 100%;
-    background: #000;
-    overflow-x: hidden;
-    position: relative; // 配合提供给菜单定位
-    // K线头部区域: Tips
-    &-header {
-      height: 34px;
-      position: absolute;
-      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;
-      }
+  }
+  &-chart {
+    width: 100%;
+    height: 100%;
+  }
+  .menu {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: white;
+    border-right: 0;
+    .menuItem {
+      font-size: 16px;
+      height: 32px;
     }
   }
+}
 </style>