style(employee-profile): optimize chart legend display and layout

1. 注释掉员工个人能力模块的正常线图例
2. 给多个分布图表添加图例配置
3. 重构雷达图组件，新增图例说明区域并完善样式
4. 调整柱状图的轴标签旋转角度和系列名称

src/views/portraitManagement/components/ProfileBasicDistribution.vue

@@ -96,6 +96,13 @@ const updateGenderChart = (data) => {
       textStyle: { color: '#fff' },
       formatter: '{b}: {c} ({d}%)'
     },
+    legend: {
+      show: true,
+      textStyle: { color: '#fff' },
+      top: 0,
+      itemWidth: 10,
+      itemHeight: 10
+    },
     series: [{
       type: 'pie',
       radius: ['38%', '55%'],
@@ -120,6 +127,13 @@ const updateNationChart = (data) => {
       textStyle: { color: '#fff' },
       formatter: '{b}: {c} ({d}%)'
     },
+    legend: {
+      show: true,
+      textStyle: { color: '#fff' },
+      top: 0,
+      itemWidth: 10,
+      itemHeight: 10
+    },
     series: [{
       type: 'pie',
       radius: ['38%', '55%'],
@@ -144,6 +158,13 @@ const updatePoliticalChart = (data) => {
       textStyle: { color: '#fff' },
       formatter: '{b}: {c} ({d}%)'
     },
+    legend: {
+      show: true,
+      textStyle: { color: '#fff' },
+      top: 0,
+      itemWidth: 10,
+      itemHeight: 10
+    },
     series: [{
       type: 'pie',
       radius: ['38%', '55%'],

src/views/portraitManagement/components/ProfilePositionDistribution.vue

@@ -96,6 +96,12 @@ const updateSkillChart = (data) => {
       textStyle: { color: '#fff' },
       formatter: '{b}: {c}'
     },
+    legend: {
+      show: true,
+      textStyle: { color: '#fff' },
+      top: 0,
+      data: ['职业资格等级']
+    },
     xAxis: {
       type: 'category',
       data: chartData.categories,
@@ -110,6 +116,7 @@ const updateSkillChart = (data) => {
     },
     series: [{
       type: 'bar',
+      name: '职业资格等级',
       data: chartData.values,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -137,10 +144,16 @@ const updateOperateChart = (data) => {
       textStyle: { color: '#fff' },
       formatter: '{b}: {c}'
     },
+    legend: {
+      show: true,
+      textStyle: { color: '#fff' },
+      top: 0,
+      data: ['开机年限']
+    },
     xAxis: {
       type: 'category',
       data: chartData.categories,
-      axisLabel: { color: '#a0c4ff', fontSize: 10 },
+      axisLabel: { color: '#a0c4ff', fontSize: 10,rotate: 30 },
       axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
     },
     yAxis: {
@@ -151,6 +164,7 @@ const updateOperateChart = (data) => {
     },
     series: [{
       type: 'bar',
+      name: '开机年限',
       data: chartData.values,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -177,6 +191,12 @@ const updatePostChart = (data) => {
       textStyle: { color: '#fff' },
       formatter: '{b}: {c}'
     },
+    legend: {
+      show: true,
+      textStyle: { color: '#fff' },
+      top: 0,
+      data: ['岗位资质']
+    },
     xAxis: {
       type: 'category',
       data: chartData.categories,
@@ -191,6 +211,7 @@ const updatePostChart = (data) => {
     },
     series: [{
       type: 'bar',
+      name: '岗位资质',
       data: chartData.values,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

src/views/portraitManagement/components/ProfileRadar.vue

@@ -1,17 +1,25 @@
 <template>
   <InfoCard :title="title">
     <div class="radar-section">
-      <div ref="radarChartRef" class="radar-chart"></div>
+      <div>
+        <div class="chart-legend">
+          <div class="legend-item legend-warning"><span></span>预警线（低于75分）</div>
+          <!-- <div class="legend-item legend-normal"><span></span>正常线（75~90分)</div> -->
+          <div class="legend-item legend-excellent"><span></span>优秀线（高于90分）</div>
+          <div class="legend-item legend-current"><span></span>当前员工分值</div>
+        </div>
+        <div ref="radarChartRef" class="radar-chart"></div>
+      </div>
       <div class="radar-list">
         <div class="radar-item" v-for="(item, index) in computedRadarData" :key="index">
           <span class="item-label">{{ item.name }}</span>
           <div class="progress-row">
             <div class="progress-bar">
-            <div class="progress-fill"
-              :style="{ width: ((item.finalScore || 0) / (computedMaxScore || 1) * 100) + '%', background: `linear-gradient(90deg, ${item.color}33, ${item.color})` }">
+              <div class="progress-fill"
+                :style="{ width: ((item.finalScore || 0) / (computedMaxScore || 1) * 100) + '%', background: `linear-gradient(90deg, ${item.color}33, ${item.color})` }">
                 <span class="progress-end" :style="{ background: item.color }"></span>
+              </div>
             </div>
-          </div>
             <span class="item-value">{{ item.finalScore || 0 }}</span>
           </div>
         </div>
@@ -181,6 +189,62 @@ onUnmounted(() => {
   gap: 20px;
   min-height: 400px;
 
+  .chart-legend {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px 18px;
+    padding-top: 8px;
+    color: #fff;
+    font-size: 14px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    span {
+      width: 24px;
+      height: 10px;
+      border: 2px solid currentColor;
+      border-radius: 2px;
+    }
+  }
+
+  .legend-warning {
+    color: #fe4322;
+
+    span {
+      background-color: #fe4322;
+    }
+  }
+
+  .legend-normal {
+    color: #fff;
+
+    span {
+      background-color: #fff;
+    }
+  }
+
+  .legend-excellent {
+    color: #8EC742;
+
+    span {
+      background-color: #8EC742;
+    }
+  }
+
+  .legend-current {
+    color: #1890ff;
+
+    span {
+      background-color: #1890ff;
+    }
+  }
+
   .radar-chart {
     flex: 1;
     min-width: 300px;

src/views/portraitManagement/employeeProfile/index.vue

@@ -135,7 +135,7 @@
             <Card title="个人能力">
               <div class="chart-legend">
                 <div class="legend-item legend-warning"><span></span>预警线（低于75分）</div>
-                <div class="legend-item legend-normal"><span></span>正常线（75~90分)</div>
+                <!-- <div class="legend-item legend-normal"><span></span>正常线（75~90分)</div> -->
                 <div class="legend-item legend-excellent"><span></span>优秀线（高于90分）</div>
                 <div class="legend-item legend-current"><span></span>当前员工分值</div>
               </div>