mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-05-07 00:11:37 +00:00
8a74bf5afe
- Replace .eslintrc.js with .eslintrc.cjs for better ES module compatibility - Add .prettierrc configuration for consistent code formatting - Update package.json with new lint and format scripts - Add nodemon.json for development hot reloading configuration - Standardize code formatting across all JavaScript and Vue files - Update web admin SPA with improved linting rules and formatting - Add prettier configuration to web admin SPA 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
import { Chart } from 'chart.js/auto'
|
|
|
|
export function useChartConfig() {
|
|
// 设置Chart.js默认配置
|
|
Chart.defaults.font.family =
|
|
"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
|
|
Chart.defaults.color = '#6b7280'
|
|
Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(0, 0, 0, 0.8)'
|
|
Chart.defaults.plugins.tooltip.padding = 12
|
|
Chart.defaults.plugins.tooltip.cornerRadius = 8
|
|
Chart.defaults.plugins.tooltip.titleFont.size = 14
|
|
Chart.defaults.plugins.tooltip.bodyFont.size = 12
|
|
|
|
// 创建渐变色
|
|
const getGradient = (ctx, color, opacity = 0.2) => {
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 300)
|
|
gradient.addColorStop(
|
|
0,
|
|
`${color}${Math.round(opacity * 255)
|
|
.toString(16)
|
|
.padStart(2, '0')}`
|
|
)
|
|
gradient.addColorStop(1, `${color}00`)
|
|
return gradient
|
|
}
|
|
|
|
// 通用图表选项
|
|
const commonOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
position: 'top',
|
|
labels: {
|
|
usePointStyle: true,
|
|
padding: 20,
|
|
font: {
|
|
size: 12,
|
|
weight: '500'
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
callbacks: {
|
|
label: function (context) {
|
|
let label = context.dataset.label || ''
|
|
if (label) {
|
|
label += ': '
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += new Intl.NumberFormat('zh-CN').format(context.parsed.y)
|
|
}
|
|
return label
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 11
|
|
},
|
|
callback: function (value) {
|
|
if (value >= 1000000) {
|
|
return (value / 1000000).toFixed(1) + 'M'
|
|
} else if (value >= 1000) {
|
|
return (value / 1000).toFixed(1) + 'K'
|
|
}
|
|
return value
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 颜色方案
|
|
const colorSchemes = {
|
|
primary: ['#667eea', '#764ba2', '#f093fb', '#4facfe', '#00f2fe'],
|
|
success: ['#10b981', '#059669', '#34d399', '#6ee7b7', '#a7f3d0'],
|
|
warning: ['#f59e0b', '#d97706', '#fbbf24', '#fcd34d', '#fde68a'],
|
|
danger: ['#ef4444', '#dc2626', '#f87171', '#fca5a5', '#fecaca']
|
|
}
|
|
|
|
return {
|
|
getGradient,
|
|
commonOptions,
|
|
colorSchemes
|
|
}
|
|
}
|