feat(图表): 优化图表显示并添加数据标签

- 为所有图表系列添加数据标签显示，提高数据可读性
- 统一饼图标签格式为"{b}\n{c} ({d}%)"
- 优化排名组件支持并列排名计算
- 调整图表标签字体大小和位置
- 修复数据字段从count改为totalCount的引用
- 优化图表网格和布局配置

src/views/blockingData/blockingDataScreen/components/ModuleBrigadeOne.vue

@@ -221,7 +221,8 @@ const multiLineChartOption = (xAxisData, series) => ({
     symbolSize: 6,
     data: s.data,
     itemStyle: { color: s.color },
-    lineStyle: { color: s.color }
+    lineStyle: { color: s.color },
+    label: { show: true, position: 'top', fontSize: 9, color: s.color }
   }))
 })
 
@@ -231,7 +232,13 @@ const horizontalBarChartOption = (data, color) => ({
   grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
   xAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
   yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
-  series: [{ type: 'bar', data: data.map(d => d.value), itemStyle: { color: color }, barWidth: 15 }]
+  series: [{ 
+    type: 'bar', 
+    data: data.map(d => d.value), 
+    itemStyle: { color: color }, 
+    barWidth: 15,
+    label: { show: true, position: 'right', fontSize: 10, color: color }
+  }]
 })
 
 const barLineChartOption = (xAxisData, barData, lineData) => ({
@@ -249,7 +256,8 @@ const barLineChartOption = (xAxisData, barData, lineData) => ({
       type: 'bar',
       data: barData,
       itemStyle: { color: '#3b82f6' },
-      barWidth: 20
+      barWidth: 20,
+      label: { show: true, position: 'top', fontSize: 9, color: '#3b82f6' }
     },
     {
       name: '平均查堵件数',
@@ -259,7 +267,8 @@ const barLineChartOption = (xAxisData, barData, lineData) => ({
       symbolSize: 6,
       data: lineData,
       itemStyle: { color: '#ec4899' },
-      lineStyle: { color: '#ec4899' }
+      lineStyle: { color: '#ec4899' },
+      label: { show: true, position: 'top', fontSize: 9, color: '#ec4899' }
     }
   ]
 })
@@ -276,7 +285,7 @@ const pieChartOption = (data, colors) => ({
     radius: '65%',
     center: ['50%', '55%'],
     data: data,
-    label: { show: true, formatter: '{b}', fontSize: 10 }
+    label: { show: true, formatter: '{b}\n{c} ({d}%)', fontSize: 10 }
   }]
 })
 

src/views/blockingData/blockingDataScreen/components/ModuleBrigadeTwo.vue

@@ -173,7 +173,7 @@ const fetchData = async () => {
       supervisorRes.value.data.slice(0, 10).forEach(item => {
         rankData1.push({
           name: item.supervisorName || item.name || '',
-          value: item.count || item.value || 0
+          value: item.totalCount || item.value || 0
         })
       })
     }
@@ -183,7 +183,7 @@ const fetchData = async () => {
       teamRes.value.data.slice(0, 10).forEach(item => {
         rankData2.push({
           name: item.teamLeaderName || item.name || '',
-          value: item.count || item.value || 0
+          value: item.totalCount || item.value || 0
         })
       })
     }
@@ -193,7 +193,7 @@ const fetchData = async () => {
       userRes.value.data.slice(0, 10).forEach(item => {
         rankData3.push({
           name: item.userName || item.name || '',
-          value: item.count || item.value || 0
+          value: item.totalCount || item.value || 0
         })
       })
     }
@@ -401,7 +401,8 @@ const multiSeriesBarChartOption = (xAxisData, series) => ({
     type: 'bar',
     data: s.data,
     itemStyle: { color: s.color },
-    barWidth: 15
+    barWidth: 15,
+    label: { show: true, position: 'top', fontSize: 9, color: s.color }
   }))
 })
 

src/views/blockingData/blockingDataScreen/components/ModuleOne.vue

