feat(图表组件): 为饼图添加图例并优化排名列表样式

为多个模块的饼图组件添加图例配置，包括数据映射、位置和字体大小
在RankList组件中新增getItemClass方法实现隔行灰色背景效果
移除ModuleBrigadeOne中未使用的图表配置函数

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

@@ -225,26 +225,7 @@ const multiLineChartOption = (xAxisData, series) => ({
   }))
 })
 
-const lineChartOption = (data, color, title) => ({
-  grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
-  xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
-  yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
-  series: [{ name: title, type: 'line', smooth: true, symbol: 'circle', symbolSize: 6, data: data, itemStyle: { color: color }, lineStyle: { color: color } }]
-})
 
-const areaChartOption = (data, color) => ({
-  grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
-  xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
-  yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
-  series: [{ type: 'line', smooth: true, symbol: 'circle', symbolSize: 6, data: data, itemStyle: { color: color }, lineStyle: { color: color }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: color + '40' }, { offset: 1, color: color + '10' }]) } }]
-})
-
-const barChartOption = (data, color) => ({
-  grid: { left: '15%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
-  xAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
-  yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
-  series: [{ type: 'bar', data: data.map(d => d.value), itemStyle: { color: color }, barWidth: 20 }]
-})
 
 const horizontalBarChartOption = (data, color) => ({
   grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },

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

@@ -99,6 +99,11 @@ watch(() => props.filterParams, () => {
 const ringChartOption = (data, colors) => ({
   color: colors,
   tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['40%', '65%'],

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

@@ -322,6 +322,11 @@ watch(() => props.filterParams, () => {
 const pieChartOption = (data, colors) => ({
   color: colors,
   tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['40%', '65%'],
@@ -342,6 +347,11 @@ const pieChartOption = (data, colors) => ({
 const donutChartOption = (data, colors) => ({
   color: colors,
   tooltip: { trigger: 'item', formatter: '{b}: {c}' },
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['30%', '55%'],

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

@@ -102,6 +102,11 @@ watch(() => props.filterParams, () => {
 
 const ringPieOption = (data, colors, centerOffset = ['50%', '55%']) => ({
   color: colors,
+  legend: {
+    data: data.map(item => item.name),
+    top: '0%',
+    textStyle: { fontSize: 10 }
+  },
   series: [{
     type: 'pie',
     radius: ['45%', '70%'],

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

@@ -6,7 +6,7 @@
       <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="'rank-item-' + getRankClass(index)">
+      <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 class="rank-info">
           <span class="rank-name">{{ item.name }}</span>
@@ -61,6 +61,13 @@ const getRankClass = (index) => {
 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 isGray = (index - 3) % 2 === 0
+  return baseClass + (isGray ? ' rank-item-gray' : '')
+}
 </script>
 
 <style lang="less" scoped>
@@ -80,7 +87,7 @@ const getProgressWidth = (value, max) => {
   align-items: center;
   padding: 8px;
   border-bottom: 1px solid #e5e7eb;
-  margin-bottom: 8px;
+ 
   flex-shrink: 0; /* 防止头部被压缩 */
 }
 
@@ -109,7 +116,7 @@ const getProgressWidth = (value, max) => {
 .rank-list-body {
   flex: 1;
   overflow-y: auto; /* 启用垂直滚动 */
-  padding: 0 8px 8px 8px;
+
   
   /* 自定义滚动条样式 */
   &::-webkit-scrollbar {
@@ -136,7 +143,7 @@ const getProgressWidth = (value, max) => {
   align-items: center;
   padding: 10px;
   border-radius: 4px;
-  margin-bottom: 4px;
+  
   min-height: 40px; /* 最小高度确保项目可见 */
 }
 
@@ -160,6 +167,10 @@ const getProgressWidth = (value, max) => {
   background-color: #f9fafb;
 }
 
+.rank-item-gray {
+  background-color: #f3f4f6;
+}
+
 .rank-number {
   font-weight: bold;
   font-size: 15px;