X-Financial/web/src/components/charts/SystemUserTokenPie.vue

<template>
  <div class="system-user-token-pie">
    <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
    <div class="token-user-list">
      <div v-for="item in resolvedItems" :key="item.name" class="token-user-row">
        <i :style="{ background: item.resolvedColor }"></i>
        <div>
          <strong>{{ item.name }}</strong>
          <span>{{ item.role }}</span>
        </div>
        <em>{{ formatTokens(item.tokens) }}</em>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, shallowRef } from 'vue'
import { PieChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'

import { useEcharts } from '../../composables/useEcharts.js'
import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'

use([TooltipComponent, PieChart, CanvasRenderer])

const props = defineProps({
  items: { type: Array, required: true }
})

const chartElement = shallowRef(null)
const themeColors = useThemeColors()
const totalTokens = computed(() =>
  props.items.reduce((sum, item) => sum + Number(item.tokens || 0), 0)
)
const resolvedItems = computed(() =>
  props.items.map((item) => ({
    ...item,
    tokens: Number(item.tokens || 0),
    resolvedColor: resolveCssColor(item.color, themeColors.value.chartPrimary)
  }))
)

const ariaLabel = computed(() =>
  resolvedItems.value.map((item) => (
    `${item.name}${formatTokens(item.tokens)}，占比${getShare(item.tokens)}%`
  )).join('；')
)

const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
  animation: true,
  animationDuration: 900,
  animationEasing: 'cubicOut',
  tooltip: {
    trigger: 'item',
    confine: true,
    appendToBody: true,
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
    borderColor: 'rgba(148, 163, 184, 0.24)',
    borderWidth: 1,
    padding: [9, 10],
    textStyle: {
      color: '#334155',
      fontSize: 12,
      fontWeight: 700
    },
    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
    formatter: (params) => `${params.marker}${params.name}<br/>${formatTokens(params.value)} · ${params.percent}%`
  },
  series: [
    {
      type: 'pie',
      radius: [0, '82%'],
      center: ['47%', '50%'],
      roseType: 'radius',
      minAngle: 8,
      avoidLabelOverlap: true,
      label: {
        show: true,
        color: '#475569',
        fontSize: 11,
        fontWeight: 800,
        formatter: '{b}\n{d}%'
      },
      labelLine: {
        length: 10,
        length2: 6,
        lineStyle: { color: 'rgba(148, 163, 184, 0.55)' }
      },
      itemStyle: {
        borderColor: '#ffffff',
        borderWidth: 3,
        borderRadius: 4
      },
      emphasis: {
        scale: true,
        scaleSize: 4
      },
      data: resolvedItems.value.map((item) => ({
        name: item.name,
        value: item.tokens,
        itemStyle: { color: item.resolvedColor }
      }))
    }
  ]
}))

useEcharts(chartElement, chartOptions)

function getShare(value) {
  if (!totalTokens.value) return 0
  return Math.round((Number(value || 0) / totalTokens.value) * 1000) / 10
}

function formatTokens(value) {
  const number = Number(value || 0)
  if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(1)}M`
  if (number >= 1_000) return `${(number / 1_000).toFixed(1)}K`
  return `${Math.round(number)}`
}
</script>

<style scoped>
.system-user-token-pie {
  min-height: 292px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  gap: 10px;
}

.chart-body {
  width: 100%;
  min-width: 0;
  height: 292px;
}

.token-user-list {
  display: grid;
  gap: 8px;
  align-content: center;
}

.token-user-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.token-user-row:last-child {
  border-bottom: 0;
}

.token-user-row i {
  width: 8px;
  height: 22px;
  border-radius: 2px;
}

.token-user-row strong,
.token-user-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-user-row strong {
  color: #1e293b;
  font-size: 12px;
  font-weight: 800;
}

.token-user-row span {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
}

.token-user-row em {
  color: #0f172a;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .system-user-token-pie {
    grid-template-columns: 1fr;
  }
}
</style>