UI优化

src/views/Home/Index10.vue

@@ -584,26 +584,11 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: dates.length > 0 ? dates : [],
-      axisLine: {
-        lineStyle: {
-          color: '#e5e7eb'
-        }
-      }
+      data: dates.length > 0 ? dates : []
     },
     yAxis: {
       type: 'value',
-      max: yAxisMax,
-      axisLine: {
-        lineStyle: {
-          color: '#e5e7eb'
-        }
-      },
-      splitLine: {
-        lineStyle: {
-          color: '#f3f4f6'
-        }
-      }
+      max: yAxisMax
     },
     series: [
       {
@@ -747,12 +732,9 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
   const trainingCount = trainingBarData.value.trainingCount || []
   const participants = trainingBarData.value.participants || []
   
-  // 计算Y轴最大值（向上取整到最近的10的倍数）
-  const maxValue = Math.max(
-    ...trainingCount,
-    ...participants,
-    10 // 最小值为10，避免图表显示过小
-  )
+  // 计算堆叠后的最大值（培训次数 + 参与人次）
+  const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0))
+  const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小
   const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10
   
   return {
@@ -822,6 +804,7 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
       {
         name: '培训次数',
         type: 'bar',
+        stack: 'total',
         data: trainingCount.length > 0 ? trainingCount : [],
         barWidth: 32,
         itemStyle: {
@@ -832,32 +815,26 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: '#8b5cf6' },
-              { offset: 1, color: '#7c3aed' }
+              { offset: 0, color: '#3b82f6' },
+              { offset: 1, color: '#2563eb' }
             ]
           },
-          borderRadius: [6, 6, 0, 0]
+          borderRadius: [0, 0, 0, 0]
         },
         label: {
-          show: true,
-          position: 'insideTop',
-          color: '#fff',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
+          show: false
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(139, 92, 246, 0.5)'
+            shadowColor: 'rgba(59, 130, 246, 0.5)'
           }
         }
       },
       {
         name: '参与人次',
         type: 'bar',
+        stack: 'total',
         data: participants.length > 0 ? participants : [],
         barWidth: 32,
         itemStyle: {
@@ -868,26 +845,19 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: '#c4b5fd' },
-              { offset: 1, color: '#a78bfa' }
+              { offset: 0, color: '#84cc16' },
+              { offset: 1, color: '#65a30d' }
             ]
           },
           borderRadius: [6, 6, 0, 0]
         },
         label: {
-          show: true,
-          position: 'top',
-          color: '#7c3aed',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
+          show: false
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(196, 181, 253, 0.5)'
+            shadowColor: 'rgba(132, 204, 22, 0.5)'
           }
         }
       }
@@ -1453,7 +1423,7 @@ onMounted(async () => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
   .header-left {
-    flex: 1;
+    // flex: 1;
     display: flex;
     align-items: center;