st-comp 0.0.45 → 0.0.47

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

@@ -0,0 +1,716 @@
+<template>
+  <div class="kline">
+    <ContextMenu :class="openPenMode ? 'kline-mainChart penMode' : 'kline-mainChart'" @closeMenuCallBack="closeMenu">
+      <!-- 主图 -->
+      <div ref="mainChartRef" class="chart" />
+      <!-- 右键菜单 -->
+      <template #popover>
+        <el-menu class="menu">
+          <el-menu-item
+            class="menu-item"
+            v-for="item in menuData"
+            :key="item.label"
+            :index="item.label"
+            @click="clickMenuItem(item)"
+          >
+            {{ item.label }}
+          </el-menu-item>
+        </el-menu>
+      </template>
+    </ContextMenu>
+    <YearChart class="year-chart" v-if="props.chartMode === '价差周期性'" :data="yearChartData" />
+    <!-- 图表工具库 -->
+    <st-klineUtils ref="klineUtilsRef" />
+  </div>
+</template>
+
+<script setup>
+import dayjs from "dayjs";
+import { stMath } from "st-func";
+import * as echarts from "echarts";
+import { getKlineDataApi } from "./mockApi";
+import {
+  debounce,
+  formatConfig,
+  resizeListener,
+  getWarningLineGraphic,
+  getPositionLineGraphic,
+  getConditionLineGraphic,
+  getRelevanceLineSeries,
+  getDistributionLineGraphic,
+} from "./utils";
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
+import ContextMenu from "./components/ContextMenu/index.vue";
+import YearChart from "./components/YearChart/index.vue";
+
+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: () => ({}) }, // 配置
+  chartMode: { type: String, default: () => "" }, // 价差五种图
+});
+
+// 主图实例
+let mainChart;
+// 主图Dom监听实例
+let resizeRo;
+// 主图Ref
+const mainChartRef = ref();
+// 主图工具库Ref
+const klineUtilsRef = ref();
+// 主图绘图数据
+const drawData = ref({});
+// 主图配置项
+const config = computed(() => formatConfig(props.config));
+
+// 右键菜单数据
+const defaultMenuData = [
+  {
+    label: "画线预警",
+    callBack: () => drawLineWarning(),
+  },
+  {
+    label: "自定义菜单项二",
+  },
+  {
+    label: "自定义菜单项三",
+  },
+];
+const menuData = ref([]);
+
+// ------额外画线------
+const openPenMode = ref(false);
+const lineData = ref([]);
+
+// ------价差五图------
+const relevanceData = ref([]); // 二腿相关度数据
+const yearChartData = ref([]); // 价差周期性数据
+
+onMounted(async () => {
+  // 1.初始化指标计算方法
+  await klineUtilsRef.value.initTalib();
+  // 2.初始化主图DOM
+  mainChart = echarts.init(mainChartRef.value);
+  // 3.绑定resize事件
+  resizeRo = resizeListener(mainChartRef.value, () => {
+    mainChart.resize();
+    handleChartMode();
+  });
+  // 4.绑定主图事件
+  bindMainChartEvent();
+  // 5.获取主图数据 + 渲染
+  await getMainChartData();
+  const params = {
+    startValue: drawData.value.length - config.value.defaultShowCount,
+    endValue: drawData.value.length - 1,
+  };
+  draw("main", params);
+  // 7.获取额外画线数据 + 渲染
+  await getLineData();
+  draw("line");
+  // 8.初始化右键菜单
+  menuData.value = defaultMenuData;
+  // 9.根据传入图表模式,进行额外渲染
+  handleChartMode();
+});
+
+// 监控: props.code 重绘[主图, 额外画线] - 缩放重置
+watch(
+  () => props.code,
+  async () => {
+    await getMainChartData();
+    const params = {
+      startValue: drawData.value.length - config.value.defaultShowCount,
+      endValue: drawData.value.length - 1,
+    };
+    draw("main", params);
+    await getLineData();
+    draw("line");
+  },
+  { deep: true }
+);
+// 监控: props.freqId, props.mainIndicator 重绘[主图] - 缩放不重置
+watch(
+  () => [props.freqId, props.mainIndicator],
+  async () => {
+    await getMainChartData();
+    const { startValue, endValue } = mainChart.getOption().dataZoom[0];
+    const params = {
+      startValue,
+      endValue,
+    };
+    draw("main", params);
+  },
+  { deep: true }
+);
+// 监控: props.chartMode 重绘[价差五图]
+watch(
+  () => props.chartMode,
+  async () => {
+    handleChartMode();
+  },
+  { deep: true }
+);
+
+onUnmounted(() => {
+  unbindMainChartEvent();
+  mainChart.dispose();
+  resizeRo.dispose();
+});
+
+// 获取主图绘制数据
+const getMainChartData = async () => {
+  const { addCount, preLoadCount } = config.value;
+  const res = await getKlineData({
+    queryType: "1",
+    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    cycle: props.freqId,
+    limit: addCount + preLoadCount,
+  });
+  drawData.value = klineUtilsRef.value.formatDataByCount({
+    originDrawData: {},
+    addData: res,
+    mainIndicator: props.mainIndicator,
+    mainIndicatorList: props.mainIndicatorList,
+    config: config.value,
+  });
+  console.log(drawData.value);
+};
+
+// 价差五种图的判断渲染函数
+const handleChartMode = debounce(async () => {
+  // 因为在DOM变化的时候,这一块也需要重新执行,不然会出现额外图表元素定位不精准的问题
+  // resize没用,nextTick也没用
+  const { chartMode } = props;
+  // 避免之前的绘图模式残留影响,重绘[主图, 额外画线] - 缩放不重置
+  const { startValue, endValue } = mainChart.getOption().dataZoom[0];
+  const params = {
+    startValue,
+    endValue,
+  };
+  draw("main", params);
+  draw("line");
+  // 二腿相关度
+  if (chartMode === "二腿相关度") {
+    await getRelevanceData();
+    draw("relevance");
+  }
+  // 价差分布图
+  if (chartMode === "价差周期性") {
+    await getYearChartData();
+  }
+  // 价差分布图
+  if (chartMode === "价差分布图") {
+    draw("distribution");
+  }
+});
+
+// 绘制函数
+const draw = (type, params = {}) => {
+  const callBackMap = new Map([
+    // [主图]绘制
+    [
+      "main",
+      () => {
+        const { startValue, endValue } = params;
+        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: "30px",
+            },
+            tooltip: {
+              trigger: "axis",
+              appendToBody: true,
+              confine: true,
+              axisPointer: {
+                type: "cross",
+                label: {
+                  rich: {},
+                  formatter: (data) => {
+                    const { axisDimension, value } = data;
+                    if (axisDimension === "x") {
+                      return value;
+                    } else {
+                      return String(round(value));
+                    }
+                  },
+                },
+              },
+              formatter: () => "",
+            },
+            xAxis: {
+              show: true,
+              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),
+              },
+              {
+                show: false,
+                min: (value) => {
+                  const { min, max } = value;
+                  const interval = Math.abs((max - min) / 10);
+                  return min - interval;
+                },
+                max: (value) => {
+                  const { min, max } = value;
+                  const interval = Math.abs((max - min) / 10);
+                  return max + interval;
+                },
+              },
+            ],
+            series: [
+              {
+                type: "candlestick",
+                data: candlestickData,
+                itemStyle: {
+                  color: "transparent",
+                  color0: "#00FFFF",
+                  borderColor: "#FF0000",
+                  borderColor0: "#00FFFF",
+                  borderWidth: 1,
+                },
+              },
+              ...indicatorSeries,
+            ],
+            dataZoom: [
+              {
+                type: "inside",
+                startValue,
+                endValue,
+                maxValueSpan: config.value.maxShowCount,
+              },
+            ],
+          },
+          true
+        );
+      },
+    ],
+    // [预警线,持仓线,条件单线]绘制
+    [
+      "line",
+      () => {
+        // 1.获取主图当前配置项
+        const mainChartOption = mainChart.getOption();
+        // 2.生成新的graphic配置项
+        const graphic = [];
+        lineData.value.forEach((line) => {
+          const { name, data } = line;
+          // 预警线配置项处理
+          if (name === "warningLine") {
+            graphic.push(...getWarningLineGraphic(data, mainChart));
+          }
+          // 持仓线配置项处理
+          if (name === "positionLine") {
+            graphic.push(...getPositionLineGraphic(data, mainChart));
+          }
+          // 条件单线配置项处理
+          if (name === "conditionLine") {
+            graphic.push(...getConditionLineGraphic(data, mainChart));
+          }
+        });
+        // 3.渲染
+        mainChart.setOption(
+          {
+            ...mainChartOption,
+            graphic,
+          },
+          true
+        );
+      },
+    ],
+    // [二腿相关度]绘制
+    [
+      "relevance",
+      () => {
+        // 1.获取主图当前配置项
+        const mainChartOption = mainChart.getOption();
+        // 2.生成新的series配置项
+        const oldSeries = mainChartOption.series.filter((item) => {
+          return item.name !== "relevance";
+        });
+        const series = [...oldSeries, getRelevanceLineSeries(relevanceData.value)];
+        // 3.渲染
+        mainChart.setOption(
+          {
+            ...mainChartOption,
+            series,
+          },
+          true
+        );
+      },
+    ],
+    // [价差分布图]绘制
+    [
+      "distribution",
+      () => {
+        // 1.获取主图当前配置项
+        const mainChartOption = mainChart.getOption();
+        // 2.生成新的graphic配置项
+        let graphic = [];
+        const elements = getDistributionLineGraphic(drawData.value.originData, mainChart);
+        // (1).如果先前有graphic配置项
+        if (mainChartOption.graphic) {
+          const oldGraphic = mainChartOption.graphic[0].elements.filter((item) => {
+            return item.name !== "distribution";
+          });
+          graphic = [...oldGraphic, elements];
+        }
+        // (2).如果先前没有graphic配置项
+        if (!mainChartOption.graphic) {
+          graphic = [elements];
+        }
+        // 5.渲染
+        mainChart.setOption(
+          {
+            ...mainChartOption,
+            graphic,
+          },
+          true
+        );
+      },
+    ],
+  ]);
+  const callBack = callBackMap.get(type);
+  callBack instanceof Function && callBack();
+};
+
+// ------------------自定义右键菜单函数------------------
+// 关闭菜单
+const closeMenu = () => {
+  menuData.value = defaultMenuData;
+};
+// 点击菜单项
+const clickMenuItem = (item) => {
+  const { callBack } = item;
+  callBack instanceof Function && callBack(item);
+};
+// 菜单项-画线预警
+const drawLineWarning = () => {
+  // 1.拿到当前主图配置项
+  const mainChartOption = mainChart.getOption();
+  // 2.将指示器改为虚线样式,并开启画笔模式
+  openPenMode.value = true;
+  const oldTooltip = mainChartOption.tooltip[0];
+  mainChart.setOption({
+    ...mainChartOption,
+    // 指示器样式
+    tooltip: {
+      ...oldTooltip,
+      // 坐标轴指示器
+      axisPointer: {
+        // 保留原有部分配置
+        ...oldTooltip.axisPointer,
+        // X轴指示线的宽度
+        lineStyle: {
+          width: 0,
+        },
+        // Y轴指示线的宽度
+        crossStyle: {
+          width: 2,
+        },
+        // 文本标签
+        label: {
+          // 保留原有部分配置
+          ...oldTooltip.axisPointer.label,
+          // 颜色改为透明
+          backgroundColor: "transparent",
+          // 仅显示Y轴值
+          formatter: (data) => {
+            const { axisDimension, value } = data;
+            // if (axisDimension === "y") {
+            //   return String(formatValue(value));
+            // }
+            return "";
+          },
+        },
+      },
+    },
+  });
+  // 3.编写点击事件:获取到数据发送给后端
+  const handleClick = (el) => {
+    // (1).在触发点击事件后,第一时间将图表绑定的点击事件清除
+    mainChart.getZr().off("mousedown", handleClick);
+    // (2).根据点击位置获取到Y轴具体数据
+    const yAxisValue = mainChart.convertFromPixel({ yAxisIndex: 0 }, el.offsetY);
+    // (3).格式化画线预警价格
+    const newWarnPrice = Math.round(yAxisValue * 1000) / 1000;
+    // (4).将指示器恢复成原始样式
+    mainChart.setOption({
+      ...mainChartOption,
+      // 指示器样式
+      tooltip: {
+        ...oldTooltip,
+        axisPointer: {
+          ...oldTooltip.axisPointer,
+          lineStyle: {
+            width: 1,
+          },
+          crossStyle: {
+            width: 1,
+          },
+          label: {
+            ...oldTooltip.axisPointer.label,
+            backgroundColor: null,
+          },
+        },
+      },
+    });
+    // (5).关闭画笔模式
+    openPenMode.value = false;
+    // (6).发送保存预警线请求
+    console.log("模拟发送请求[新增预警线接口]-入参:", newWarnPrice);
+    // (7).模拟获取到的新的数据
+    lineData.value[0].data.push({
+      value: newWarnPrice,
+      text: newWarnPrice,
+      // 自定义信息
+      customInfo: {},
+    });
+    // (8).绘制预警线
+    draw("line");
+    ElMessage.success("画线预警成功!");
+  };
+  // 4.绑定echarts点击事件
+  mainChart.getZr().on("mousedown", handleClick);
+};
+
+// ------------------图表事件函数------------------
+// 图表事件: 右键
+const contextmenu = (params) => {
+  // 判断是否右击到主图中的graphic图形, 且自定义字段info中存在contextmenu回调函数
+  if (params.componentType === "graphic" && params.info?.contextmenu) {
+    // 由于事件冒泡导致线的右键会在菜单组件的关闭回调前执行,所以将其放入宏队列调整执行顺序
+    const timer = setTimeout(() => {
+      params.info.contextmenu instanceof Function && params.info.contextmenu(params);
+      clearTimeout(timer);
+    });
+  }
+};
+// 图表事件: 缩放拖拽
+const dataZoom = debounce(() => {
+  draw("line");
+  props.chartMode === "价差分布图" && draw("distribution");
+});
+// 绑定图表事件
+const bindMainChartEvent = () => {
+  mainChart.on("highlight", (data) => {});
+  mainChart.on("globalout", () => {});
+  mainChart.on("contextmenu", (params) => {
+    contextmenu(params);
+  });
+  mainChart.on("datazoom", (params) => {
+    dataZoom();
+  });
+};
+// 解绑图表事件
+const unbindMainChartEvent = () => {
+  mainChart.off("highlight");
+  mainChart.off("globalout");
+  mainChart.off("contextmenu");
+  mainChart.off("datazoom");
+};
+
+// ------------------获取API函数------------------
+// 获取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 getLineData = async () => {
+  // 将通过接口获取到的数据格式化
+  lineData.value = [
+    // 预警线数据
+    {
+      name: "warningLine",
+      data: [
+        {
+          value: 15000,
+          text: "15000",
+          // 自定义参数
+          customInfo: {
+            value: 15000,
+            // 右击的回调
+            contextmenu: (params) => {
+              const { value } = params;
+              menuData.value = [
+                {
+                  label: "删除画线",
+                  callBack: () => {
+                    console.log("当前删除的预警线,Y值为:", value);
+                  },
+                },
+                {
+                  label: "修改画线",
+                  callBack: () => {
+                    console.log("当前修改的预警线,Y值为:", value);
+                  },
+                },
+              ];
+            },
+          },
+        },
+      ],
+    },
+    // 持仓线数据
+    {
+      name: "positionLine",
+      data: [
+        {
+          value: 14500,
+          text: "持仓:192.14万(1份) 数量:4手 方向:多 浮动盈亏:-1280.00",
+          // 自定义参数
+          customInfo: {},
+        },
+      ],
+    },
+    // 条件单数据
+    {
+      name: "conditionLine",
+      data: [
+        {
+          value: 14000,
+          text: "[多损][多盈] 开多↓14000 1份(22手)",
+          profitValue: 14200,
+          profitText: "上破14200",
+          lossValue: 13900,
+          lossText: "下破13900",
+          // 自定义参数
+          customInfo: {},
+        },
+      ],
+    },
+  ];
+};
+// 获取二腿相关度数据
+const getRelevanceData = async () => {
+  // 将通过接口获取到的数据格式化
+  relevanceData.value = [
+    ["2024-03-08 23:00:00", -0.5],
+    ["2024-04-22 15:00:00", 1.5],
+  ];
+};
+// 获取价差周期性数据
+const getYearChartData = async () => {
+  yearChartData.value = [
+    {
+      year: "2023",
+      infos: [
+        {
+          genTime: "01-01",
+          close: 1000,
+        },
+        {
+          genTime: "05-01",
+          close: 2000,
+        },
+      ],
+    },
+    {
+      year: "2024",
+      infos: [
+        {
+          genTime: "01-01",
+          close: 600,
+        },
+        {
+          genTime: "07-01",
+          close: 1200,
+        },
+      ],
+    },
+  ];
+};
+</script>
+
+<style lang="scss" scoped>
+.kline {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #000;
+  // K线主图
+  &-mainChart {
+    flex: 1;
+    overflow: hidden;
+    .chart {
+      width: 100%;
+      height: 100%;
+    }
+    // 菜单
+    .menu {
+      border-radius: 4px;
+      overflow: hidden;
+      .menu-item {
+        font-size: 16px;
+        height: 40px;
+        border-top: 1px solid silver;
+        &:nth-child(1) {
+          border-top: none;
+        }
+      }
+    }
+  }
+  // 价差周期性
+  .year-chart {
+    flex: 0.4;
+  }
+}
+</style>
+<style lang="scss">
+// 画笔模式: 需要写在外面,不然会被Vue唯一标识符顶掉导致样式不生效
+.penMode canvas {
+  cursor: url(./images/pen.png) -30 30, auto !important;
+}
+</style>