chongqing-web/src/views/portraitManagement/components/ProfileRadar.vue

<template>
  <InfoCard :title="title">
    <div class="radar-section">
      <div ref="radarChartRef" class="radar-chart"></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})` }">
                <span class="progress-end" :style="{ background: item.color }"></span>
            </div>
          </div>
            <span class="item-value">{{ item.finalScore || 0 }}</span>
          </div>
        </div>
      </div>
    </div>
  </InfoCard>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import InfoCard from './card.vue'

const props = defineProps({
  title: {
    type: String,
    default: '七维得分一览'
  },
  chartData: {
    type: Array,
    default: () => []
  }
})

const getScoreColor = (score) => {
  if (score < 75) return '#ff4d4f'
  if (score >= 90) return '#52c41a'
  return '#ffffff'
}

const freshColors = [
  '#00e5ff', '#36d399', '#fbbf24', '#f472b6', '#a78bfa',
  '#34d399', '#f97316', '#2dd4bf', '#e879f9', '#38bdf8'
]

const defaultRadarData = []

const computedRadarData = computed(() => {
  const data = props.chartData.length > 0 ? props.chartData : defaultRadarData
  return data.map((item, index) => ({
    ...item,
    color: item.color || freshColors[index % freshColors.length],
    itemColor: getScoreColor(item.finalScore || 0)
  }))
})

const computedIndicators = computed(() => {
  const data = computedRadarData.value
  const allScores = data.map(item => item.finalScore || 0)
  const maxValue = allScores.length > 0 ? Math.max(...allScores) : 100
  return data.map(item => ({
    name: item.name + '\n\n' + (item.finalScore || 0),
    max: Math.max(maxValue, 1)
  }))
})

const computedMaxScore = computed(() => {
  const data = computedRadarData.value
  const allScores = data.map(item => item.finalScore || 0)
  return allScores.length > 0 ? Math.max(...allScores) : 100
})

const computedSeries = computed(() => {
  return computedRadarData.value.map(item => item.finalScore || 0)
})

const radarChartRef = ref(null)
let radarChart = null

const updateRadarChart = () => {
  if (!radarChartRef.value) return

  if (!radarChart) {
    radarChart = echarts.init(radarChartRef.value)
  }

  const radarData = computedRadarData.value
  const indicators = computedIndicators.value
  const pointColors = radarData.map(item => item.itemColor)
  const pointValues = radarData.map(item => item.finalScore || 0)

  const option = {
    grid: {
      top: 40,
      bottom: 40,
      left: 50,
      right: 50
    },
    radar: {
      indicator: indicators,
      center: ['50%', '52%'],
      radius: '50%',
      splitNumber: 8,
      axisLine: { lineStyle: { color: '#ccc' } },
      splitLine: { lineStyle: { color: ['#ccc', '#ccc', '#ccc', '#ccc', '#ccc', '#ccc', '#fe4322', '#8EC742', '#ccc'], width: 3 } },
      splitArea: { show: false },
      axisName: {
        color: '#fff',
        fontSize: 13
      }
    },
    series: [
      {
        type: 'radar',
        symbol: 'circle',
        symbolSize: 13,
        data: [
          {
            value: pointValues,
            name: '综合得分',
            opacity: 0,
            lineStyle: {
              color: '#4DC8FE',
              width: 2
            },
            itemStyle: { color: '#fff', borderWidth: 1, borderColor: '#00C8DA', borderJoin: 'round' }
          }
        ],
        label: {
          show: false,
          formatter: (p) => p.value,
          color: '#fff',
          fontSize: 16,
          fontWeight: 'bold'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(13, 80, 122, 0.95)',
      borderColor: '#70CFE7',
      textStyle: {
        color: '#fff'
      }
    }
  }

  radarChart.setOption(option)
}

const handleResize = () => {
  if (radarChart) radarChart.resize()
}

watch(() => props.chartData, () => {
  updateRadarChart()
}, { deep: true })

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      updateRadarChart()
      window.addEventListener('resize', handleResize)
    }, 100)
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (radarChart) radarChart.dispose()
})
</script>

<style lang="scss" scoped>
.radar-section {
  display: flex;
  gap: 20px;
  min-height: 400px;

  .radar-chart {
    flex: 1;
    min-width: 300px;
    height: 380px;
  }

  .radar-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;

    .radar-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;

      .item-label {
        color: #a0c4ff;
      }

      .progress-row {
        display: flex;
        align-items: center;
        gap: 10px;

        .progress-bar {
          flex: 1;
          height: 5px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 0;
          overflow: visible;


          .progress-fill {
            height: 100%;
            border-radius: 0;
            transition: width 0.3s ease;
            position: relative;

            .progress-end {
              position: absolute;
              right: -4px;
              top: 50%;
              transform: translateY(-50%);
              width: 3px;
              height: 9px;
              background: #fff;
              border-radius: 2px;
            }
          }
        }

        .item-value {
          width: 45px;
          text-align: right;
          color: #fff;
          font-weight: bold;
          font-size: 13px;
        }
      }
    }
  }
}
</style>