@@ -23,7 +23,7 @@
             <div class="stat-left">
               <div class="stat-label">总查堵万分率</div>
               <div class="stat-content">
-                <div class="stat-value">{{ totalBlockedRate }}</div>
+                <div class="stat-value">{{ totalBlockedRate.toFixed(2) }}</div>
                 <div class="stat-unit">‱</div>
               </div>
             </div>
@@ -453,14 +453,15 @@ const loadData = async () => {
               borderColor: '#fff',
               borderWidth: 2
             },
-            // label: {
-            //   show: true,
-            //   position: 'center'
-            // },
+            label: {
+              show: true,
+              formatter: '{b}\n{c} ({d}%)',
+              fontSize: 10
+            },
             emphasis: {
               label: {
                 show: true,
-                fontSize: '18',
+                fontSize: '14',
                 fontWeight: 'bold'
               }
             },
@@ -496,7 +497,8 @@ const loadData = async () => {
           const item = luggageDataList.find(d => d.brigadeName === brigade)
           return item ? item.t1PassengerLuggageCount : 0
         }),
-        itemStyle: { color: '#3b82f6' }
+        itemStyle: { color: '#3b82f6' },
+        label: { show: true, position: 'top', fontSize: 10, color: '#3b82f6' }
       },
       {
         name: 'T2旅检行李数',
@@ -505,7 +507,8 @@ const loadData = async () => {
           const item = luggageDataList.find(d => d.brigadeName === brigade)
           return item ? item.t2PassengerLuggageCount : 0
         }),
-        itemStyle: { color: '#22c55e' }
+        itemStyle: { color: '#22c55e' },
+        label: { show: true, position: 'top', fontSize: 10, color: '#22c55e' }
       },
       {
         name: 'T1行检行李数',
@@ -514,7 +517,8 @@ const loadData = async () => {
           const item = luggageDataList.find(d => d.brigadeName === brigade)
           return item ? item.t1CargoLuggageCount : 0
         }),
-        itemStyle: { color: '#f97316' }
+        itemStyle: { color: '#f97316' },
+        label: { show: true, position: 'top', fontSize: 10, color: '#f97316' }
       },
       {
         name: 'T2行检行李数',
@@ -523,7 +527,8 @@ const loadData = async () => {
           const item = luggageDataList.find(d => d.brigadeName === brigade)
           return item ? item.t2CargoLuggageCount : 0
         }),
-        itemStyle: { color: '#ec4899' }
+        itemStyle: { color: '#ec4899' },
+        label: { show: true, position: 'top', fontSize: 10, color: '#ec4899' }
       }
     ]
     
@@ -540,7 +545,8 @@ const loadData = async () => {
         itemStyle: { color: '#3b82f6' },
         lineStyle: { width: 3 },
         symbol: 'circle',
-        symbolSize: 8
+        symbolSize: 8,
+        label: { show: true, position: 'top', fontSize: 10, color: '#3b82f6' }
       },
       {
         name: 'T2旅检查堵数',
@@ -553,7 +559,8 @@ const loadData = async () => {
         itemStyle: { color: '#22c55e' },
         lineStyle: { width: 3 },
         symbol: 'circle',
-        symbolSize: 8
+        symbolSize: 8,
+        label: { show: true, position: 'top', fontSize: 10, color: '#22c55e' }
       },
       {
         name: 'T1行检查堵数',
@@ -566,7 +573,8 @@ const loadData = async () => {
         itemStyle: { color: '#f97316' },
         lineStyle: { width: 3 },
         symbol: 'circle',
-        symbolSize: 8
+        symbolSize: 8,
+        label: { show: true, position: 'top', fontSize: 10, color: '#f97316' }
       },
       {
         name: 'T2行检查堵数',
@@ -579,7 +587,8 @@ const loadData = async () => {
         itemStyle: { color: '#ec4899' },
         lineStyle: { width: 3 },
         symbol: 'circle',
-        symbolSize: 8
+        symbolSize: 8,
+        label: { show: true, position: 'top', fontSize: 10, color: '#ec4899' }
       }
     ]
     
@@ -602,23 +611,25 @@ const loadData = async () => {
         }
       },
       legend: {
+       
         data: [
           'T1旅检行李数', 'T2旅检行李数', 'T1行检行李数', 'T2行检行李数',
           'T1旅检查堵数', 'T2旅检查堵数', 'T1行检查堵数', 'T2行检查堵数'
         ]
       },
       grid: {
+       top: '80',
         left: '3%',
         right: '4%',
-        bottom: '3%',
+         bottom: '1%',
         containLabel: true
       },
       xAxis: {
         type: 'category',
         data: brigadeNames,
-        axisLabel: {
-          rotate: 45
-        }
+        // axisLabel: {
+        //   rotate: 45
+        // }
       },
       yAxis: [
         {
@@ -674,13 +685,13 @@ const loadData = async () => {
         const found = groupedData[type].find(d => d.missCheckItem === item)
         return found ? found.count : 0
       })
+      const color = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6'][index % 6]
       return {
         name: type,
         type: 'bar',
         data: data,
-        itemStyle: {
-          color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6'][index % 6]
-        }
+        itemStyle: { color: color },
+        label: { show: true, position: 'top', fontSize: 10, color: color }
       }
     })
     
