perf(views): 优化能耗和能效分析页面图表

1. 根据数据数量使用预设的 echarts 颜色列表

src/views/energy-analysis/EnergyConsumption.vue

@@ -13,7 +13,7 @@ import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
 import { t } from '@/i18n';
 import { downloadElectricityHisData, getElectricityDataStatistics } from '@/api';
-import { downloadBlob, formatTimeByScale, timeSorter } from '@/utils';
+import { downloadBlob, formatTimeByScale, getEChartsColors, timeSorter } from '@/utils';
 import { TimeScaleType } from '@/constants';
 import type { IconfontIcon } from '@/icons/fonts/iconfont';
 
@@ -176,7 +176,7 @@ const pieOption = computed<EChartsOption>(() => {
   const unitText = isElectricityConsume.value
     ? t('energyAnalysis.tenThousandKwh')
     : t('energyAnalysis.tenThousandYuan');
-  const legendData = energyConsumeResult.value?.groupQueryVos.map((item) => item.groupName as string);
+  const legendData = energyConsumeResult.value?.groupQueryVos.map((item) => item.groupName as string) || [];
   const seriesData = energyConsumeResult.value?.groupQueryVos.map((item) => ({
     name: item.groupName as string,
     value: isElectricityConsume.value ? item.totalEnergyW : item.totalBillW,
@@ -247,7 +247,7 @@ const pieOption = computed<EChartsOption>(() => {
         data: [{ value: 1, name: '' }],
       },
     ],
-    color: ['#4ECDC4', '#5470C6', '#36A2EB', '#FFC107'],
+    color: getEChartsColors(legendData.length),
   };
 });
 
@@ -395,7 +395,7 @@ const lineOption = computed<EChartsOption>(() => {
       top: '17.5%',
       containLabel: true,
     },
-    color: ['#4ECDC4', '#5470C6', '#36A2EB', '#FFC107'],
+    color: getEChartsColors(deviceTypes.length),
   };
 });
 
@@ -647,7 +647,7 @@ const devElectricityOption = computed<EChartsOption>(() => {
       top: 25,
       containLabel: true,
     },
-    color: ['#32BAC0', '#5B8FF9'],
+    color: getEChartsColors(2),
   };
 });
 </script>

src/views/energy-analysis/EnergyEfficiency.vue

@@ -12,7 +12,7 @@ import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
 import { t } from '@/i18n';
 import { downloadCoolingHisData, getCoolingDataStatistics, getCoolingHistoryData, getCoolingRealTimeData } from '@/api';
-import { downloadBlob, formatTimeByScale, timeSorter } from '@/utils';
+import { downloadBlob, formatTimeByScale, getEChartsColors, timeSorter } from '@/utils';
 import { CoolingDataType, TimeScaleType } from '@/constants';
 
 import chilledWaterFlowRate from '@/assets/img/chilled-water-flow-rate.png';
@@ -240,7 +240,7 @@ const coolingHisDataOption = computed<EChartsOption>(() => {
       top: 25,
       containLabel: true,
     },
-    color: ['#4ECDC4', '#5470C6', '#36A2EB', '#FFC107'],
+    color: getEChartsColors(legendData.length),
   };
 });
 
@@ -484,7 +484,16 @@ const energyEfficiencyLineOption = computed<EChartsOption>(() => {
   const timeScaleType = energyEfficiencyResult.value?.timeScaleType;
   const hisQueryVos = energyEfficiencyResult.value?.hisQueryVos || [];
   const coolingStationDataVos = energyEfficiencyResult.value?.coolingStationDataVos || [];
-  const legendData = [t('energyAnalysis.coolingStation'), ...hisQueryVos.map((item) => item.groupName as string)];
+  const hasCoolingStationData = coolingStationDataVos.length > 0;
+  const legendData: LegendComponentOption['data'] = hisQueryVos.map((item) => item.groupName as string);
+
+  if (hasCoolingStationData) {
+    legendData.unshift(t('energyAnalysis.coolingStation'));
+    legendData.push({
+      name: t('energyAnalysis.efficientRoomEnergyStandard'),
+      icon: 'path://M128 501.333v64H0v-64zm213.333 0v64h-128v-64zm213.334 0v64h-128v-64zm234.666 0v64h-128v-64z',
+    });
+  }
 
   const allTimesSet = new Set<string>();
 
@@ -552,13 +561,7 @@ const energyEfficiencyLineOption = computed<EChartsOption>(() => {
       itemWidth: 22,
       itemHeight: 8,
       itemGap: 24,
-      data: [
-        ...legendData,
-        {
-          name: t('energyAnalysis.efficientRoomEnergyStandard'),
-          icon: 'path://M128 501.333v64H0v-64zm213.333 0v64h-128v-64zm213.334 0v64h-128v-64zm234.666 0v64h-128v-64z',
-        },
-      ],
+      data: legendData,
     },
     xAxis: {
       type: 'category',
@@ -631,12 +634,12 @@ const energyEfficiencyLineOption = computed<EChartsOption>(() => {
       top: '17.5%',
       containLabel: true,
     },
-    color: ['#4ECDC4', '#5470C6', '#36A2EB', '#FFC107', '#FF6384'],
+    color: getEChartsColors(legendData.length),
   };
 });
 
 const pieOption = computed<EChartsOption>(() => {
-  const legendData = energyEfficiencyResult.value?.hisQueryVos.map((item) => item.groupName as string);
+  const legendData = energyEfficiencyResult.value?.hisQueryVos.map((item) => item.groupName as string) || [];
   const seriesData = energyEfficiencyResult.value?.hisQueryVos.map((item) => ({
     name: item.groupName as string,
     value: item.billTotal,
@@ -712,7 +715,7 @@ const pieOption = computed<EChartsOption>(() => {
         data: [{ value: 1, name: '' }],
       },
     ],
-    color: ['#4ECDC4', '#5470C6', '#36A2EB', '#FFC107'],
+    color: getEChartsColors(legendData.length),
   };
 });
 
@@ -909,7 +912,7 @@ const lineOption = computed<EChartsOption>(() => {
       top: '17.5%',
       containLabel: true,
     },
-    color: ['#4ECDC4', '#5470C6', '#36A2EB', '#FFC107'],
+    color: getEChartsColors(3),
   };
 });