refactor: split project into web and server directories
- Move frontend to web/ directory - Add server/ directory for backend - Restructure project for前后端分离架构 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
172
web/src/components/charts/BarChart.vue
Normal file
172
web/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>
|
||||
194
web/src/components/charts/DonutChart.vue
Normal file
194
web/src/components/charts/DonutChart.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="donut-chart">
|
||||
<div class="donut-body">
|
||||
<Doughnut :data="chartData" :options="chartOptions" />
|
||||
<div class="donut-center">
|
||||
<strong>{{ centerValue }}</strong>
|
||||
<span>{{ centerLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="donut-legend">
|
||||
<div v-for="item in items" :key="item.name" class="legend-row">
|
||||
<i :style="{ background: item.color }"></i>
|
||||
<span class="legend-name">{{ item.name }}</span>
|
||||
<span class="legend-val">{{ item.display }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
ArcElement,
|
||||
Tooltip,
|
||||
Legend
|
||||
} from 'chart.js'
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true },
|
||||
centerValue: { type: String, required: true },
|
||||
centerLabel: { type: String, required: true }
|
||||
})
|
||||
|
||||
const progress = useAnimationProgress([() => props.items], 1150)
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.items.map((i) => i.name),
|
||||
datasets: [{
|
||||
data: props.items.map((i) => Math.max(Number((i.value * progress.value).toFixed(1)), 0.001)),
|
||||
backgroundColor: props.items.map((i) => i.color),
|
||||
borderWidth: 0,
|
||||
cutout: '68%',
|
||||
spacing: 3,
|
||||
borderRadius: 4
|
||||
}]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
animateScale: true,
|
||||
duration: 900,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
transitions: {
|
||||
active: {
|
||||
animation: {
|
||||
duration: 180
|
||||
}
|
||||
}
|
||||
},
|
||||
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,
|
||||
callbacks: {
|
||||
label: (ctx) => {
|
||||
const total = ctx.dataset.data.reduce((a, b) => a + b, 0) || 1
|
||||
const pct = ((ctx.parsed / total) * 100).toFixed(1)
|
||||
return ` ${ctx.label}: ${pct}%`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.donut-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.donut-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.donut-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
animation: donutCenterIn 620ms ease both;
|
||||
animation-delay: 360ms;
|
||||
}
|
||||
|
||||
.donut-center strong {
|
||||
color: #1e293b;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.donut-center span {
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.donut-legend {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px 16px;
|
||||
animation: donutLegendIn 560ms ease both;
|
||||
animation-delay: 480ms;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.legend-row i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.legend-name {
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.legend-val {
|
||||
margin-left: auto;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@keyframes donutCenterIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(.92);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes donutLegendIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.donut-center,
|
||||
.donut-legend {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
web/src/components/charts/GaugeChart.vue
Normal file
168
web/src/components/charts/GaugeChart.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="gauge-chart">
|
||||
<div class="gauge-body">
|
||||
<Doughnut :data="chartData" :options="chartOptions" />
|
||||
<div class="gauge-center">
|
||||
<strong>{{ animatedRatio }}%</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'
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.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 progress = useAnimationProgress([() => props.ratio], 1150)
|
||||
const animatedRatio = computed(() => Number((ratioValue.value * progress.value).toFixed(0)))
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: ['已执行', '剩余'],
|
||||
datasets: [{
|
||||
data: [animatedRatio.value, 100 - animatedRatio.value],
|
||||
backgroundColor: ['#10b981', '#e2e8f0'],
|
||||
borderWidth: 0
|
||||
}]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
rotation: -90,
|
||||
circumference: 180,
|
||||
cutout: '65%',
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
duration: 900,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
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;
|
||||
animation: gaugeCenterIn 620ms ease both;
|
||||
animation-delay: 360ms;
|
||||
}
|
||||
|
||||
.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;
|
||||
animation: gaugeSummaryIn 560ms ease both;
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@keyframes gaugeCenterIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gaugeSummaryIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.gauge-center,
|
||||
.gauge-summary {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
web/src/components/charts/TrendChart.vue
Normal file
216
web/src/components/charts/TrendChart.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="trend-chart">
|
||||
<div class="chart-legend">
|
||||
<span><i style="background:#10b981"></i>申请量（单）</span>
|
||||
<span><i style="background:#3b82f6"></i>审批完成量（单）</span>
|
||||
<span><i style="background:#8b5cf6"></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,
|
||||
Filler,
|
||||
Tooltip,
|
||||
Legend
|
||||
} from 'chart.js'
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler, Tooltip, Legend)
|
||||
|
||||
const props = defineProps({
|
||||
labels: { type: Array, required: true },
|
||||
applications: { type: Array, required: true },
|
||||
approved: { type: Array, required: true },
|
||||
avgHours: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const progress = useAnimationProgress([
|
||||
() => props.labels,
|
||||
() => props.applications,
|
||||
() => props.approved,
|
||||
() => props.avgHours
|
||||
], 1200)
|
||||
|
||||
const scaleSeries = (series, decimals = 0) =>
|
||||
series.map((value) => Number((Number(value) * progress.value).toFixed(decimals)))
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: '申请量（单）',
|
||||
data: scaleSeries(props.applications),
|
||||
backgroundColor: '#10b981',
|
||||
borderRadius: 4,
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.5,
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
label: '审批完成量（单）',
|
||||
data: scaleSeries(props.approved),
|
||||
backgroundColor: '#3b82f6',
|
||||
borderRadius: 4,
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.5,
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
label: '平均审批时长（小时）',
|
||||
data: scaleSeries(props.avgHours, 1),
|
||||
borderColor: '#8b5cf6',
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#ffffff',
|
||||
pointBorderColor: '#8b5cf6',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
type: 'line',
|
||||
yAxisID: 'y1',
|
||||
order: 1
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: 900,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
events: ['click', 'mousemove', 'mouseout'],
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
external: externalTooltip
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 11 }
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 250,
|
||||
grid: { color: '#f1f5f9' },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 11 },
|
||||
stepSize: 50
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
position: 'right',
|
||||
beginAtZero: true,
|
||||
max: 15,
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 11 },
|
||||
stepSize: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function externalTooltip(context) {
|
||||
const { chart, tooltip } = context
|
||||
|
||||
let el = chart.canvas.parentNode.querySelector('.chart-tooltip')
|
||||
if (!el) {
|
||||
el = document.createElement('div')
|
||||
el.classList.add('chart-tooltip')
|
||||
el.style.cssText =
|
||||
'position:absolute;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;pointer-events:none;transition:opacity .15s,transform .15s;font-family:Inter,system-ui,sans-serif;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.08);z-index:10;opacity:0;transform:translateY(4px)'
|
||||
chart.canvas.parentNode.appendChild(el)
|
||||
}
|
||||
|
||||
if (tooltip.opacity === 0) {
|
||||
el.style.opacity = '0'
|
||||
return
|
||||
}
|
||||
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || []
|
||||
const bodyLines = tooltip.body.map((b) => b.lines)
|
||||
|
||||
const colors = tooltip.labelColors
|
||||
const dot = (color, text) =>
|
||||
`<div style="display:flex;align-items:center;gap:6px;margin-top:4px"><span style="width:8px;height:8px;border-radius:50%;background:${color};flex-shrink:0"></span><span style="color:#64748b">${text}</span></div>`
|
||||
|
||||
el.innerHTML =
|
||||
`<div style="font-weight:600;color:#1e293b;margin-bottom:4px">${titleLines.join('')}</div>` +
|
||||
bodyLines
|
||||
.map((lines, i) =>
|
||||
lines.map((line) => dot(colors[i]?.backgroundColor || colors[i]?.borderColor || '#999', line))
|
||||
)
|
||||
.join('')
|
||||
}
|
||||
|
||||
const { offsetLeft, offsetTop } = chart.canvas
|
||||
const left = offsetLeft + tooltip.caretX
|
||||
const top = offsetTop + tooltip.caretY
|
||||
|
||||
el.style.opacity = '1'
|
||||
el.style.transform = 'translateY(0)'
|
||||
el.style.left = `${left}px`
|
||||
el.style.top = `${top - el.offsetHeight - 12}px`
|
||||
el.style.transform = `translate(-50%, 0)`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trend-chart {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chart-legend i {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user