border_Inspection/web/src/components/AlgorithmStats.vue

<template>
  <div class="radar-chart-container">
    <dv-border-box-10 class="border-box">
      <div class="chart-title">算法命中率统计</div>
      <div ref="radarChart" class="chart"></div>
    </dv-border-box-10>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const radarChart = ref(null)

onMounted(() => {
  const radarOption = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,0.8)',
      borderColor: 'rgba(124, 208, 255, 0.8)',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    legend: {
      data: ['目标识别算法', '行为识别算法'],
      bottom: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      itemWidth: 12,
      itemHeight: 8,
      itemGap: 20
    },
    radar: {
      indicator: [
        { name: '命中率', max: 100 },
        { name: '误报率', max: 100 },
        { name: '触发器', max: 100 },
        { name: '处理时延', max: 100 },
        { name: '稳定性', max: 100 }
      ],
      radius: '65%',
      axisName: {
        color: 'rgba(124, 208, 255, 0.8)',
        fontSize: 12,
        padding: [3, 5]
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(124, 208, 255, 0.2)',
          width: 1
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(124, 208, 255, 0.5)',
          width: 1
        }
      },
      splitArea: {
        show: false
      }
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: [90, 85, 95, 80, 88],
          name: '目标识别算法',
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 2,
            color: '#A020F0' // 紫色
          },
          itemStyle: {
            color: '#A020F0',
            borderWidth: 1,
            borderColor: '#fff'
          },
          areaStyle: {
            color: 'rgba(160, 32, 240, 0.2)'
          }
        },
        {
          value: [80, 75, 85, 70, 82],
          name: '行为识别算法',
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            width: 2,
            color: '#1E90FF' // 蓝色
          },
          itemStyle: {
            color: '#1E90FF',
            borderWidth: 1,
            borderColor: '#fff'
          },
          areaStyle: {
            color: 'rgba(30, 144, 255, 0.2)'
          }
        }
      ]
    }]
  }

  const chartInstance = echarts.init(radarChart.value)
  chartInstance.setOption(radarOption)

  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
})
</script>

<style scoped>
.radar-chart-container {
  width: 100%;
  height: 40vh; /* 高度占一半 */
  padding: 15px 30px;
  box-sizing: border-box;
}

.border-box {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  /* padding: 20px; */
  box-sizing: border-box;
}

.chart-title {
  font-size: 16px;
  color: #7cd0ff;
  text-align: center;
  padding-top: 15px;
  font-weight: 500;
  letter-spacing: 1px;
}

.chart {
  width: 100%;
  height: calc(100% - 30px);
  padding: 20px;
}
</style>