修改API监控

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData.ts

@@ -266,3 +266,48 @@ export const totalPostApiData = [
   { date: '10/06', value: 99 },
   { date: '10/07', value: 140 },
 ];
+export const responseData = [
+  { date: '10/01', value: '3.5ms' },
+  { date: '10/02', value: '4.7ms' },
+  { date: '10/03', value: '4.9ms' },
+  { date: '10/04', value: '3.6ms' },
+  { date: '10/05', value: '4.8ms' },
+  { date: '10/06', value: '5.2ms' },
+  { date: '10/07', value: '4.3ms' },
+];
+export const second1Data = [
+  { date: '10/01', value: 120 },
+  { date: '10/02', value: 100 },
+  { date: '10/03', value: 110 },
+  { date: '10/04', value: 130 },
+  { date: '10/05', value: 70 },
+  { date: '10/06', value: 115 },
+  { date: '10/07', value: 140 },
+];
+export const second2Data = [
+  { date: '10/01', value: 122 },
+  { date: '10/02', value: 123 },
+  { date: '10/03', value: 123 },
+  { date: '10/04', value: 132 },
+  { date: '10/05', value: 50 },
+  { date: '10/06', value: 123 },
+  { date: '10/07', value: 210 },
+];
+export const second3Data = [
+  { date: '10/01', value: 123 },
+  { date: '10/02', value: 123 },
+  { date: '10/03', value: 132 },
+  { date: '10/04', value: 132 },
+  { date: '10/05', value: 123 },
+  { date: '10/06', value: 123 },
+  { date: '10/07', value: 123 },
+];
+export const second4Data = [
+  { date: '10/01', value: 231 },
+  { date: '10/02', value: 222 },
+  { date: '10/03', value: 223 },
+  { date: '10/04', value: 222 },
+  { date: '10/05', value: 222 },
+  { date: '10/06', value: 333 },
+  { date: '10/07', value: 223 },
+];

src/views/dataSharingAndExchange/ApiMonitor/RightContent5.vue

 <template>
   <div class="charts-container">
     <div class="header">
-      <span>API调用统计</span>
+      <span>响应时长统计</span>
     </div>
     <div class="charts">
       <div id="chart3" class="chart"></div>
@@ -12,7 +12,21 @@
 <script lang="ts" setup>
   import { onMounted } from 'vue';
   import * as echarts from 'echarts';
-  import { fieldChangeData, tableChangeData } from '@/views/metadata/metadataData';
+  import { fieldChangeData } from '@/views/metadata/metadataData';
+  import {
+    responseData,
+    second1Data,
+    second2Data,
+    second3Data,
+    second4Data,
+    totalApiData,
+    totalApiFailedData,
+    totalApiSucessData,
+  } from '@/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData';
+
+  function parseValue(value) {
+    return parseFloat(value); // This will convert '3.5ms' to 3.5
+  }
 
   onMounted(() => {
     {
@@ -27,53 +41,112 @@
       // 设置图表选项
       chart3Instance.setOption({
         title: {
-          text: '数据表变更趋势图',
+          text: '平均响应时长',
+        },
+        tooltip: {
+          formatter: function (params) {
+            return `${params.name}: ${params.value} ms`;
+          },
         },
-        tooltip: {},
         xAxis: {
-          data: tableChangeData.map((item) => item.date),
+          data: responseData.map((item) => item.date),
           boundaryGap: false, // 数据点与标签对齐
         },
         yAxis: {
           min: 0, // 设置 Y 轴的最小值
-          max: 250,
-          splitNumber: 5,
+          max: 6, // 设置 Y 轴的最大值为 6
+          splitNumber: 7,
+          axisLabel: {
+            formatter: '{value} ms', // 在 Y 轴标签上添加 "ms"
+          },
         },
         series: [
           {
             name: '数据表变更',
             type: 'line',
-            color: '#cacaec',
-            areaStyle: { color: '#dcd4ec' },
-            data: tableChangeData.map((item) => item.value),
+            color: '#48bdf3',
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#48bdf3', // 渐变起始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#ffffff', // 渐变结束颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: responseData.map((item) => parseValue(item.value)), // Convert to number
           },
         ],
       });
 
       chart4Instance.setOption({
         title: {
-          text: '字段变更趋势图',
+          text: '响应时长大于X秒的请求量',
+        },
+        tooltip: {
+          trigger: 'axis', // 使用坐标轴触发提示框，默认为 true
+        },
+        legend: {
+          // 显示图例
+          data: ['< 1秒', '1 ~ 30秒', '11 ~ 60秒', '> 60秒'],
+          orient: 'horizontal',
+          left: '5%',
+          top: '8%',
         },
-        tooltip: {},
         xAxis: {
-          // axisLabel: {
-          //   interval: 0, // 强制显示所有标签
-          // },
-          data: fieldChangeData.map((item) => item.date),
-          boundaryGap: false, // 数据点与标签对齐
+          type: 'category', // 类目轴
+          data: totalApiData.map((item) => item.date),
+          boundaryGap: true, // 柱状图默认是 true，即柱子有间距
+          axisLabel: {
+            rotate: 45, // 如果日期较长可以旋转标签以避免重叠
+          },
         },
         yAxis: {
+          type: 'value', // 数值轴
           min: 0, // 设置 Y 轴的最小值
-          // max: 1000,
-          splitNumber: 5,
+          max: 600,
+          splitNumber: 7, // 分割段数，可以根据需要调整
         },
+        barWidth: 20,
         series: [
           {
-            name: '字段变更',
-            type: 'line',
-            color: '#f9e1c1',
-            areaStyle: { color: '#fbf0e0' },
-            data: fieldChangeData.map((item) => item.value),
+            name: '> 60秒',
+            type: 'bar',
+            stack: 'total', // 设置相同的 stack 值以合并柱状图
+            color: '#36e385',
+            data: second1Data.map((item) => item.value),
+          },
+          {
+            name: '11 ~ 60秒',
+            type: 'bar',
+            stack: 'total', // 设置相同的 stack 值以合并柱状图
+            color: '#135adc',
+            data: second2Data.map((item) => item.value),
+          },
+          {
+            name: '1 ~ 30秒',
+            type: 'bar',
+            stack: 'total', // 设置相同的 stack 值以合并柱状图
+            color: '#7dc6ed',
+            data: second3Data.map((item) => item.value),
+          },
+          {
+            name: '< 1秒',
+            type: 'bar',
+            stack: 'total', // 设置相同的 stack 值以合并柱状图
+            color: '#da9bfd',
+            data: second4Data.map((item) => item.value),
           },
         ],
       });