refactor(chart): 统一优化图表样式与布局

调整多处图表的图例配置、内边距和容器高度，优化展示效果；修正部门档案页面的得分标题文案，注释无用的原生图例布局代码

src/pages/components/AreaDistribution.vue

@@ -50,11 +50,16 @@ export default {
           trigger: 'axis',
           axisPointer: { type: 'shadow' }
         },
+        legend: {
+          data: ['查获数量'],
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         grid: {
           left: '15%',
           right: '5%',
           bottom: '15%',
-          top: '10%'
+          top: '22%'
         },
         xAxis: {
           type: 'category',

src/pages/components/DailySeizureChart.vue

@@ -81,11 +81,16 @@ export default {
           trigger: 'axis',
           axisPointer: { type: 'shadow' }
         },
+        legend: {
+          data: ['查获总数'],
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         grid: {
           left: '10%',
           right: '5%',
           bottom: '18%',
-          top: '10%'
+          top: '22%'
         },
         xAxis: {
           type: 'category',
@@ -166,6 +171,7 @@ export default {
           axisPointer: { type: 'shadow' }
         },
         legend: {
+          type:'scroll',
           data: (this.chartsData.dept.deptData || []).map(d => d.name),
           textStyle: {
             color: '#333',

src/pages/components/InterceptionDistribution.vue

@@ -45,11 +45,16 @@ export default {
             const option = {
                 responsive: true,
                 maintainAspectRatio: false,
+                legend: {
+                    data: ['拦截数量'],
+                    textStyle: { color: '#666', fontSize: 10 },
+                    top: 0
+                },
                 grid: {
                     left: '25%',
                     right: '10%',
                     bottom: '10%',
-                    top: '10%'
+                    top: '22%'
                 },
                 xAxis: {
                     type: 'value',

src/pages/components/ItemDistribution.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="item-distribution">
     <div class="chart-container" ref="itemChart"></div>
-    <div class="legend-grid">
+    <!-- <div class="legend-grid">
       <div v-for="(item, index) in chartsData.items" :key="index" class="legend-item">
         <div class="legend-dot" :style="{ backgroundColor: item.color }"></div>
         <div class="legend-text">{{ item.name }}: {{ item.value }}</div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -57,9 +57,15 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          type: 'scroll',
+          data: this.chartsData.items.map(item => item.name),
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
-          radius: ['50%', '70%'],
+          radius: ['30%', '47%'],
           data: this.chartsData.items.map(item => ({
             name: item.name,
             value: item.value,
@@ -90,7 +96,7 @@ export default {
 <style lang="scss" scoped>
 .item-distribution {
   .chart-container {
-    height: 300rpx;
+    height: 450rpx;
   }
 
   .legend-grid {

src/pages/components/MemberBasicDistribution.vue

@@ -75,9 +75,14 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          data: this.chartsData.gender.labels,
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
-          radius: ['40%', '60%'],
+          radius: ['25%', '40%'],
           data: this.chartsData.gender.data.map((value, index) => ({
             name: this.chartsData.gender.labels[index],
             value: value
@@ -108,19 +113,25 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          type: 'scroll',
+          data: this.chartsData.ethnicity.labels,
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
-          radius: ['40%', '60%'],
+          radius: ['25%', '40%'],
           data: this.chartsData.ethnicity.data.map((value, index) => ({
             name: this.chartsData.ethnicity.labels[index],
             value: value
           })),
-          itemStyle: {
-            color: function(params) {
-              const colors = ['#A78BFA', '#34D399']
-              return colors[params.dataIndex]
-            }
-          },
+          // itemStyle: {
+          //   color: function(params) {
+          //     const colors = ['#A78BFA', '#34D399']
+          //     return colors[params.dataIndex]
+          //   }
+          // },
           label: {
             show: true,
             color: '#333',
@@ -141,9 +152,14 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          data: this.chartsData.political.labels,
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
-          radius: ['40%', '60%'],
+          radius: ['25%', '40%'],
           data: this.chartsData.political.data.map((value, index) => ({
             name: this.chartsData.political.labels[index],
             value: value
@@ -195,7 +211,7 @@ export default {
 
     .chart-container {
       flex: 1;
-      height:250rpx;
+      height:450rpx;
     }
   }
 }

src/pages/components/MemberPositionDistribution.vue

@@ -73,11 +73,16 @@ export default {
           trigger: 'axis',
           axisPointer: { type: 'shadow' }
         },
+        legend: {
+          data: ['人数'],
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         grid: {
           left: '10%',
           right: '5%',
           bottom: '14%',
-          top: '10%'
+          top: '22%'
         },
         xAxis: {
           type: 'category',
@@ -144,11 +149,16 @@ export default {
           trigger: 'axis',
           axisPointer: { type: 'shadow' }
         },
+        legend: {
+          data: ['人数'],
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         grid: {
           left: '10%',
           right: '5%',
           bottom: '14%',
-          top: '10%'
+          top: '22%'
         },
         xAxis: {
           type: 'category',
@@ -215,11 +225,16 @@ export default {
           trigger: 'axis',
           axisPointer: { type: 'shadow' }
         },
+        legend: {
+          data: ['人数'],
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         grid: {
           left: '10%',
           right: '5%',
           bottom: '20%',
-          top: '10%'
+          top: '22%'
         },
         xAxis: {
           type: 'category',

src/pages/components/SecurityTestCharts.vue

@@ -83,9 +83,15 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          type: 'scroll',
+          data: this.chartsData.items.labels,
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
-          radius: ['50%', '70%'],
+          radius: ['30%', '40%'],
           data: this.chartsData.items.labels.map((label, index) => ({
             name: label,
             value: this.chartsData.items.data[index]
@@ -112,13 +118,19 @@ export default {
       const option = {
         responsive: true,
         maintainAspectRatio: false,
+        legend: {
+          type: 'scroll',
+          data: this.chartsData.results.labels,
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         tooltip: {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
         series: [{
           type: 'pie',
-          radius: ['50%', '70%'],
+          radius: ['30%', '40%'],
           data: this.chartsData.results.labels.map((label, index) => ({
             name: label,
             value: this.chartsData.results.data[index]
@@ -149,9 +161,15 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          type: 'scroll',
+          data: this.chartsData.areas.labels,
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
-          radius: ['50%', '70%'],
+          radius: ['30%', '40%'],
           data: this.chartsData.areas.labels.map((label, index) => ({
             name: label,
             value: this.chartsData.areas.data[index]

src/pages/components/SeizedNumAll.vue

@@ -47,7 +47,12 @@ export default {
                     left: '15%',
                     right: '5%',
                     bottom: '15%',
-                    top: '10%'
+                    top: '22%'
+                },
+                legend: {
+                    data: ['查获数'],
+                    textStyle: { color: '#666', fontSize: 10 },
+                    top: 0
                 },
                 xAxis: {
                     type: 'category',

src/pages/components/SeizureInfo.vue

@@ -130,11 +130,16 @@ export default {
           trigger: 'axis',
           axisPointer: { type: 'shadow' }
         },
+        legend: {
+          data: ['查获数量'],
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         grid: {
           left: '15%',
           right: '5%',
           bottom: '15%',
-          top: '10%'
+          top: '22%'
         },
         xAxis: {
           type: 'category',

src/pages/components/SupervisionDistribution.vue

@@ -47,7 +47,7 @@ export default {
                     left: '15%',
                     right: '5%',
                     bottom: '20%',
-                    top: '10%'
+                    top: '22%'
                 },
                 xAxis: {
                     type: 'category',
@@ -101,6 +101,11 @@ export default {
                         barWidth: '40%'
                     }
                 ],
+                legend: {
+                    data: ['查获数量'],
+                    textStyle: { color: '#666', fontSize: 10 },
+                    top: 0
+                },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer: { type: 'shadow' }

src/pages/components/UnsafeItemsChart.vue

@@ -61,6 +61,11 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          data: this.chartsData.items.map(item => item.name),
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
           radius: ['50%', '70%'],
@@ -94,7 +99,7 @@ export default {
 <style lang="scss" scoped>
 .unsafe-items-chart {
   .chart-container {
-    height: 220rpx;
+    height: 400rpx;
   }
 
   .items-list {

src/pages/components/UnsafePositionChart.vue

@@ -56,11 +56,16 @@ export default {
           trigger: 'axis',
           axisPointer: { type: 'shadow' }
         },
+        legend: {
+          data: ['人数'],
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         grid: {
           left: '15%',
           right: '5%',
           bottom: '15%',
-          top: '10%'
+          top: '22%'
         },
         xAxis: {
           type: 'category',
@@ -126,7 +131,7 @@ export default {
 <style lang="scss" scoped>
 .unsafe-position-chart {
   .chart-container {
-    height: 240rpx;
+    height: 400rpx;
   }
 
   .position-info {

src/pages/components/UnsafeTypesChart.vue

@@ -61,6 +61,11 @@ export default {
           trigger: 'item',
           formatter: '{b}: {c} ({d}%)'
         },
+        legend: {
+          data: this.chartsData.types.map(item => item.name),
+          textStyle: { color: '#666', fontSize: 10 },
+          top: 0
+        },
         series: [{
           type: 'pie',
           radius: ['50%', '70%'],
@@ -94,7 +99,7 @@ export default {
 <style lang="scss" scoped>
 .unsafe-types-chart {
   .chart-container {
-    height: 220rpx;
+    height: 400rpx;
   }
 
   .types-list {

src/pages/deptProfile/index.vue

@@ -59,7 +59,7 @@
             </SectionTitle>
 
             <view v-if="activeTab === 'profile'">
-                <SectionTitle title="七维得分一览">
+                <SectionTitle title="五维得分一览">
                     <ProfileRadar :chartsData="radarData" />
                 </SectionTitle>