ln-web/src/views/dashboard/components/ObjectDistributionCard/index.vue

<template>
  <TechCard>
    <div class="card-title">检测对象分布</div>
    <BaseChart :option="chartOption" :height="180" />
  </TechCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import TechCard from '../TechCard/index.vue'

defineOptions({ name: 'ObjectDistributionCard' })

interface GuardItem {
  guardType: string
  count: string | number
}

interface Props {
  guardList: GuardItem[]
}

const props = defineProps<Props>()

// 提取分类名称和数量
const categories = computed(() => props.guardList.map((item) => item.guardType))
const counts = computed(() => props.guardList.map((item) => Number(item.count)))

// 配色方案
const colorPalette = ['#f39c12', '#2ecc71', '#3498db', '#e74c3c', '#9b59b6', '#1abc9c']

const chartOption = computed(() => ({
  tooltip: {
    trigger: 'item',
    axisPointer: { type: 'shadow' },
    formatter: '{b}: {c} 个',
  },
  grid: {
    left: 40,
    right: 20,
    top: 20,
    bottom: 40,
  },
  xAxis: {
    type: 'category',
    data: categories.value,
    axisLabel: { color: '#9cc5e0' },
    axisTick: { show: false },
    axisLine: { show: false },
  },
  yAxis: {
    type: 'value',
    axisLabel: { color: '#9cc5e0' },
    splitLine: { show: false },
  },
  series: [
    {
      type: 'bar',
      data: counts.value,
      barWidth: 30,
      itemStyle: {
        color: (params: { dataIndex: number }) => {
          return colorPalette[params.dataIndex % colorPalette.length]
        },
      },
      label: {
        show: true,
        position: 'top',
        color: '#00f0ff',
        fontSize: 12,
      },
    },
  ],
}))
</script>

<style scoped lang="less">
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #00f0ff;
  margin-bottom: 12px;
  text-align: center;
}
</style>