@@ -785,23 +796,19 @@ const loadData = async () => {
           type: 'bar',
           yAxisIndex: 0,
           data: timePeriodData.map(d => d.totalLuggageCount),
-          itemStyle: {
-            color: '#3b82f6'
-          }
+          itemStyle: { color: '#3b82f6' },
+          label: { show: true, position: 'top', fontSize: 10, color: '#3b82f6' }
         },
         {
           name: '查堵万分率',
           type: 'line',
           yAxisIndex: 1,
           data: timePeriodData.map(d => d.blockRate),
-          itemStyle: {
-            color: '#ec4899'
-          },
-          lineStyle: {
-            width: 3
-          },
+          itemStyle: { color: '#ec4899' },
+          lineStyle: { width: 3 },
           symbol: 'circle',
-          symbolSize: 8
+          symbolSize: 8,
+          label: { show: true, position: 'top', fontSize: 10, color: '#ec4899' }
         }
       ]
     })
@@ -878,23 +885,19 @@ const loadData = async () => {
           type: 'bar',
           yAxisIndex: 0,
           data: dailyLuggageData.map(d => d.totalLuggageCount),
-          itemStyle: {
-            color: '#3b82f6'
-          }
+          itemStyle: { color: '#3b82f6' },
+          label: { show: true, position: 'top', fontSize: 10, color: '#3b82f6' }
         },
         {
           name: '查堵万分率',
           type: 'line',
           yAxisIndex: 1,
           data: dailyLuggageData.map(d => d.blockRate),
-          itemStyle: {
-            color: '#ec4899'
-          },
-          lineStyle: {
-            width: 3
-          },
+          itemStyle: { color: '#ec4899' },
+          lineStyle: { width: 3 },
           symbol: 'circle',
-          symbolSize: 8
+          symbolSize: 8,
+          label: { show: true, position: 'top', fontSize: 10, color: '#ec4899' }
         }
       ]
     })
