mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-02 15:52:26 +08:00
refactor(frontend): 优化图表组件
- 改进 BarChart, LineChart, ScatterChart 组件 - 优化响应式布局和类型定义
This commit is contained in:
@@ -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(
|
||||||
|
|||||||
@@ -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 组件
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user