perf: 优化调用历史折线图x轴时间显示

@@ -12,6 +12,14 @@
       type: Array,
       type: Array,
       default: () => [],
       default: () => [],
     },
     },
+    timeLineXAxisData: {
+      type: Array,
+      default: () => [],
+    },
+    timeType: {
+      type: String,
+      default: 'week',
+    },
   });
   });
 
 
   const emits = defineEmits(['emitTimeRange']);
   const emits = defineEmits(['emitTimeRange']);
@@ -65,7 +73,12 @@
           show: false,
           show: false,
         },
         },
         axisLabel: {
         axisLabel: {
-          formatter: '{yyyy}-{MM}-{dd}',
+          formatter:
+            props.timeType === 'hour'
+              ? '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
+              : props.timeType === 'day'
+              ? '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
+              : '{yyyy}-{MM}-{dd}',
           showMinLabel: true,
           showMinLabel: true,
           showMaxLabel: true, // 固定显示X轴的最后一条数据
           showMaxLabel: true, // 固定显示X轴的最后一条数据
         },
         },

 <script setup lang="ts">
 <script setup lang="ts">
+  import { ref } from 'vue';
   import LineChart from './components/LineChart.vue';
   import LineChart from './components/LineChart.vue';
   import PieChart from './components/PieChart.vue';
   import PieChart from './components/PieChart.vue';
   import Table from './components/Table.vue';
   import Table from './components/Table.vue';
@@ -27,6 +28,7 @@
     pieChartData: Recordable[];
     pieChartData: Recordable[];
     timeLineChartData: Recordable[];
     timeLineChartData: Recordable[];
     totalData: Recordable[];
     totalData: Recordable[];
+    timeLineXAxisData?: string[];
   }
   }
 
 
   const chartData = reactive<ChartData>({
   const chartData = reactive<ChartData>({
@@ -34,6 +36,7 @@
     pieChartData: [],
     pieChartData: [],
     timeLineChartData: [],
     timeLineChartData: [],
     totalData: [],
     totalData: [],
+    timeLineXAxisData: [],
   });
   });
 
 
   // API统计
   // API统计
@@ -155,10 +158,13 @@
   ];
   ];
   //代码保留
   //代码保留
 
 
+  const timeType = ref('');
+
   // 接口调用历史
   // 接口调用历史
   const getClassify = async (type?: string) => {
   const getClassify = async (type?: string) => {
+    timeType.value = type as string;
     const findValue = configTime.find((configItem) => configItem.name === type)?.value;
     const findValue = configTime.find((configItem) => configItem.name === type)?.value;
-    timeFormat(type, findValue);
+    chartData.timeLineXAxisData = timeFormat(type, findValue);
     const res = (await getApplicationRecordClassify(type)) as any as ClassifyItemType[];
     const res = (await getApplicationRecordClassify(type)) as any as ClassifyItemType[];
     chartData.timeLineChartData = res?.map((classifyItem: ClassifyItemType) => ({
     chartData.timeLineChartData = res?.map((classifyItem: ClassifyItemType) => ({
       type: 'line',
       type: 'line',
@@ -201,6 +207,8 @@
       <TimeLineChart
       <TimeLineChart
         @emitTimeRange="handleReceiveTimeRange"
         @emitTimeRange="handleReceiveTimeRange"
         :seriesData="chartData.timeLineChartData"
         :seriesData="chartData.timeLineChartData"
+        :timeLineXAxisData="chartData.timeLineXAxisData"
+        :timeType="timeType"
       />
       />
     </div>
     </div>
     <div>
     <div>