Optimize file name

2024-01-05 13:51:38 +08:00
parent 3d8e55cbea
commit 6c8c6088d1
41 changed files with 177 additions and 162 deletions
--- a/src/pages/System/Statistics/shared.ts
+++ b/src/pages/System/Statistics/shared.ts
@@ -0,0 +1,128 @@
+import * as echarts from 'echarts/core'
+import {
+    DataZoomComponent,
+    DataZoomComponentOption,
+    GridComponent,
+    GridComponentOption,
+    LegendComponent,
+    LegendComponentOption,
+    ToolboxComponent,
+    ToolboxComponentOption,
+    TooltipComponent,
+    TooltipComponentOption
+} from 'echarts/components'
+import { BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
+import { SVGRenderer } from 'echarts/renderers'
+import { UniversalTransition } from 'echarts/features'
+import { CallbackDataParams } from 'echarts/types/dist/shared'
+import { utcToLocalTime } from '@/util/datetime'
+
+echarts.use([
+    TooltipComponent,
+    ToolboxComponent,
+    GridComponent,
+    LegendComponent,
+    DataZoomComponent,
+    BarChart,
+    LineChart,
+    SVGRenderer,
+    UniversalTransition
+])
+
+export type EChartsOption = echarts.ComposeOption<
+    | TooltipComponentOption
+    | ToolboxComponentOption
+    | GridComponentOption
+    | LegendComponentOption
+    | BarSeriesOption
+    | DataZoomComponentOption
+    | LineSeriesOption
+>
+
+export const barDefaultSeriesOption: BarSeriesOption = {
+    type: 'bar',
+    stack: 'total',
+    itemStyle: {
+        color: (params) => {
+            switch (params.seriesName) {
+                case 'idle':
+                case 'free':
+                    return '#F5F5F5'
+                default:
+                    return params.color ?? echarts.color.random()
+            }
+        }
+    }
+}
+
+export const barEChartsBaseOption: EChartsOption = {
+    tooltip: {},
+    xAxis: {
+        show: false
+    },
+    yAxis: {
+        axisLine: {
+            show: false
+        },
+        axisLabel: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        splitLine: {
+            show: false
+        },
+        axisPointer: {
+            show: false
+        }
+    }
+}
+
+export const getTooltipTimeFormatter = (format: string = 'yyyy-MM-DD HH:mm:ss') => {
+    return (params: CallbackDataParams[]) =>
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        `${utcToLocalTime(params[0].data[0], format)}<br>${params
+            .map(
+                (param) =>
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-expect-error
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    `<span style="display: flex; justify-content: space-between;"><span>${param.marker}${param.seriesName}</span><span style="font-weight: bold; margin-left: 16px;">${param.data[1]}</span></span>`
+            )
+            .join('')}`
+}
+
+export const lineEChartsBaseOption: EChartsOption = {
+    tooltip: {
+        trigger: 'axis'
+    },
+    legend: {},
+    toolbox: {
+        feature: {
+            dataZoom: {
+                yAxisIndex: 'none'
+            },
+            restore: {},
+            saveAsImage: {}
+        }
+    },
+    xAxis: {
+        type: 'time'
+    },
+    yAxis: {
+        type: 'value',
+        interval: 1
+    },
+    dataZoom: [
+        {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            minValueSpan: 2 * 60 * 60 * 1000
+        }
+    ],
+    series: [{}]
+}