feat: 引入 ECharts 统一图表并完善员工画像标签分页
后端优化员工行为画像服务和辅助函数，完善系统设置模型和 配置持久化，前端引入 ECharts 替换所有图表组件实现统一 渲染，新增员工画像标签分页器和数字员工工作记录组件，优 化工作台响应式布局和登录页过渡动画，完善预算中心和数字 员工页面样式细节。
This commit is contained in:
caoxiaozhu
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="bar-chart">
|
||||
<div class="rank-labels">
|
||||
<div v-for="(item, idx) in items" :key="item.name" class="rank-label">
|
||||
<div v-for="(item, idx) in resolvedItems" :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)" />
|
||||
@@ -12,39 +12,138 @@
|
||||
<span class="rank-name">{{ item.name || item.shortName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<Bar :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
<div ref="chartElement" class="chart-area" role="img" :aria-label="ariaLabel"></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'
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { BarChart as EChartsBarChart } from 'echarts/charts'
|
||||
import { GridComponent, TooltipComponent } from 'echarts/components'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
import { useEcharts } from '../../composables/useEcharts.js'
|
||||
import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
|
||||
use([GridComponent, TooltipComponent, EChartsBarChart, CanvasRenderer])
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const chartElement = shallowRef(null)
|
||||
const progress = useAnimationProgress([() => props.items], 980)
|
||||
const themeColors = useThemeColors()
|
||||
const resolvedItems = computed(() => {
|
||||
const fallback = themeColors.value.chartPrimary
|
||||
|
||||
return props.items.map((item) => ({
|
||||
...item,
|
||||
value: Number(item.value || item.amount || 0),
|
||||
resolvedColor: resolveCssColor(item.color, fallback)
|
||||
}))
|
||||
})
|
||||
|
||||
const ariaLabel = computed(() =>
|
||||
resolvedItems.value.map((item, index) => (
|
||||
`第${index + 1}名${item.name || item.shortName}${formatValue(item.value)}`
|
||||
)).join('，')
|
||||
)
|
||||
|
||||
const chartMaxValue = computed(() => Math.max(...resolvedItems.value.map((item) => item.value), 1))
|
||||
const chartAxisMax = computed(() => Math.ceil((chartMaxValue.value * 1.1) / 10000) * 10000)
|
||||
const animatedItems = computed(() =>
|
||||
resolvedItems.value.map((item) => ({
|
||||
...item,
|
||||
animatedValue: progress.value >= 0.999
|
||||
? item.value
|
||||
: Number((item.value * progress.value).toFixed(0))
|
||||
}))
|
||||
)
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
backgroundColor: 'transparent',
|
||||
animation: false,
|
||||
grid: {
|
||||
top: 8,
|
||||
right: 62,
|
||||
bottom: 8,
|
||||
left: 4,
|
||||
containLabel: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
appendToBody: true,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.24)',
|
||||
borderWidth: 1,
|
||||
padding: [9, 10],
|
||||
textStyle: {
|
||||
color: '#334155',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
},
|
||||
extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
|
||||
formatter: (params) => `${params.marker}${params.name}: ${formatValue(params.value)}`
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: chartAxisMax.value,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
lineStyle: { color: 'rgba(226, 232, 240, 0.72)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#94a3b8',
|
||||
fontSize: 11,
|
||||
fontWeight: 700,
|
||||
formatter: (value) => formatValue(value)
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: resolvedItems.value.map((item) => item.name || item.shortName),
|
||||
inverse: true,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: animatedItems.value.map((item) => ({
|
||||
name: item.name || item.shortName,
|
||||
value: item.animatedValue,
|
||||
itemStyle: { color: item.resolvedColor }
|
||||
})),
|
||||
barWidth: 14,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(226, 232, 240, 0.42)',
|
||||
borderRadius: 6
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [0, 6, 6, 0]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: '#64748b',
|
||||
fontSize: 11,
|
||||
fontWeight: 800,
|
||||
formatter: ({ value }) => formatValue(value)
|
||||
}
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
useEcharts(chartElement, chartOptions)
|
||||
|
||||
const medalClass = (idx) => {
|
||||
if (idx === 0) return 'gold'
|
||||
if (idx === 1) return 'silver'
|
||||
@@ -60,68 +159,10 @@ const medalFill = (idx) => {
|
||||
}
|
||||
|
||||
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: resolvedItems.value.map((i) => i.name || i.shortName),
|
||||
datasets: [{
|
||||
data: resolvedItems.value.map((i) => i.value || i.amount),
|
||||
backgroundColor: resolvedItems.value.map((i) => i.resolvedColor),
|
||||
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 }
|
||||
}
|
||||
}
|
||||
const number = Number(value || 0)
|
||||
if (number >= 1_000_000) return `¥${(number / 1_000_000).toFixed(1)}M`
|
||||
if (number >= 1_000) return `¥${(number / 1_000).toFixed(1)}K`
|
||||
return `¥${number}`
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -36,6 +36,8 @@ const progress = useAnimationProgress([
|
||||
() => props.available
|
||||
], 1000)
|
||||
const themeColors = useThemeColors()
|
||||
const prefersReducedMotion = () =>
|
||||
typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
|
||||
|
||||
const currency = (value) =>
|
||||
Number(value || 0).toLocaleString('zh-CN', {
|
||||
@@ -80,7 +82,7 @@ const chartData = computed(() => ({
|
||||
label: '已使用',
|
||||
data: scaleSeries(usedPercent.value),
|
||||
backgroundColor: themeColors.value.chartPrimary,
|
||||
borderRadius: 5,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
stack: 'budgetUsage',
|
||||
amounts: props.used
|
||||
@@ -89,7 +91,7 @@ const chartData = computed(() => ({
|
||||
label: '已占用',
|
||||
data: scaleSeries(occupiedPercent.value),
|
||||
backgroundColor: themeColors.value.warning,
|
||||
borderRadius: 5,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
stack: 'budgetUsage',
|
||||
amounts: props.occupied
|
||||
@@ -98,7 +100,7 @@ const chartData = computed(() => ({
|
||||
label: '剩余可用',
|
||||
data: scaleSeries(availablePercent.value),
|
||||
backgroundColor: '#e5edf3',
|
||||
borderRadius: 5,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
stack: 'budgetUsage',
|
||||
amounts: props.available
|
||||
@@ -114,7 +116,7 @@ const chartOptions = computed(() => ({
|
||||
intersect: false
|
||||
},
|
||||
animation: {
|
||||
duration: 760,
|
||||
duration: prefersReducedMotion() ? 0 : 760,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
plugins: {
|
||||
@@ -127,6 +129,7 @@ const chartOptions = computed(() => ({
|
||||
borderWidth: 1,
|
||||
bodyColor: '#475569',
|
||||
titleColor: '#0f172a',
|
||||
cornerRadius: 4,
|
||||
padding: 12,
|
||||
displayColors: true,
|
||||
callbacks: {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="donut-chart">
|
||||
<div class="donut-body">
|
||||
<Doughnut :data="chartData" :options="chartOptions" />
|
||||
<div ref="chartElement" class="donut-canvas" role="img" :aria-label="ariaLabel"></div>
|
||||
<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">
|
||||
<div v-for="item in resolvedItems" :key="item.name" class="legend-row">
|
||||
<i :style="{ background: item.resolvedColor }"></i>
|
||||
<span class="legend-name">{{ item.name }}</span>
|
||||
<span class="legend-val">{{ item.display }}</span>
|
||||
@@ -18,18 +18,17 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
ArcElement,
|
||||
Tooltip,
|
||||
Legend
|
||||
} from 'chart.js'
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { PieChart } from 'echarts/charts'
|
||||
import { TooltipComponent } from 'echarts/components'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
import { useEcharts } from '../../composables/useEcharts.js'
|
||||
import { resolveCssColor, useThemeColors } from '../../composables/useThemeColors.js'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
use([TooltipComponent, PieChart, CanvasRenderer])
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true },
|
||||
@@ -37,67 +36,73 @@ const props = defineProps({
|
||||
centerLabel: { type: String, required: true }
|
||||
})
|
||||
|
||||
const progress = useAnimationProgress([() => props.items], 1150)
|
||||
const chartElement = shallowRef(null)
|
||||
const progress = useAnimationProgress([() => props.items], 980)
|
||||
const themeColors = useThemeColors()
|
||||
const resolvedItems = computed(() => {
|
||||
const fallback = themeColors.value.chartPrimary
|
||||
|
||||
return props.items.map((item) => ({
|
||||
...item,
|
||||
value: Math.max(Number(item.value || 0), 0),
|
||||
resolvedColor: resolveCssColor(item.color, fallback)
|
||||
}))
|
||||
})
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: resolvedItems.value.map((i) => i.name),
|
||||
datasets: [{
|
||||
data: resolvedItems.value.map((i) => Math.max(Number((i.value * progress.value).toFixed(1)), 0.001)),
|
||||
backgroundColor: resolvedItems.value.map((i) => i.resolvedColor),
|
||||
borderWidth: 0,
|
||||
cutout: '68%',
|
||||
spacing: 3,
|
||||
borderRadius: 4
|
||||
}]
|
||||
const ariaLabel = computed(() =>
|
||||
`${props.centerLabel}${props.centerValue}，${resolvedItems.value.map((item) => `${item.name}${item.display}`).join('，')}`
|
||||
)
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
backgroundColor: 'transparent',
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
appendToBody: true,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.24)',
|
||||
borderWidth: 1,
|
||||
padding: [9, 10],
|
||||
textStyle: {
|
||||
color: '#334155',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
},
|
||||
extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
|
||||
formatter: (params) => `${params.marker}${params.name}: ${params.percent}%`
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['60%', '88%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 90,
|
||||
endAngle: 90 - Math.max(progress.value, 0.0001) * 360,
|
||||
avoidLabelOverlap: true,
|
||||
padAngle: 1.5,
|
||||
minAngle: 2,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
itemStyle: {
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 3,
|
||||
borderRadius: 4
|
||||
},
|
||||
emphasis: {
|
||||
scale: true,
|
||||
scaleSize: 3
|
||||
},
|
||||
data: resolvedItems.value.map((item) => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: { color: item.resolvedColor }
|
||||
}))
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
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}%`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
useEcharts(chartElement, chartOptions)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -106,14 +111,20 @@ const chartOptions = {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 240px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.donut-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 166px;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.donut-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.donut-center {
|
||||
@@ -130,8 +141,8 @@ const chartOptions = {
|
||||
|
||||
.donut-center strong {
|
||||
color: #1e293b;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 17px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="gauge-chart">
|
||||
<div class="gauge-body">
|
||||
<Doughnut :data="chartData" :options="chartOptions" />
|
||||
<div ref="chartElement" class="gauge-canvas" role="img" :aria-label="ariaLabel"></div>
|
||||
<div class="gauge-center">
|
||||
<strong>{{ animatedRatio }}%</strong>
|
||||
<span>已执行</span>
|
||||
@@ -25,17 +25,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
ArcElement,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
import { computed, shallowRef } from 'vue'
|
||||
import { GaugeChart as EChartsGaugeChart } from 'echarts/charts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
import { useEcharts } from '../../composables/useEcharts.js'
|
||||
import { useThemeColors } from '../../composables/useThemeColors.js'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip)
|
||||
use([EChartsGaugeChart, CanvasRenderer])
|
||||
|
||||
const props = defineProps({
|
||||
ratio: { type: [Number, String], required: true },
|
||||
@@ -44,36 +43,61 @@ const props = defineProps({
|
||||
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 chartElement = shallowRef(null)
|
||||
const progress = useAnimationProgress([() => props.ratio], 980)
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: ['已执行', '剩余'],
|
||||
datasets: [{
|
||||
data: [animatedRatio.value, 100 - animatedRatio.value],
|
||||
backgroundColor: [themeColors.value.chartPrimary, '#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 }
|
||||
const normalizedRatio = computed(() => Math.max(0, Math.min(100, Math.round(Number(props.ratio) || 0))))
|
||||
const animatedRatio = computed(() => {
|
||||
if (progress.value >= 0.999) {
|
||||
return normalizedRatio.value
|
||||
}
|
||||
}
|
||||
return Math.round(normalizedRatio.value * progress.value)
|
||||
})
|
||||
const ariaLabel = computed(() => `预算执行率${normalizedRatio.value}%，预算总额${props.total}，已执行${props.used}，剩余${props.left}`)
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const primary = themeColors.value.chartPrimary
|
||||
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
animation: false,
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 205,
|
||||
endAngle: -25,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: '104%',
|
||||
center: ['50%', '66%'],
|
||||
pointer: { show: false },
|
||||
progress: {
|
||||
show: true,
|
||||
roundCap: true,
|
||||
width: 14,
|
||||
itemStyle: {
|
||||
color: primary
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: 14,
|
||||
color: [[1, '#e2e8f0']]
|
||||
}
|
||||
},
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
anchor: { show: false },
|
||||
detail: { show: false },
|
||||
data: [{ value: animatedRatio.value }]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
useEcharts(chartElement, chartOptions)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -81,19 +105,24 @@ const chartOptions = {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gauge-body {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
height: 128px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gauge-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gauge-center {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
|
||||
@@ -1,25 +1,28 @@
|
||||
<template>
|
||||
<div class="radar-chart">
|
||||
<Radar :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
<div ref="chartElement" class="radar-chart" role="img" :aria-label="ariaLabel"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Radar } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
Legend,
|
||||
LineElement,
|
||||
PointElement,
|
||||
RadialLinearScale,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
|
||||
import { RadarChart as EChartsRadarChart } from 'echarts/charts'
|
||||
import { RadarComponent, TooltipComponent } from 'echarts/components'
|
||||
import { init, use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
import { useThemeColors } from '../../composables/useThemeColors.js'
|
||||
|
||||
ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend)
|
||||
use([RadarComponent, EChartsRadarChart, TooltipComponent, CanvasRenderer])
|
||||
|
||||
const DEFAULT_DIMENSION_COLORS = [
|
||||
'#3a7ca5',
|
||||
'#0f9f8f',
|
||||
'#f59e0b',
|
||||
'#7c3aed',
|
||||
'#dc2626',
|
||||
'#2563eb',
|
||||
'#16a34a',
|
||||
'#db2777'
|
||||
]
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true },
|
||||
@@ -28,89 +31,205 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const themeColors = useThemeColors()
|
||||
const chartElement = shallowRef(null)
|
||||
let chartInstance = null
|
||||
let resizeObserver = null
|
||||
|
||||
const normalizedItems = computed(() =>
|
||||
props.items.map((item) => ({
|
||||
props.items.map((item, index) => ({
|
||||
code: String(item.code || item.label || '').trim(),
|
||||
label: String(item.label || item.code || '').trim(),
|
||||
score: clampScore(item.score)
|
||||
score: clampScore(item.score),
|
||||
color: normalizeColor(item.color, index)
|
||||
}))
|
||||
)
|
||||
|
||||
const chartData = computed(() => {
|
||||
const primary = themeColors.value.chartPrimary
|
||||
const ariaLabel = computed(() => {
|
||||
const summary = normalizedItems.value
|
||||
.map((item) => `${item.label}${item.score}分`)
|
||||
.join('，')
|
||||
return `${props.label}：${summary}`
|
||||
})
|
||||
|
||||
const chartOptions = computed(() => {
|
||||
const primary = themeColors.value.chartPrimary || DEFAULT_DIMENSION_COLORS[0]
|
||||
const indicators = normalizedItems.value.map((item) => ({
|
||||
name: `${item.label}\n${item.score}`,
|
||||
min: 0,
|
||||
max: props.max,
|
||||
color: item.color
|
||||
}))
|
||||
|
||||
return {
|
||||
labels: normalizedItems.value.map((item) => item.label),
|
||||
datasets: [
|
||||
backgroundColor: 'transparent',
|
||||
animationDuration: 760,
|
||||
animationEasing: 'cubicOut',
|
||||
color: [primary],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
appendToBody: true,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.24)',
|
||||
borderWidth: 1,
|
||||
padding: [9, 10],
|
||||
textStyle: {
|
||||
color: '#334155',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
},
|
||||
extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);',
|
||||
formatter: formatTooltip
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '52%'],
|
||||
radius: '67%',
|
||||
shape: 'polygon',
|
||||
splitNumber: 4,
|
||||
startAngle: 90,
|
||||
axisNameGap: 18,
|
||||
indicator: indicators,
|
||||
axisName: {
|
||||
color: '#475569',
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
lineHeight: 16
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(100, 116, 139, 0.18)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
'rgba(148, 163, 184, 0.14)',
|
||||
'rgba(148, 163, 184, 0.18)',
|
||||
'rgba(148, 163, 184, 0.22)',
|
||||
'rgba(148, 163, 184, 0.28)'
|
||||
]
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: [
|
||||
'rgba(248, 250, 252, 0.58)',
|
||||
'rgba(241, 245, 249, 0.34)'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
label: props.label,
|
||||
data: normalizedItems.value.map((item) => item.score),
|
||||
borderColor: primary,
|
||||
backgroundColor: toRgba(primary, 0.16),
|
||||
pointBackgroundColor: '#ffffff',
|
||||
pointBorderColor: primary,
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 4,
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.18
|
||||
name: props.label,
|
||||
type: 'radar',
|
||||
symbol: 'circle',
|
||||
symbolSize: 7,
|
||||
data: [
|
||||
{
|
||||
value: normalizedItems.value.map((item) => item.score),
|
||||
name: props.label,
|
||||
lineStyle: {
|
||||
width: 2.5,
|
||||
color: primary,
|
||||
shadowColor: toRgba(primary, 0.22),
|
||||
shadowBlur: 7
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.7,
|
||||
colorStops: [
|
||||
{ offset: 0, color: toRgba(primary, 0.28) },
|
||||
{ offset: 1, color: toRgba(primary, 0.08) }
|
||||
]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ffffff',
|
||||
borderColor: primary,
|
||||
borderWidth: 2.5,
|
||||
shadowColor: toRgba(primary, 0.2),
|
||||
shadowBlur: 5
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 3
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: 760,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
titleColor: '#0f172a',
|
||||
bodyColor: '#475569',
|
||||
borderColor: 'rgba(148, 163, 184, 0.28)',
|
||||
borderWidth: 1,
|
||||
cornerRadius: 4,
|
||||
padding: 10,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
label: (context) => `${context.dataset.label}: ${context.parsed.r}`
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
min: 0,
|
||||
max: props.max,
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
stepSize: 25
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(148, 163, 184, 0.22)',
|
||||
circular: false
|
||||
},
|
||||
angleLines: {
|
||||
color: 'rgba(148, 163, 184, 0.18)'
|
||||
},
|
||||
pointLabels: {
|
||||
color: '#475569',
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 11,
|
||||
weight: '700'
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
renderChart()
|
||||
bindResize()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
unbindResize()
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose()
|
||||
chartInstance = null
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
watch(chartOptions, () => {
|
||||
nextTick(renderChart)
|
||||
}, { deep: true })
|
||||
|
||||
function renderChart() {
|
||||
if (!chartElement.value) {
|
||||
return
|
||||
}
|
||||
if (!chartInstance) {
|
||||
chartInstance = init(chartElement.value, null, { renderer: 'canvas' })
|
||||
}
|
||||
chartInstance.setOption(chartOptions.value, true)
|
||||
chartInstance.resize()
|
||||
}
|
||||
|
||||
function bindResize() {
|
||||
if (!chartElement.value) {
|
||||
return
|
||||
}
|
||||
if (typeof ResizeObserver !== 'undefined') {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
chartInstance?.resize()
|
||||
})
|
||||
resizeObserver.observe(chartElement.value)
|
||||
}
|
||||
window.addEventListener('resize', handleResize)
|
||||
}
|
||||
|
||||
function unbindResize() {
|
||||
resizeObserver?.disconnect()
|
||||
resizeObserver = null
|
||||
window.removeEventListener('resize', handleResize)
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
chartInstance?.resize()
|
||||
}
|
||||
|
||||
function formatTooltip() {
|
||||
const rows = normalizedItems.value.map((item) => (
|
||||
`<div class="profile-radar-tooltip-row">`
|
||||
+ `<span style="background:${escapeHtml(item.color)}"></span>`
|
||||
+ `<em>${escapeHtml(item.label)}</em>`
|
||||
+ `<strong>${item.score}</strong>`
|
||||
+ `</div>`
|
||||
))
|
||||
return `<div class="profile-radar-tooltip"><b>${escapeHtml(props.label)}</b>${rows.join('')}</div>`
|
||||
}
|
||||
|
||||
function clampScore(value) {
|
||||
const score = Number(value || 0)
|
||||
@@ -120,6 +239,14 @@ function clampScore(value) {
|
||||
return Math.max(0, Math.min(props.max, score))
|
||||
}
|
||||
|
||||
function normalizeColor(value, index) {
|
||||
const color = String(value || '').trim()
|
||||
if (color) {
|
||||
return color
|
||||
}
|
||||
return DEFAULT_DIMENSION_COLORS[index % DEFAULT_DIMENSION_COLORS.length]
|
||||
}
|
||||
|
||||
function toRgba(color, alpha) {
|
||||
const normalized = String(color || '').trim()
|
||||
const hex = normalized.replace('#', '')
|
||||
@@ -142,6 +269,16 @@ function toRgba(color, alpha) {
|
||||
|
||||
return `rgba(58, 124, 165, ${alpha})`
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value || '').replace(/[&<>"']/g, (char) => ({
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
})[char])
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -149,6 +286,49 @@ function toRgba(color, alpha) {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 260px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.profile-radar-tooltip {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.profile-radar-tooltip b {
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.profile-radar-tooltip-row {
|
||||
display: grid;
|
||||
grid-template-columns: 8px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.profile-radar-tooltip-row span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.profile-radar-tooltip-row em {
|
||||
overflow: hidden;
|
||||
color: #475569;
|
||||
font-size: 11.5px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-radar-tooltip-row strong {
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,30 +5,22 @@
|
||||
<span><i :style="{ background: chartColors.blue }"></i>审批完成量（单）</span>
|
||||
<span><i :style="{ background: chartColors.purple }"></i>平均审批时长（小时）</span>
|
||||
</div>
|
||||
<div class="chart-body">
|
||||
<Bar :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
<div ref="chartElement" class="chart-body" role="img" :aria-label="ariaLabel"></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 { 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 { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
import { useEcharts } from '../../composables/useEcharts.js'
|
||||
import { useThemeColors } from '../../composables/useThemeColors.js'
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler, Tooltip, Legend)
|
||||
use([GridComponent, TooltipComponent, EChartsBarChart, EChartsLineChart, CanvasRenderer])
|
||||
|
||||
const props = defineProps({
|
||||
labels: { type: Array, required: true },
|
||||
@@ -37,12 +29,13 @@ const props = defineProps({
|
||||
avgHours: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const chartElement = shallowRef(null)
|
||||
const progress = useAnimationProgress([
|
||||
() => props.labels,
|
||||
() => props.applications,
|
||||
() => props.approved,
|
||||
() => props.avgHours
|
||||
], 1200)
|
||||
], 1100)
|
||||
const themeColors = useThemeColors()
|
||||
const chartColors = computed(() => ({
|
||||
primary: themeColors.value.chartPrimary,
|
||||
@@ -50,144 +43,152 @@ const chartColors = computed(() => ({
|
||||
purple: themeColors.value.chartPurple
|
||||
}))
|
||||
|
||||
const scaleSeries = (series, decimals = 0) =>
|
||||
series.map((value) => Number((Number(value) * progress.value).toFixed(decimals)))
|
||||
const ariaLabel = computed(() =>
|
||||
props.labels.map((label, index) => (
|
||||
`${label}申请${props.applications[index] || 0}单，审批${props.approved[index] || 0}单，平均${props.avgHours[index] || 0}小时`
|
||||
)).join('；')
|
||||
)
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.labels,
|
||||
datasets: [
|
||||
const scaleSeries = (series, decimals = 0) =>
|
||||
series.map((value) => {
|
||||
const number = Number(value || 0)
|
||||
if (progress.value >= 0.999) {
|
||||
return number
|
||||
}
|
||||
return Number((number * progress.value).toFixed(decimals))
|
||||
})
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
backgroundColor: 'transparent',
|
||||
animation: false,
|
||||
grid: {
|
||||
top: 18,
|
||||
right: 38,
|
||||
bottom: 22,
|
||||
left: 36,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
confine: true,
|
||||
appendToBody: true,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.24)',
|
||||
borderWidth: 1,
|
||||
padding: [9, 10],
|
||||
textStyle: {
|
||||
color: '#334155',
|
||||
fontSize: 12,
|
||||
fontWeight: 700
|
||||
},
|
||||
extraCssText: 'border-radius:4px;box-shadow:0 12px 28px rgba(15,23,42,.12);'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.labels,
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
axisLine: { lineStyle: { color: 'rgba(148, 163, 184, 0.28)' } },
|
||||
axisLabel: {
|
||||
color: '#64748b',
|
||||
fontSize: 11,
|
||||
fontWeight: 700
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
label: '申请量（单）',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 250,
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
color: '#64748b',
|
||||
fontSize: 11,
|
||||
fontWeight: 700
|
||||
},
|
||||
splitLine: { lineStyle: { color: 'rgba(226, 232, 240, 0.75)' } }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 15,
|
||||
splitNumber: 5,
|
||||
axisLabel: {
|
||||
color: '#64748b',
|
||||
fontSize: 11,
|
||||
fontWeight: 700
|
||||
},
|
||||
splitLine: { show: false }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '申请量（单）',
|
||||
type: 'bar',
|
||||
data: scaleSeries(props.applications),
|
||||
backgroundColor: chartColors.value.primary,
|
||||
borderRadius: 4,
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.5,
|
||||
order: 2
|
||||
barWidth: 12,
|
||||
barGap: '28%',
|
||||
itemStyle: {
|
||||
color: chartColors.value.primary,
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '审批完成量（单）',
|
||||
name: '审批完成量（单）',
|
||||
type: 'bar',
|
||||
data: scaleSeries(props.approved),
|
||||
backgroundColor: chartColors.value.blue,
|
||||
borderRadius: 4,
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.5,
|
||||
order: 2
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: chartColors.value.blue,
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '平均审批时长（小时）',
|
||||
data: scaleSeries(props.avgHours, 1),
|
||||
borderColor: chartColors.value.purple,
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#ffffff',
|
||||
pointBorderColor: chartColors.value.purple,
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
name: '平均审批时长（小时）',
|
||||
type: 'line',
|
||||
yAxisID: 'y1',
|
||||
order: 1
|
||||
yAxisIndex: 1,
|
||||
data: scaleSeries(props.avgHours, 1),
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 7,
|
||||
lineStyle: {
|
||||
width: 2.5,
|
||||
color: chartColors.value.purple
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#ffffff',
|
||||
borderColor: chartColors.value.purple,
|
||||
borderWidth: 2.5
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: toRgba(chartColors.value.purple, 0.14) },
|
||||
{ offset: 1, color: toRgba(chartColors.value.purple, 0.02) }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
useEcharts(chartElement, chartOptions)
|
||||
|
||||
function toRgba(color, alpha) {
|
||||
const normalized = String(color || '').trim()
|
||||
const hex = normalized.replace('#', '')
|
||||
if (/^[\da-f]{6}$/i.test(hex)) {
|
||||
const r = parseInt(hex.slice(0, 2), 16)
|
||||
const g = parseInt(hex.slice(2, 4), 16)
|
||||
const b = parseInt(hex.slice(4, 6), 16)
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
}
|
||||
}
|
||||
|
||||
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)`
|
||||
return `rgba(58, 124, 165, ${alpha})`
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user