feat: 引入 ECharts 统一图表并完善员工画像标签分页

后端优化员工行为画像服务和辅助函数，完善系统设置模型和
配置持久化，前端引入 ECharts 替换所有图表组件实现统一
渲染，新增员工画像标签分页器和数字员工工作记录组件，优
化工作台响应式布局和登录页过渡动画，完善预算中心和数字
员工页面样式细节。

web/src/components/charts/TrendChart.vue

@@ -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>