refactor(frontend): 优化图表组件

- 改进 BarChart, LineChart, ScatterChart 组件
- 优化响应式布局和类型定义
This commit is contained in:
fawney19
2025-12-12 20:21:55 +08:00
parent 624d81f453
commit 9ac56662da
3 changed files with 8 additions and 28 deletions

View File

@@ -21,7 +21,8 @@ import {
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
height: 300, height: 300,
stacked: true stacked: true,
options: undefined
}) })
ChartJS.register( ChartJS.register(

View File

@@ -21,7 +21,8 @@ import {
} from 'chart.js' } from 'chart.js'
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
height: 300 height: 300,
options: undefined
}) })
// 注册 Chart.js 组件 // 注册 Chart.js 组件

View File

@@ -64,7 +64,8 @@ import {
import 'chartjs-adapter-date-fns' import 'chartjs-adapter-date-fns'
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
height: 300 height: 300,
options: undefined
}) })
ChartJS.register( ChartJS.register(
@@ -151,30 +152,8 @@ const crosshairStats = computed<CrosshairStats | null>(() => {
} }
}) })
const crosshairPlugin: Plugin<'scatter'> = { // 旧版插件(保留作为参考但不再使用,使用下方的 crosshairPluginWithTransform 代替)
id: 'crosshairLine', // const crosshairPlugin: Plugin<'scatter'> = { ... }
afterDraw: (chartInstance) => {
if (crosshairY.value === null) return
const { ctx, chartArea, scales } = chartInstance
const yScale = scales.y
if (!yScale || !chartArea) return
const yPixel = yScale.getPixelForValue(crosshairY.value)
if (yPixel < chartArea.top || yPixel > chartArea.bottom) return
ctx.save()
ctx.beginPath()
ctx.moveTo(chartArea.left, yPixel)
ctx.lineTo(chartArea.right, yPixel)
ctx.strokeStyle = 'rgba(250, 204, 21, 0.8)'
ctx.lineWidth = 2
ctx.setLineDash([6, 4])
ctx.stroke()
ctx.restore()
}
}
// 自定义非线性 Y 轴转换函数 // 自定义非线性 Y 轴转换函数
// 0-10 分钟占据 70% 的空间10-120 分钟占据 30% 的空间 // 0-10 分钟占据 70% 的空间10-120 分钟占据 30% 的空间
@@ -262,7 +241,6 @@ const defaultOptions: ChartOptions<'scatter'> = {
// 自定义刻度值:在实际值 0, 2, 5, 10, 30, 60, 120 处显示 // 自定义刻度值:在实际值 0, 2, 5, 10, 30, 60, 120 处显示
callback(this: Scale, tickValue: string | number) { callback(this: Scale, tickValue: string | number) {
const displayVal = Number(tickValue) const displayVal = Number(tickValue)
const realVal = toRealValue(displayVal)
// 只在特定的显示位置显示刻度 // 只在特定的显示位置显示刻度
const targetTicks = [0, 2, 5, 10, 30, 60, 120] const targetTicks = [0, 2, 5, 10, 30, 60, 120]
for (const target of targetTicks) { for (const target of targetTicks) {