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

<template>
  <div class="log-trend-chart">
    <div class="chart-legend">
      <span><i :style="{ background: chartColors.primary }"></i>日志总量</span>
      <span><i :style="{ background: chartColors.danger }"></i>失败数</span>
    </div>
    <div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></div>
  </div>
</template>

<script setup>
import { computed, shallowRef } from 'vue'
import { BarChart as EChartsBarChart, LineChart as EChartsLineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'

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

use([GridComponent, TooltipComponent, EChartsBarChart, EChartsLineChart, CanvasRenderer])

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

const chartElement = shallowRef(null)
const themeColors = useThemeColors()
const chartColors = computed(() => ({
  primary: themeColors.value.chartPrimary,
  danger: themeColors.value.chartDanger
}))

const maxTotal = computed(() => Math.max(...props.totals.map((value) => Number(value || 0)), 1))
const ariaLabel = computed(() =>
  props.labels.map((label, index) => (
    `${label}日志总量${props.totals[index] || 0}，失败数${props.failures[index] || 0}`
  )).join('；')
)

const chartOptions = computed(() => ({
  backgroundColor: 'transparent',
  animation: {
    duration: 900,
    easing: 'easeOutQuart'
  },
  grid: {
    top: 12,
    right: 18,
    bottom: 20,
    left: 34,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    appendToBody: true,
    backgroundColor: 'rgba(255,255,255,0.96)',
    borderColor: '#e2e8f0',
    borderWidth: 1,
    padding: [9, 10],
    textStyle: {
      color: '#64748b',
      fontSize: 12,
      fontWeight: 700
    },
    extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);'
  },
  xAxis: {
    type: 'category',
    data: props.labels,
    axisTick: { show: false },
    axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.28)' } },
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: Math.max(maxTotal.value, 4),
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: {
      color: '#64748b',
      fontSize: 11,
      fontWeight: 700
    },
    splitLine: { lineStyle: { color: '#f1f5f9' } }
  },
  series: [
    {
      name: '日志总量',
      type: 'bar',
      data: props.totals,
      barWidth: 16,
      itemStyle: {
        color: chartColors.value.primary,
        borderRadius: [4, 4, 0, 0]
      }
    },
    {
      name: '失败数',
      type: 'line',
      data: props.failures,
      smooth: true,
      symbol: 'circle',
      symbolSize: 7,
      lineStyle: {
        width: 2,
        color: chartColors.value.danger
      },
      itemStyle: {
        color: '#ffffff',
        borderColor: chartColors.value.danger,
        borderWidth: 2
      }
    }
  ]
}))

useEcharts(chartElement, chartOptions)
</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>