st-comp 0.0.175 → 0.0.176

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.175",
+  "version": "0.0.176",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/KlineConfig/config.js

@@ -27,6 +27,7 @@ export const getDefaultUserKlineConfig = () => {
      */
     enable_tradeLogBrush: true, // 高亮交易范围
     enable_showScreenTimeRange: true, // 展示当屏时间范围
+    enable_showScreenMaxPrice: true, // 展示当屏最高价
     enable_dbClickOpenSingel: true, // 多周期双击图表切换至单周期
     
     /**

package/packages/KlineConfig/index.vue

@@ -183,6 +183,10 @@ defineExpose({
           <span class="label">展示当屏时间: </span>
           <el-switch v-model="form.enable_showScreenTimeRange" />
         </div>
+        <div class="setting-item">
+          <span class="label">展示当屏最高价: </span>
+          <el-switch v-model="form.enable_showScreenMaxPrice" />
+        </div>
         <div class="setting-item">
           <span class="label">多周期双击图表切换至单周期: </span>
           <el-switch v-model="form.enable_dbClickOpenSingel" />

package/packages/KlinePlus/index.vue

@@ -4,16 +4,7 @@ import dayjs from "dayjs";
 import * as echarts from "echarts";
 import { stMath, debounce, addResizeListener } from "st-func";
 import { ref, watch, computed, onMounted, onUnmounted, inject } from "vue";
-import {
-  loadKlineConfig,
-  checkTimeInterval,
-  getSubOptions,
-  mergeklineData,
-  handleMarkPointTradeLog,
-  handleNetPositionLine,
-  handleTradeIncomeRateLine,
-  normalizeToKlineTimeByMatch,
-} from "./utils.js";
+import { loadKlineConfig, checkTimeInterval, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleTradeIncomeRateLine, normalizeToKlineTimeByMatch } from "./utils.js";
 import Tips from "./components/Tips.vue";
 import SliderChart from "./components/SliderChart.vue";
 
@@ -145,6 +136,7 @@ const initChart = () => {
       // 当前结束索引 > 阈值边界, 触发加载更多数据
       if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
       getScreenTimeRange();
+      drawScreenMaxPrice();
     })
   );
   mainChartIns.on("globalout", () => {
@@ -317,7 +309,8 @@ const getScreenTimeRange = () => {
     screenTimeRange.value = [startTime, endTime];
   }
 };
-// 图表: 绘制
+
+// 图表: 绘制(主流程)
 const draw = (params = { startValue: 0, endValue: 0 }) => {
   initChart();
   const { maxValueSpan } = loadKlineConfig;
@@ -509,8 +502,10 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
         },
       ],
       series: [
+        // K线
         {
           type: "candlestick",
+          name: "kLine",
           data,
           markPoint: { data: [...tradePointData] },
           markLine: { data: [...tradeLineData] },
@@ -522,8 +517,6 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
             borderWidth: 1,
           },
         },
-        // 指标线
-        ...indicatorSeries,
         // 净值曲线
         {
           type: "line",
@@ -554,6 +547,8 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
             width: 2,
           },
         },
+        // 指标线
+        ...indicatorSeries,
       ],
       toolbox: {
         show: false,
@@ -582,6 +577,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
    */
   {
     getScreenTimeRange();
+    drawScreenMaxPrice();
     activeIndex.value = endValue;
   }
 
@@ -640,6 +636,71 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
     });
   }
 };
+// 图表: 绘制(当屏最高价)
+const drawScreenMaxPrice = () => {
+  const { data } = klineData.value;
+  const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+  let maxPrice = 0;
+  let maxPriceIndex = startValue;
+  for (let i = startValue; i <= endValue; i++) {
+    if (Number(data[i][3]) >= maxPrice) {
+      maxPrice = Number(data[i][3]);
+      maxPriceIndex = i;
+    }
+  }
+
+  const originOption = mainChartIns.getOption();
+  const filterSeries = originOption.series?.filter((item) => item.name !== "maxPrice") || [];
+  const dataLength = endValue - startValue;
+  const positionInView = (maxPriceIndex - startValue) / dataLength;
+  let position = "right";
+  let formatter = `←${maxPrice}`;
+  if (positionInView > 0.7) {
+    position = "left";
+    formatter = `${maxPrice}→`;
+  } else {
+    position = "right";
+    formatter = `←${maxPrice}`;
+  }
+  mainChartIns?.setOption(
+    {
+      ...originOption,
+      series: [
+        ...filterSeries,
+        {
+          type: "line",
+          name: "maxPrice",
+          markPoint: {
+            // 点位原本样式通过透明去进行隐藏, 从而仅展示文案
+            symbol: "circle",
+            symbolSize: 1,
+            itemStyle: {
+              color: "transparent",
+              borderColor: "transparent",
+            },
+            z: 100, // 设置较高的 z 值，确保在最上层
+            zlevel: 10, // 设置较高的 zlevel
+            label: {
+              show: true,
+              position,
+              formatter,
+              color: "#fff",
+              fontSize: 12,
+              padding: [4, -4],
+            },
+            data: [
+              {
+                name: "最高点",
+                coord: [maxPriceIndex, maxPrice],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    true
+  );
+};
 
 // 拖拽轴: 拖拽回调
 const handleSliderChange = (params) => {