153 lines
3.1 KiB
Vue
153 lines
3.1 KiB
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>
|