Commit c6ef9c0d38ba00c61871658327f8d56dd3c83d89

Authored by fengtao
1 parent 3a96054f

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

... ... @@ -12,6 +12,14 @@
12 12 type: Array,
13 13 default: () => [],
14 14 },
  15 + timeLineXAxisData: {
  16 + type: Array,
  17 + default: () => [],
  18 + },
  19 + timeType: {
  20 + type: String,
  21 + default: 'week',
  22 + },
15 23 });
16 24
17 25 const emits = defineEmits(['emitTimeRange']);
... ... @@ -65,7 +73,12 @@
65 73 show: false,
66 74 },
67 75 axisLabel: {
68   - formatter: '{yyyy}-{MM}-{dd}',
  76 + formatter:
  77 + props.timeType === 'hour'
  78 + ? '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
  79 + : props.timeType === 'day'
  80 + ? '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'
  81 + : '{yyyy}-{MM}-{dd}',
69 82 showMinLabel: true,
70 83 showMaxLabel: true, // 固定显示X轴的最后一条数据
71 84 },
... ...
1 1 <script setup lang="ts">
  2 + import { ref } from 'vue';
2 3 import LineChart from './components/LineChart.vue';
3 4 import PieChart from './components/PieChart.vue';
4 5 import Table from './components/Table.vue';
... ... @@ -27,6 +28,7 @@
27 28 pieChartData: Recordable[];
28 29 timeLineChartData: Recordable[];
29 30 totalData: Recordable[];
  31 + timeLineXAxisData?: string[];
30 32 }
31 33
32 34 const chartData = reactive<ChartData>({
... ... @@ -34,6 +36,7 @@
34 36 pieChartData: [],
35 37 timeLineChartData: [],
36 38 totalData: [],
  39 + timeLineXAxisData: [],
37 40 });
38 41
39 42 // API统计
... ... @@ -155,10 +158,13 @@
155 158 ];
156 159 //代码保留
157 160
  161 + const timeType = ref('');
  162 +
158 163 // 接口调用历史
159 164 const getClassify = async (type?: string) => {
  165 + timeType.value = type as string;
160 166 const findValue = configTime.find((configItem) => configItem.name === type)?.value;
161   - timeFormat(type, findValue);
  167 + chartData.timeLineXAxisData = timeFormat(type, findValue);
162 168 const res = (await getApplicationRecordClassify(type)) as any as ClassifyItemType[];
163 169 chartData.timeLineChartData = res?.map((classifyItem: ClassifyItemType) => ({
164 170 type: 'line',
... ... @@ -201,6 +207,8 @@
201 207 <TimeLineChart
202 208 @emitTimeRange="handleReceiveTimeRange"
203 209 :seriesData="chartData.timeLineChartData"
  210 + :timeLineXAxisData="chartData.timeLineXAxisData"
  211 + :timeType="timeType"
204 212 />
205 213 </div>
206 214 <div>
... ...