修改波动率指标

src/views/indicator/msv/index.vue

@@ -22,6 +22,12 @@
             <lay-form-item label="回溯时间" prop="mills_back">
               <lay-input v-model="pageParams.mills_back" placeholder="回溯时间(毫秒)" />
             </lay-form-item>
+            <lay-form-item label="交易速率阈值" prop="trt">
+              <lay-input v-model="pageParams.trt" placeholder="交易速率阈值" />
+            </lay-form-item>
+            <lay-form-item label="交易速率回溯时间" prop="trt_minutes_back">
+              <lay-input v-model="pageParams.trt_minutes_back" placeholder="交易速率回溯时间(毫秒)" />
+            </lay-form-item>
             <div class="form-button-wp">
               <lay-button @click="getMsvData()">查询</lay-button>
             </div>
@@ -58,6 +64,8 @@ interface FormItem {
   exchange?: String;
   minute_time_range?: String;
   mills_back?: String;
+  trt?: String;
+  trt_minutes_back?: String;
 }
 
 let pageConfig: PageConfig = reactive({
@@ -68,7 +76,7 @@ let symbol: any = route.query.symbol?.toString() || "BTC_USDT";
 let exchange: any = route.query.exchange?.toString() || "gate_usdt_swap";
 let minute_time_range: any = route.query.minute_time_range?.toString() || "240";
 
-const pageParams: FormItem = reactive({ symbol, exchange, minute_time_range, mills_back: "50" });
+const pageParams: FormItem = reactive({ symbol, exchange, minute_time_range, mills_back: "50", trt: "200", trt_minutes_back: "10" });
 let router_query: any = reactive({});
 
 watch(
@@ -122,16 +130,38 @@ const initChart = (data: any) => {
 
   // const xData = data.x;
   const yData = data.msv;
+  const trYData = data.tr;
   const chartOption = {
     title: {
       text: `${pageParams.exchange} ${pageParams.symbol?.toUpperCase()} ${parseFloat(((Number(pageParams.minute_time_range) || 240) / 60).toFixed(2)).toString()}小时波动率指标`,
     },
-    grid: {
-      top: "80px",
-      left: "60px",
-      right: "40px",
-      bottom: "100px",
-    },
+    grid: [
+      {
+        top: "80px",
+        left: "60px",
+        right: "60px",
+        height: "50%", // 主图高度
+      },
+      {
+        left: "60px",
+        right: "60px",
+        bottom: "100px",
+        height: "5%", // 副图高度
+      },
+    ],
+    dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: [0, 1],
+        start: 0,
+        end: 100,
+      },
+      {
+        xAxisIndex: [0, 1],
+        start: 0,
+        end: 100,
+      },
+    ],
     tooltip: {
       trigger: "axis",
       axisPointer: {
@@ -141,41 +171,63 @@ const initChart = (data: any) => {
           width: 1,
         },
       },
-      formatter: (value: any) => {
-        let time = dayjs(value[0].name * 1).format("YYYY-MM-DD HH:mm:ss.SSS");
-        let volatilities = value[0].value[1];
-        let dissociation = unitConverts(value[0].value[2]);
+      formatter: (params: any) => {
+        if (params.length === 0) return "";
+        let result = "";
+        params.forEach((param: any) => {
+          let time = dayjs(param.name * 1).format("YYYY-MM-DD HH:mm:ss.SSS");
+          if (param.seriesIndex == 0) {
+            // 主图的 tooltip
+            let volatilities = param.value[1];
+            let dissociation = unitConverts(param.value[2]);
+            result = `时间：${time}<br/>波动率：${volatilities}%<br/>强度：${dissociation} USDT<br/>`;
+          } else if (param.seriesIndex == 1) {
+            // 副图的 tooltip
+            let srt = param.value[1] == 1 ? "强" : "弱";
+            result = `时间：${time}<br/>交易速率：${srt}<br/>`;
+          }
+        });
 
-        return `时间：${time}<br/>波动率：${volatilities}%<br/>强度：${dissociation} USDT`;
+        return result;
       },
     },
-    dataZoom: [
+    xAxis: [
       {
-        type: "inside",
-        start: 0,
-        end: 100,
+        type: "category",
+        boundaryGap: false,
+        show: true,
+        axisLabel: {
+          formatter: (value: any) => {
+            return dayjs(value * 1).format("MM-DD HH:mm:ss");
+          },
+        },
       },
       {
-        start: 0,
-        end: 100,
+        gridIndex: 1, // 第二个网格的 y 轴
+        type: "category",
+        show: true,
+        axisLabel: {
+          formatter: (value: any) => {
+            return dayjs(value * 1).format("MM-DD HH:mm:ss");
+          },
+        },
       },
     ],
-    xAxis: {
-      type: "category",
-      boundaryGap: false,
-      show: true,
-      axisLabel: {
-        formatter: (value: any) => {
-          return dayjs(value * 1).format("MM-DD HH:mm:ss");
-        },
+    yAxis: [
+      {
+        type: "value",
       },
-    },
-    yAxis: {
-      type: "value",
-    },
+      {
+        gridIndex: 1,
+        type: "value",
+        position: "left",
+        interval: 1,
+        max: 1,
+        min: -1,
+      },
+    ],
     series: [
       {
-        name: "价格",
         type: "line",
         sampling: "lttb",
         itemStyle: {
@@ -195,6 +247,17 @@ const initChart = (data: any) => {
         },
         data: yData,
       },
+      {
+        name: "价格",
+        type: "line",
+        sampling: "lttb",
+        xAxisIndex: 1, // 使用第二个 x 轴
+        yAxisIndex: 1, // 使用第二个 y 轴
+        itemStyle: {
+          color: "rgb(55, 162, 255)",
+        },
+        data: trYData,
+      },
     ],
   };
   msvChart.value.setOption(chartOption);