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

<template>
  <div class="log-trend-chart">
    <div class="chart-legend">
      <span><i style="background:#10b981"></i>日志总量</span>
      <span><i style="background:#ef4444"></i>失败数</span>
    </div>
    <div class="chart-body">
      <Bar :data="chartData" :options="chartOptions" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Bar } from 'vue-chartjs'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  PointElement,
  LineElement,
  Tooltip,
  Legend
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'

ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Tooltip, Legend)

const props = defineProps({
  labels: { type: Array, required: true },
  totals: { type: Array, required: true },
  failures: { type: Array, required: true }
})

const progress = useAnimationProgress([
  () => props.labels,
  () => props.totals,
  () => props.failures
], 1000)

const scaleSeries = (series) =>
  series.map((value) => Math.round(Number(value || 0) * progress.value))

const maxTotal = computed(() => Math.max(...props.totals.map((value) => Number(value || 0)), 1))

const chartData = computed(() => ({
  labels: props.labels,
  datasets: [
    {
      label: '日志总量',
      data: scaleSeries(props.totals),
      backgroundColor: '#10b981',
      borderRadius: 4,
      barPercentage: 0.58,
      categoryPercentage: 0.56,
      order: 2
    },
    {
      label: '失败数',
      data: scaleSeries(props.failures),
      borderColor: '#ef4444',
      backgroundColor: 'transparent',
      borderWidth: 2,
      pointBackgroundColor: '#ffffff',
      pointBorderColor: '#ef4444',
      pointBorderWidth: 2,
      pointRadius: 3,
      pointHoverRadius: 5,
      type: 'line',
      order: 1
    }
  ]
}))

const chartOptions = computed(() => ({
  responsive: true,
  maintainAspectRatio: false,
  animation: {
    duration: 900,
    easing: 'easeOutQuart'
  },
  interaction: {
    mode: 'index',
    intersect: false
  },
  plugins: {
    legend: { display: false },
    tooltip: {
      backgroundColor: 'rgba(255,255,255,0.96)',
      titleColor: '#1e293b',
      bodyColor: '#64748b',
      borderColor: '#e2e8f0',
      borderWidth: 1,
      padding: 10,
      boxPadding: 4,
      cornerRadius: 6,
      usePointStyle: true
    }
  },
  scales: {
    x: {
      grid: { display: false },
      ticks: {
        color: '#64748b',
        font: { size: 11 }
      }
    },
    y: {
      beginAtZero: true,
      suggestedMax: Math.max(maxTotal.value, 4),
      grid: { color: '#f1f5f9' },
      ticks: {
        color: '#64748b',
        font: { size: 11 },
        precision: 0
      }
    }
  }
}))
</script>

<style scoped>
.log-trend-chart {
  height: 208px;
  display: flex;
  flex-direction: column;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: #475569;
  font-size: 12px;
}

.chart-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
}

.chart-body {
  flex: 1;
  min-height: 0;
}
</style>