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

<template>
  <InfoCard 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.value + '%', background: `linear-gradient(to right, transparent, ${item.color})` }">
                <span class="progress-end"></span>
              </div>
            </div>
            <span class="item-value">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
  </InfoCard>
</template>

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

const props = defineProps({
  chartData1: {
    type: Array,
    default: () => []
  },
  chartData2: {
    type: Array,
    default: () => []
  },
  chartData3: {
    type: Array,
    default: () => []
  },
  chartData4: {
    type: Array,
    default: () => []
  }
})

const defaultRadarData = [
  { name: '通道安全防控力', value: 86, color: '#00e5ff' },
  { name: '通道安全防控力', value: 90, color: '#00e5ff' },
  { name: '通道安全防控力', value: 72, color: '#ff4757' },
  { name: '通道安全防控力', value: 68, color: '#ff4757' },
  { name: '通道安全防控力', value: 78, color: '#3742fa' },
  { name: '通道安全防控力', value: 80, color: '#3742fa' },
  { name: '通道协同作战能力', value: 72, color: '#ff4757' }
]

const defaultIndicators = [
  { name: '通道安全防控力', max: 100 },
  { name: '通道安全防控力', max: 100 },
  { name: '通道安全防控力', max: 100 },
  { name: '通道安全防控力', max: 100 },
  { name: '通道安全防控力', max: 100 },
  { name: '通道安全防控力', max: 100 },
  { name: '通道协同作战能力', max: 100 }
]

const defaultSeries1 = [86, 90, 72, 68, 78, 80, 72]
const defaultSeries2 = [80, 85, 65, 60, 72, 75, 68]

const computedRadarData = computed(() => {
  return props.chartData1.length > 0 ? props.chartData1 : defaultRadarData
})

const radarChartRef = ref(null)
let radarChart = null

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

  radarChart = echarts.init(radarChartRef.value)

  const indicators = props.chartData2.length > 0 ? props.chartData2 : defaultIndicators
  const series1 = props.chartData3.length > 0 ? props.chartData3 : defaultSeries1
  const series2 = props.chartData4.length > 0 ? props.chartData4 : defaultSeries2

  const option = {
    radar: {
      indicator: indicators,
      center: ['50%', '50%'],
      radius: '70%',
      splitNumber: 4,
      axisLine: {
        lineStyle: {
          color: 'rgba(15, 70, 250, 0.3)'
        }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(15, 70, 250, 0.05)', 'rgba(15, 70, 250, 0.1)', 'rgba(15, 70, 250, 0.15)', 'rgba(15, 70, 250, 0.2)']
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(15, 70, 250, 0.2)'
        }
      },
      name: {
        textStyle: {
          color: '#a0c4ff',
          fontSize: 11
        }
      }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: series1,
            name: '综合得分',
            areaStyle: {
              color: 'rgba(189, 3, 251, 0.3)'
            },
            lineStyle: {
              color: '#bd03fb',
              width: 2
            },
            itemStyle: {
              color: '#bd03fb'
            }
          },
          {
            value: series2,
            name: '基准值',
            areaStyle: {
              color: 'rgba(15, 70, 250, 0.2)'
            },
            lineStyle: {
              color: '#0f46fa',
              width: 2
            },
            itemStyle: {
              color: '#0f46fa'
            }
          }
        ],
        symbol: 'circle',
        symbolSize: 6
      }
    ],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(13, 80, 122, 0.95)',
      borderColor: '#70CFE7',
      textStyle: {
        color: '#fff'
      }
    }
  }

  radarChart.setOption(option)
}

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

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      initRadarChart()
      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>