refactor(UsageAnalysis): 提取图表配置为可复用函数

将重复的图表配置逻辑提取为 createBaseChartOption 函数
简化多个图表选项的代码并提高可维护性

src/views/sdk/components/UsageAnalysis.vue

@@ -114,28 +114,41 @@ const tooltip = {
   },
 } as const
 
-const bandwidthInOutOption = computed(() => ({
-  tooltip,
-  legend: {
-    data: ['实时上传流量', '实时下载流量'],
-    textStyle: { color: chartColors.value.textSecondary },
-    top: 0,
-    left: 100,
-  },
-  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: timeAxisData,
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    axisLabel: { color: chartColors.value.textSecondary },
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
-    axisLabel: { color: chartColors.value.textSecondary, formatter: '{value}bps' },
-  },
+function createBaseChartOption(options: {
+  legendData: string[]
+  series: any[]
+  yAxisFormatter?: string
+  legendLeft?: number | string
+}) {
+  return {
+    tooltip,
+    legend: {
+      data: options.legendData,
+      textStyle: { color: chartColors.value.textSecondary },
+      top: 0,
+      left: options.legendLeft || 100,
+    },
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: timeAxisData,
+      axisLine: { lineStyle: { color: chartColors.value.borderColor } },
+      axisLabel: { color: chartColors.value.textSecondary },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: chartColors.value.borderColor } },
+      splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
+      axisLabel: { color: chartColors.value.textSecondary, formatter: options.yAxisFormatter || '{value}' },
+    },
+    series: options.series,
+  }
+}
+
+const bandwidthInOutOption = computed(() => createBaseChartOption({
+  legendData: ['实时上传流量', '实时下载流量'],
+  yAxisFormatter: '{value}bps',
   series: [
     {
       name: '实时上传流量',
@@ -168,28 +181,8 @@ const bandwidthInOutOption = computed(() => ({
   ],
 }))
 
-const connectionsOption = computed(() => ({
-  tooltip,
-  legend: {
-    data: ['连接数量'],
-    textStyle: { color: chartColors.value.textSecondary },
-    top: 0,
-    left: 100,
-  },
-  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: timeAxisData,
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    axisLabel: { color: chartColors.value.textSecondary },
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
-    axisLabel: { color: chartColors.value.textSecondary },
-  },
+const connectionsOption = computed(() => createBaseChartOption({
+  legendData: ['连接数量'],
   series: [
     {
       name: '连接数量',
@@ -208,28 +201,8 @@ const connectionsOption = computed(() => ({
   ],
 }))
 
-const newUsersOption = computed(() => ({
-  tooltip,
-  legend: {
-    data: ['Android', 'iOS', 'Windows', 'Linux', 'Unknown'],
-    textStyle: { color: chartColors.value.textSecondary },
-    top: 0,
-    left: 100,
-  },
-  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: timeAxisData,
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    axisLabel: { color: chartColors.value.textSecondary },
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
-    axisLabel: { color: chartColors.value.textSecondary },
-  },
+const newUsersOption = computed(() => createBaseChartOption({
+  legendData: ['Android', 'iOS', 'Windows', 'Linux', 'Unknown'],
   series: [
     {
       name: 'Android',
@@ -304,28 +277,8 @@ const newUsersOption = computed(() => ({
   ],
 }))
 
-const activeUsersOption = computed(() => ({
-  tooltip,
-  legend: {
-    data: ['活跃用户'],
-    textStyle: { color: chartColors.value.textSecondary },
-    top: 0,
-    left: 100,
-  },
-  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: timeAxisData,
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    axisLabel: { color: chartColors.value.textSecondary },
-  },
-  yAxis: {
-    type: 'value',
-    axisLine: { lineStyle: { color: chartColors.value.borderColor } },
-    splitLine: { show: true, lineStyle: { color: chartColors.value.borderColor, type: 'dashed' } },
-    axisLabel: { color: chartColors.value.textSecondary },
-  },
+const activeUsersOption = computed(() => createBaseChartOption({
+  legendData: ['活跃用户'],
   series: [
     {
       name: '活跃用户',