@@ -935,14 +938,11 @@ const loadData = async () => {
           name: 'AI复查图像数',
           type: 'line',
           data: aiImageData.map(d => d.totalBlockedCount),
-          itemStyle: {
-            color: '#14b8a6'
-          },
-          lineStyle: {
-            width: 3
-          },
+          itemStyle: { color: '#14b8a6' },
+          lineStyle: { width: 3 },
           symbol: 'circle',
           symbolSize: 8,
+          label: { show: true, position: 'top', fontSize: 10, color: '#14b8a6' },
           areaStyle: {
             color: {
               type: 'linear',
@@ -1002,14 +1002,11 @@ const loadData = async () => {
           name: 'AI漏判图像数',
           type: 'line',
           data: aiMissData.map(d => d.totalBlockedCount),
-          itemStyle: {
-            color: '#ef4444'
-          },
-          lineStyle: {
-            width: 3
-          },
+          itemStyle: { color: '#ef4444' },
+          lineStyle: { width: 3 },
           symbol: 'circle',
           symbolSize: 8,
+          label: { show: true, position: 'top', fontSize: 10, color: '#ef4444' },
           areaStyle: {
             color: {
               type: 'linear',
@@ -1059,15 +1056,13 @@ const loadData = async () => {
         {
           name: 'AI误判图像数',
           type: 'line',
+
           data: aiErrorData.map(d => d.totalBlockedCount),
-          itemStyle: {
-            color: '#f97316'
-          },
-          lineStyle: {
-            width: 3
-          },
+          itemStyle: { color: '#f97316' },
+          lineStyle: { width: 3 },
           symbol: 'circle',
           symbolSize: 8,
+          label: { show: true, position: 'top', fontSize: 10, color: '#f97316' },
           areaStyle: {
             color: {
               type: 'linear',
@@ -1094,6 +1089,10 @@ const loadData = async () => {
 
 // 折线图配置（总表）
 const lineChartOption = (data, color, title, xAxisData = []) => ({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'line' }
+  },
   grid: {
     left: '10%',
     top: '15%',
@@ -1121,12 +1120,22 @@ const lineChartOption = (data, color, title, xAxisData = []) => ({
     symbolSize: 6,
     data: data,
     itemStyle: { color: color },
-    lineStyle: { color: color }
+    lineStyle: { color: color },
+    label: {
+      show: true,
+      position: 'top',
+      fontSize: 10,
+      color: color
+    }
   }]
 })
 
 // 多折线图配置（大队对比）
 const multiLineChartOption = (dataList, colors, legends, xAxisData = []) => ({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'line' }
+  },
   grid: {
     left: '10%',
     top: '15%',
@@ -1159,7 +1168,13 @@ const multiLineChartOption = (dataList, colors, legends, xAxisData = []) => ({
     symbolSize: 6,
     data: data,
     itemStyle: { color: colors[index] },
-    lineStyle: { color: colors[index] }
+    lineStyle: { color: colors[index] },
+    label: {
+      show: true,
+      position: 'top',
+      fontSize: 10,
+      color: colors[index]
+    }
   }))
 })
 

src/views/blockingData/blockingDataScreen/components/ModuleThree.vue

@@ -67,7 +67,7 @@ const loadData = async () => {
 
     // 查堵-人员自测漏检次数（总累积）
     const selfTestData = selfTestRes?.value?.data || []
-    
+
     if (selfTestData.length > 0) {
       setOption1(ringPieOption(
         selfTestData.map(item => ({
@@ -114,8 +114,8 @@ const ringPieOption = (data, colors, centerOffset = ['50%', '55%']) => ({
     data: data,
     label: {
       show: true,
-      formatter: '{b}\n{c}%',
-      fontSize: 11
+      formatter: '{b}\n{c} ({d}%)',
+      fontSize: 10
     },
     labelLine: {
       show: true,
@@ -135,7 +135,7 @@ onMounted(() => {
   height: 100%;
   display: flex;
   gap: 10px;
-  
+
 }
 
 .chart-card {
@@ -152,7 +152,7 @@ onMounted(() => {
 }
 
 .chart-title {
- font-size: 17px;
+  font-size: 17px;
   color: black;
   margin-bottom: 5px;
   text-align: left;

src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

@@ -225,7 +225,8 @@ const loadData = async () => {
         itemStyle: {
           color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6'][tenureLevels.indexOf(level) % 5]
         },
-        barWidth: 15
+        barWidth: 15,
+        label: { show: true, position: 'top', fontSize: 9 }
       }))
 
       setOption6({
@@ -263,7 +264,8 @@ const loadData = async () => {
           itemStyle: {
             color: ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6'][index % 6]
           },
-          barWidth: 20
+          barWidth: 20,
+          label: { show: true, position: 'top', fontSize: 9 }
         }
       })
 
@@ -321,7 +323,7 @@ const pieOption = (data, colors, isRing = false) => ({
     data: data,
     label: {
       show: true,
-      formatter: '{b}\n{c}%',
+      formatter: '{b}\n{c} ({d}%)',
       fontSize: 10
     }
   }]
@@ -337,24 +339,12 @@ const barOption = (data, colors) => ({
     itemStyle: {
       color: (params) => colors[params.dataIndex % colors.length]
     },
-    barWidth: 15
+    barWidth: 15,
+    label: { show: true, position: 'right', fontSize: 10 }
   }]
 })
 
-const stackBarOption = (data, colors) => ({
-  grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
-  xAxis: { type: 'category', data: ['安检二大队', '安检三大队', '安检一大队'], axisLabel: { fontSize: 9 } },
-  yAxis: { type: 'value', axisLabel: { fontSize: 9 } },
-  legend: { top: 0, right: 10, textStyle: { fontSize: 9 } },
-  series: data.map((d, i) => ({
-    name: d.name,
-    type: 'bar',
-    stack: 'total',
-    data: d.data,
-    itemStyle: { color: colors[i] },
-    barWidth: 25
-  }))
-})
+
 
 onMounted(() => {
   loadData()

src/views/blockingData/blockingDataScreen/components/RankList.vue

@@ -6,12 +6,12 @@
       <span class="header-count">{{ headerCount }}</span>
     </div>
     <div class="rank-list-body">
-      <div v-for="(item, index) in rankData" :key="index" class="rank-item" :class="getItemClass(index)">
-        <span class="rank-number" :class="'rank-number-' + getRankClass(index)">NO.{{ index + 1 }}</span>
+      <div v-for="(item, index) in rankedData" :key="index" class="rank-item" :class="getItemClass(item.rank, index)">
+        <span class="rank-number" :class="'rank-number-' + getRankClass(item.rank)">NO.{{ item.rank }}</span>
         <div class="rank-info">
           <span class="rank-name">{{ item.name }}</span>
           <div class="rank-bar">
-            <div class="rank-bar-fill" :class="'rank-bar-fill-' + getRankClass(index)" :style="{ width: getProgressWidth(item.value, maxValue) + '%' }"></div>
+            <div class="rank-bar-fill" :class="'rank-bar-fill-' + getRankClass(item.rank)" :style="{ width: getProgressWidth(item.value, maxValue) + '%' }"></div>
           </div>
         </div>
         <span class="rank-count">{{ item.value }}</span>
@@ -51,10 +51,33 @@ const maxValue = computed(() => {
   return Math.max(...props.rankData.map(item => item.value))
 })
 
-const getRankClass = (index) => {
-  if (index === 0) return 'first'
-  if (index === 1) return 'second'
-  if (index === 2) return 'third'
+// 计算并列排名（中国式排名：并列后下一个排名+1）
+const rankedData = computed(() => {
+  if (props.rankData.length === 0) return []
+  
+  // 按value降序排序
+  const sorted = [...props.rankData].sort((a, b) => b.value - a.value)
+  
+  let currentRank = 1
+  let previousValue = null
+  
+  return sorted.map((item) => {
+    // 如果当前value小于前一个value，排名+1
+    if (previousValue !== null && item.value < previousValue) {
+      currentRank++
+    }
+    previousValue = item.value
+    return {
+      ...item,
+      rank: currentRank
+    }
+  })
+})
+
+const getRankClass = (rank) => {
+  if (rank === 1) return 'first'
+  if (rank === 2) return 'second'
+  if (rank === 3) return 'third'
   return 'default'
 }
 
@@ -62,9 +85,9 @@ const getProgressWidth = (value, max) => {
   return (value / max) * 100
 }
 
-const getItemClass = (index) => {
-  const baseClass = 'rank-item rank-item-' + getRankClass(index)
-  if (index < 3) return baseClass
+const getItemClass = (rank, index) => {
+  const baseClass = 'rank-item rank-item-' + getRankClass(rank)
+  if (rank <= 3) return baseClass
   const isGray = (index - 3) % 2 === 0
   return baseClass + (isGray ? ' rank-item-gray' : '')
 }