feat: add reusable BarChart and GaugeChart components
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
172
src/components/charts/BarChart.vue
Normal file
172
src/components/charts/BarChart.vue
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bar-chart">
|
||||||
|
<div class="rank-labels">
|
||||||
|
<div v-for="(item, idx) in items" :key="item.name" class="rank-label">
|
||||||
|
<span class="rank-badge" :class="medalClass(idx)">
|
||||||
|
<svg v-if="idx < 3" width="18" height="18" viewBox="0 0 18 18">
|
||||||
|
<circle cx="9" cy="9" r="8" :fill="medalFill(idx)" />
|
||||||
|
<text x="9" y="13" text-anchor="middle" fill="#fff" font-size="10" font-weight="700">{{ idx + 1 }}</text>
|
||||||
|
</svg>
|
||||||
|
<template v-else>{{ idx + 1 }}</template>
|
||||||
|
</span>
|
||||||
|
<span class="rank-name">{{ item.name || item.shortName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-area">
|
||||||
|
<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,
|
||||||
|
Tooltip
|
||||||
|
} from 'chart.js'
|
||||||
|
|
||||||
|
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
items: { type: Array, required: true }
|
||||||
|
})
|
||||||
|
|
||||||
|
const medalClass = (idx) => {
|
||||||
|
if (idx === 0) return 'gold'
|
||||||
|
if (idx === 1) return 'silver'
|
||||||
|
if (idx === 2) return 'bronze'
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const medalFill = (idx) => {
|
||||||
|
if (idx === 0) return '#f59e0b'
|
||||||
|
if (idx === 1) return '#94a3b8'
|
||||||
|
if (idx === 2) return '#cd7f32'
|
||||||
|
return '#94a3b8'
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatValue = (value) => {
|
||||||
|
if (value >= 1_000_000) return `¥${(value / 1_000_000).toFixed(1)}M`
|
||||||
|
if (value >= 1_000) return `¥${(value / 1_000).toFixed(1)}K`
|
||||||
|
return `¥${value}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const chartData = computed(() => ({
|
||||||
|
labels: props.items.map((i) => i.name || i.shortName),
|
||||||
|
datasets: [{
|
||||||
|
data: props.items.map((i) => i.value || i.amount),
|
||||||
|
backgroundColor: props.items.map((i) => i.color),
|
||||||
|
borderRadius: 6,
|
||||||
|
borderSkipped: false,
|
||||||
|
barPercentage: 0.7,
|
||||||
|
categoryPercentage: 0.85
|
||||||
|
}]
|
||||||
|
}))
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
indexAxis: 'y',
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
layout: {
|
||||||
|
padding: { left: 0, right: 12 }
|
||||||
|
},
|
||||||
|
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,
|
||||||
|
callbacks: {
|
||||||
|
title: () => '',
|
||||||
|
label: (ctx) => ` ${formatValue(ctx.parsed.x)}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
beginAtZero: true,
|
||||||
|
grid: {
|
||||||
|
color: '#f1f5f9',
|
||||||
|
drawTicks: false
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
color: '#94a3b8',
|
||||||
|
font: { size: 11 },
|
||||||
|
padding: 4,
|
||||||
|
callback: (value) => formatValue(value)
|
||||||
|
},
|
||||||
|
border: { display: false }
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
grid: { display: false },
|
||||||
|
border: { display: false },
|
||||||
|
ticks: { display: false }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.bar-chart {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-labels {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
height: 34px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge:not(.gold):not(.silver):not(.bronze) {
|
||||||
|
background: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-badge svg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-name {
|
||||||
|
color: #475569;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-area {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
position: relative;
|
||||||
|
height: 240px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
127
src/components/charts/GaugeChart.vue
Normal file
127
src/components/charts/GaugeChart.vue
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<div class="gauge-chart">
|
||||||
|
<div class="gauge-body">
|
||||||
|
<Doughnut :data="chartData" :options="chartOptions" />
|
||||||
|
<div class="gauge-center">
|
||||||
|
<strong>{{ ratio }}%</strong>
|
||||||
|
<span>已执行</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gauge-summary">
|
||||||
|
<div>
|
||||||
|
<span>预算总额</span>
|
||||||
|
<strong>{{ total }}</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>已执行</span>
|
||||||
|
<strong>{{ used }}</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>剩余可用</span>
|
||||||
|
<strong>{{ left }}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { Doughnut } from 'vue-chartjs'
|
||||||
|
import {
|
||||||
|
Chart as ChartJS,
|
||||||
|
ArcElement,
|
||||||
|
Tooltip
|
||||||
|
} from 'chart.js'
|
||||||
|
|
||||||
|
ChartJS.register(ArcElement, Tooltip)
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
ratio: { type: [Number, String], required: true },
|
||||||
|
total: { type: String, required: true },
|
||||||
|
used: { type: String, required: true },
|
||||||
|
left: { type: String, required: true }
|
||||||
|
})
|
||||||
|
|
||||||
|
const ratioValue = computed(() => Number(props.ratio))
|
||||||
|
|
||||||
|
const chartData = computed(() => ({
|
||||||
|
labels: ['已执行', '剩余'],
|
||||||
|
datasets: [{
|
||||||
|
data: [ratioValue.value, 100 - ratioValue.value],
|
||||||
|
backgroundColor: ['#10b981', '#e2e8f0'],
|
||||||
|
borderWidth: 0
|
||||||
|
}]
|
||||||
|
}))
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
rotation: -90,
|
||||||
|
circumference: 180,
|
||||||
|
cutout: '65%',
|
||||||
|
plugins: {
|
||||||
|
legend: { display: false },
|
||||||
|
tooltip: { enabled: false }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.gauge-chart {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-body {
|
||||||
|
position: relative;
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-center {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
text-align: center;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-center strong {
|
||||||
|
color: #10b981;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-center span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-summary span {
|
||||||
|
display: block;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gauge-summary strong {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #1e293b;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user