feat(waveform): 添加波形图趋势工具和坐标轴规则

- 实现波形图纵坐标显示规则,包括最大最小值显示、刻度均分、对称边界等功能
- 添加多图趋势图对齐规则,确保绘图区左边界一致和标签宽度统一
- 集成图表点击事件发射器,支持时间标签、数值和系列名称的数据传递
- 实现波形图缩放、平移、测量、峰值标记等交互功能
- 添加坐标轴刻度精度控制和可读步长归一化处理
- 实现多图对齐的网格配置和纵坐标标签防重叠机制
- 添加波形图全屏展示和图片导出功能
- 实现趋势图峰值标记点和测量游标功能
This commit is contained in:
2026-05-07 09:38:06 +08:00
parent 407ab0a7f6
commit 2babe9d99d
7 changed files with 903 additions and 209 deletions

View File

@@ -29,6 +29,15 @@ const color = [
const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options', 'isInterVal', 'pieInterVal', 'group'])
const emit = defineEmits<{
'chart-click': [
value: {
timeLabel: string
value: number
seriesName: string
}
]
}>()
let chart: echarts.ECharts | any = null
const resizeHandler = () => {
// 不在视野中的时候不进行resize
@@ -41,7 +50,6 @@ const resizeHandler = () => {
})
}
const initChart = () => {
if (!props.isInterVal && !props.pieInterVal) {
chart?.dispose()
}
@@ -127,8 +135,24 @@ const initChart = () => {
// console.log(options.series,"获取x轴");
handlerBar(options)
// 处理柱状图
chart.setOption(options, true)
chart.off('click')
chart.on('click', (params: any) => {
const value = Array.isArray(params.value) ? params.value[1] : params.value
if (params.componentType !== 'series' || !Number.isFinite(Number(value))) return
emit('chart-click', {
timeLabel: `${params.name ?? params.dataIndex ?? ''}`,
value: Number(value),
seriesName: `${params.seriesName || ''}`
})
})
chart.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: props.options?.activeTool === 'box-zoom'
})
setTimeout(() => {
chart.resize()
@@ -176,7 +200,7 @@ const handlerYAxis = () => {
axisLabel: {
color: '#000',
fontSize: 14,
formatter: function (value) {
formatter: function (value: number) {
return value.toFixed(0) // 格式化显示为一位小数
}
},