143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="budget-trend-chart">
|
||
|
|
<Line :data="chartData" :options="chartOptions" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { Line } from 'vue-chartjs'
|
||
|
|
import {
|
||
|
|
Chart as ChartJS,
|
||
|
|
CategoryScale,
|
||
|
|
Filler,
|
||
|
|
Legend,
|
||
|
|
LinearScale,
|
||
|
|
LineElement,
|
||
|
|
PointElement,
|
||
|
|
Tooltip
|
||
|
|
} from 'chart.js'
|
||
|
|
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||
|
|
|
||
|
|
ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Filler, Tooltip, Legend)
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
labels: { type: Array, required: true },
|
||
|
|
budget: { type: Array, required: true },
|
||
|
|
used: { type: Array, required: true }
|
||
|
|
})
|
||
|
|
|
||
|
|
const progress = useAnimationProgress([
|
||
|
|
() => props.labels,
|
||
|
|
() => props.budget,
|
||
|
|
() => props.used
|
||
|
|
], 1000)
|
||
|
|
|
||
|
|
const scaleSeries = (series) =>
|
||
|
|
series.map((value) => Number((Number(value || 0) * progress.value).toFixed(2)))
|
||
|
|
|
||
|
|
const chartData = computed(() => ({
|
||
|
|
labels: props.labels,
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: '预算',
|
||
|
|
data: scaleSeries(props.budget),
|
||
|
|
borderColor: '#2f7fd7',
|
||
|
|
backgroundColor: 'rgba(47, 127, 215, 0.08)',
|
||
|
|
borderDash: [7, 5],
|
||
|
|
borderWidth: 2,
|
||
|
|
pointRadius: 3,
|
||
|
|
pointHoverRadius: 5,
|
||
|
|
pointBackgroundColor: '#ffffff',
|
||
|
|
pointBorderColor: '#2f7fd7',
|
||
|
|
pointBorderWidth: 2,
|
||
|
|
tension: 0.34,
|
||
|
|
fill: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '已发生',
|
||
|
|
data: scaleSeries(props.used),
|
||
|
|
borderColor: '#13a66b',
|
||
|
|
backgroundColor: 'rgba(19, 166, 107, 0.12)',
|
||
|
|
borderWidth: 2,
|
||
|
|
pointRadius: 3,
|
||
|
|
pointHoverRadius: 5,
|
||
|
|
pointBackgroundColor: '#ffffff',
|
||
|
|
pointBorderColor: '#13a66b',
|
||
|
|
pointBorderWidth: 2,
|
||
|
|
tension: 0.34,
|
||
|
|
fill: false
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}))
|
||
|
|
|
||
|
|
const chartOptions = {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
interaction: {
|
||
|
|
mode: 'index',
|
||
|
|
intersect: false
|
||
|
|
},
|
||
|
|
animation: {
|
||
|
|
duration: 760,
|
||
|
|
easing: 'easeOutQuart'
|
||
|
|
},
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
display: false
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
backgroundColor: '#ffffff',
|
||
|
|
borderColor: '#e2e8f0',
|
||
|
|
borderWidth: 1,
|
||
|
|
bodyColor: '#475569',
|
||
|
|
titleColor: '#0f172a',
|
||
|
|
padding: 12,
|
||
|
|
displayColors: true,
|
||
|
|
callbacks: {
|
||
|
|
label(context) {
|
||
|
|
const value = Number(context.parsed.y || 0)
|
||
|
|
return `${context.dataset.label}: ${value.toLocaleString('zh-CN')} 元`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
grid: { display: false },
|
||
|
|
ticks: {
|
||
|
|
color: '#64748b',
|
||
|
|
font: { size: 12 }
|
||
|
|
},
|
||
|
|
border: { display: false }
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
beginAtZero: true,
|
||
|
|
max: 12000000,
|
||
|
|
grid: {
|
||
|
|
color: '#edf2f7',
|
||
|
|
drawTicks: false
|
||
|
|
},
|
||
|
|
border: { display: false },
|
||
|
|
ticks: {
|
||
|
|
color: '#64748b',
|
||
|
|
font: { size: 12 },
|
||
|
|
stepSize: 3000000,
|
||
|
|
callback(value) {
|
||
|
|
if (value === 0) return '0'
|
||
|
|
return `${Number(value) / 10000}万`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.budget-trend-chart {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
height: 220px;
|
||
|
|
}
|
||
|
|
</style>
|