minnan-zhangzhou-admin/src/views/home/components/StatCard.vue

<script setup lang="ts">
import { computed } from 'vue'
import type { KpiStat } from '../data'

const props = defineProps<{ kpi: KpiStat }>()

const option = computed(() => ({
  animationDuration: 1600,
  grid: { left: 0, right: 0, top: 1, bottom: 0 },
  xAxis: {
    show: false,
    type: 'category',
    data: props.kpi.chartData.map((_, j) => j),
  },
  yAxis: { show: false, type: 'value' },
  series: [
    {
      type: 'line',
      data: props.kpi.chartData,
      smooth: true,
      symbol: 'none',
      lineStyle: { color: props.kpi.chartColor, width: 2 },
      areaStyle: { color: props.kpi.chartColor, opacity: 0.15 },
    },
  ],
}))
</script>

<template>
  <article
    class="relative overflow-hidden rounded-sm 
    border border-[#7f4034] bg-[#351817]/75 p-3 
    shadow-[inset_0_0_22px_rgba(194,77,54,.12)] "
  >
    <p class="flex items-center gap-1.5 text-xs text-[#d4b6a2]">
      <Icon :icon="kpi.icon" :class="kpi.iconColor" width="16" />
      {{ kpi.title }}
    </p>
    <div class="mt-1 flex items-end justify-between">
      <p class="text-2xl font-bold text-[#fae8b1]">
        {{ kpi.value }}<span class="ml-1 text-xs font-normal">{{ kpi.unit }}</span>
      </p>
      <span class="text-xs" :class="kpi.trendColor">{{ kpi.trend }}</span>
    </div>
    <div class="mt-2 h-25">
      <VChart :option="option" autoresize />
    </div>
  </article>
</template>