waveform-analysis 0.1.73 → 0.1.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +256 -46
- package/dist/assets/workerRuntime-BJiRmIZD.js +2446 -0
- package/dist/index.cjs +1 -2
- package/dist/index.js +1 -7115
- package/dist/style.css +1 -1
- package/dist/types/animation/WaveformAnimationController.d.ts +30 -0
- package/dist/types/animation/core/Animation.d.ts +13 -0
- package/dist/types/animation/core/Animator.d.ts +23 -0
- package/dist/types/animation/core/easing.d.ts +3 -0
- package/dist/types/animation/core/errors.d.ts +4 -0
- package/dist/types/animation/core/handle.d.ts +7 -0
- package/dist/types/animation/core/owner.d.ts +3 -0
- package/dist/types/animation/core/propertyGroups.d.ts +17 -0
- package/dist/types/animation/core/task.d.ts +29 -0
- package/dist/types/animation/core/types.d.ts +74 -0
- package/dist/types/animation/core/validation.d.ts +30 -0
- package/dist/types/animation/core/values.d.ts +8 -0
- package/dist/types/animation/presets/annotation.d.ts +4 -0
- package/dist/types/animation/presets/lineDrawing.d.ts +7 -0
- package/dist/types/animation/presets/shared.d.ts +14 -0
- package/dist/types/animation/presets/transitions.d.ts +4 -0
- package/dist/types/animation/types.d.ts +84 -0
- package/dist/types/components/WaveformChart.vue.d.ts +3 -2
- package/dist/types/components/animation/annotationPresentation.d.ts +17 -0
- package/dist/types/components/animation/chartExportVersion.d.ts +2 -0
- package/dist/types/components/animation/config.d.ts +31 -0
- package/dist/types/components/animation/context.d.ts +20 -0
- package/dist/types/components/animation/geometry.d.ts +10 -0
- package/dist/types/components/animation/paginationPresentation.d.ts +13 -0
- package/dist/types/components/animation/pathBuffer.d.ts +4 -0
- package/dist/types/components/animation/trackPresentation.d.ts +35 -0
- package/dist/types/components/animation/useWaveformAnimations.d.ts +27 -0
- package/dist/types/components/annotation/WaveformAnnotationContextMenu.vue.d.ts +2 -2
- package/dist/types/components/annotation/types.d.ts +7 -0
- package/dist/types/components/controls/useChartImageExport.d.ts +2 -0
- package/dist/types/components/core/layout.d.ts +2 -1
- package/dist/types/components/core/types.d.ts +8 -0
- package/dist/types/components/core/useWaveformChartController.d.ts +25 -0
- package/dist/types/components/core/useWaveformRenderSampling.d.ts +2 -0
- package/dist/types/components/core/waveformChartTypes.d.ts +2 -1
- package/dist/types/components/core/yAxisTitleLayout.d.ts +1 -1
- package/dist/types/components/interaction/useExtremaTickViewport.d.ts +1 -1
- package/dist/types/components/rendering/WaveformSeriesLayer.vue.d.ts +1 -0
- package/dist/types/components/rendering/WaveformTrack.vue.d.ts +4 -3
- package/dist/types/components/rendering/updateAxis.d.ts +5 -0
- package/dist/types/components/rendering/updateGrid.d.ts +3 -0
- package/dist/types/components/rendering/yAxisTickVisibility.d.ts +2 -0
- package/dist/types/components/utils/assignElement.d.ts +2 -0
- package/dist/types/demo/types.d.ts +2 -1
- package/dist/types/index.d.ts +9 -0
- package/dist/types/types/chart.d.ts +4 -2
- package/dist/types/views/AnimationDemo.vue.d.ts +3 -0
- package/package.json +5 -2
- package/src/App.vue +6 -3
- package/src/DemoRouterApp.vue +1 -0
- package/src/animation/WaveformAnimationController.ts +328 -0
- package/src/animation/core/Animation.ts +37 -0
- package/src/animation/core/Animator.ts +200 -0
- package/src/animation/core/easing.ts +74 -0
- package/src/animation/core/errors.ts +24 -0
- package/src/animation/core/handle.ts +34 -0
- package/src/animation/core/owner.ts +9 -0
- package/src/animation/core/propertyGroups.ts +143 -0
- package/src/animation/core/task.ts +153 -0
- package/src/animation/core/types.ts +81 -0
- package/src/animation/core/validation.ts +173 -0
- package/src/animation/core/values.ts +38 -0
- package/src/animation/presets/annotation.ts +66 -0
- package/src/animation/presets/lineDrawing.ts +51 -0
- package/src/animation/presets/shared.ts +58 -0
- package/src/animation/presets/transitions.ts +77 -0
- package/src/animation/types.ts +81 -0
- package/src/components/WaveformChart.vue +1 -0
- package/src/components/WaveformChartView.vue +13 -4
- package/src/components/animation/annotationPresentation.ts +145 -0
- package/src/components/animation/chartExportVersion.ts +5 -0
- package/src/components/animation/config.ts +87 -0
- package/src/components/animation/context.ts +56 -0
- package/src/components/animation/geometry.ts +148 -0
- package/src/components/animation/paginationPresentation.ts +114 -0
- package/src/components/animation/pathBuffer.ts +61 -0
- package/src/components/animation/trackPresentation.ts +172 -0
- package/src/components/animation/useWaveformAnimations.ts +420 -0
- package/src/components/annotation/WaveformAnnotationLayer.vue +43 -30
- package/src/components/annotation/types.ts +3 -0
- package/src/components/controls/useChartImageExport.ts +4 -0
- package/src/components/core/layout.ts +36 -22
- package/src/components/core/trackLayoutBuilder.ts +17 -23
- package/src/components/core/types.ts +4 -0
- package/src/components/core/useWaveformChartController.ts +24 -20
- package/src/components/core/useWaveformLayout.ts +3 -1
- package/src/components/core/useWaveformRenderSampling.ts +23 -1
- package/src/components/core/waveformChartTypes.ts +2 -1
- package/src/components/core/yAxisLayoutMetrics.ts +24 -16
- package/src/components/core/yAxisPadding.ts +10 -5
- package/src/components/core/yAxisTitleLayout.ts +9 -48
- package/src/components/interaction/useExtremaTickViewport.ts +1 -1
- package/src/components/rendering/WaveformSeriesLayer.vue +13 -1
- package/src/components/rendering/WaveformTrack.vue +6 -1
- package/src/components/rendering/WaveformTrackAxes.vue +64 -51
- package/src/components/rendering/WaveformTrackBackdrop.vue +35 -49
- package/src/components/rendering/updateAxis.ts +57 -0
- package/src/components/rendering/updateGrid.ts +42 -0
- package/src/components/rendering/yAxisTickVisibility.ts +45 -18
- package/src/components/utils/assignElement.ts +7 -0
- package/src/demo/DemoYAxisPaddingControls.vue +11 -3
- package/src/demo/types.ts +2 -1
- package/src/index.ts +53 -1
- package/src/router.ts +1 -0
- package/src/types/chart.ts +4 -2
- package/src/views/AnimationDemo.vue +129 -0
- package/dist/assets/workerRuntime-5p-EI-GL.js +0 -1
package/README.md
CHANGED
|
@@ -6,6 +6,19 @@
|
|
|
6
6
|
组件使用不可变数据模型:替换 `data` 引用后会重新计算数据域和视口;大数据会按当前可见范围
|
|
7
7
|
和屏幕像素自动保峰降采样,而 tooltip、最近点查询和标注仍使用完整原始数据。
|
|
8
8
|
|
|
9
|
+
## 0.1.75:加入动画系统
|
|
10
|
+
|
|
11
|
+
本版本新增系列入场、数据更新、标注动画和分页淡入,动画默认开启。首次入场默认
|
|
12
|
+
1000ms,多系列交错100ms;数据更新、标注和分页淡入默认300ms,采用`cubicInOut`缓动。
|
|
13
|
+
切页仅淡入新页的波形、点、误差棒和标注,轴与网格立即更新;连续翻页只展示最新页。
|
|
14
|
+
|
|
15
|
+
通过`animation`、`animationUpdate`、`animationAnnotation`分别配置效果、时长、缓动和回调,
|
|
16
|
+
或设置`:animation-enabled="false"`恢复静态展示。支持31种D3缓动及公开动画引擎/预设接口。
|
|
17
|
+
总点数达到默认50,000阈值、系统启用减少动态效果或环境缺少RAF时自动静态展示。
|
|
18
|
+
动画不修改原始数据、秒坐标或受控标注;交互和图片导出先提交最终态。
|
|
19
|
+
|
|
20
|
+
详细用法见下文[动画](#动画),本次变更见[0.1.75发布说明](RELEASE_NOTES.md)。
|
|
21
|
+
|
|
9
22
|
## 在线示例
|
|
10
23
|
|
|
11
24
|
线上 Demo:[波形分析组件在线示例](https://lqycustomsite.online/waveform-analysis/)。
|
|
@@ -25,6 +38,7 @@
|
|
|
25
38
|
- 多系列图例、受控显隐、网格分页和最多四根 Y 轴
|
|
26
39
|
- 自动 Y 轴范围,以及全局、按轨道或按系列配置的固定振幅范围
|
|
27
40
|
- 按轨道控制水平/垂直网格线的显隐与颜色
|
|
41
|
+
- 系列入场、数据更新、标注动画和分页淡入,支持独立配置与静态降级
|
|
28
42
|
- 受控标注、右键编辑、拖拽避让和自定义颜色
|
|
29
43
|
- 标题、图框、坐标轴、零值参考线、净图和渲染参数可配置
|
|
30
44
|
|
|
@@ -85,50 +99,243 @@ const data = ref<WaveformData>({
|
|
|
85
99
|
父容器需要有明确高度;未指定 `width` 或 `height` 时,组件会填充父容器,并保持最小高度
|
|
86
100
|
`180px`。`WaveformChart` 的正式入口为 `src/index.ts`,样式入口为 `waveform-analysis/style.css`。
|
|
87
101
|
|
|
102
|
+
## 动画
|
|
103
|
+
|
|
104
|
+
动画默认开启:系列整体入场 1000ms(cubicInOut),多系列交错 100ms,数据更新和标注
|
|
105
|
+
300ms。这改变首次完整显示和替换数据的时机;需要即时画面时关闭:
|
|
106
|
+
|
|
107
|
+
```vue
|
|
108
|
+
<WaveformChart :data="data" :animation-enabled="false" />
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
五个 props 为 `animationEnabled`、`animation`、`animationUpdate`、`animationAnnotation`、
|
|
112
|
+
`animationThreshold`。三个配置对象按字段合并,`undefined` 使用默认,`0` 和 `false` 保留。
|
|
113
|
+
非法组件字段回退并在开发环境告警;底层引擎非法配置则在注册前抛错。
|
|
114
|
+
|
|
115
|
+
```vue
|
|
116
|
+
<WaveformChart
|
|
117
|
+
:data="data"
|
|
118
|
+
:animation="{
|
|
119
|
+
enabled: true,
|
|
120
|
+
duration: 800,
|
|
121
|
+
delay: 100,
|
|
122
|
+
staggerDelay: 50,
|
|
123
|
+
direction: 'center-out',
|
|
124
|
+
}"
|
|
125
|
+
:animation-update="{ enabled: true, duration: 300, easing: 'cubicInOut' }"
|
|
126
|
+
:animation-annotation="{ enabled: true, type: 'bounce' }"
|
|
127
|
+
:animation-threshold="50000"
|
|
128
|
+
/>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
入场支持 `left-to-right`、`right-to-left`、`center-out`;标注支持 `fade-in`、`scale`(默认)、
|
|
132
|
+
`slide-in`、`bounce`。标注效果的默认 easing 分别为 cubicOut、backOut、cubicOut、bounceOut,
|
|
133
|
+
可显式覆盖。分类 `enabled: false` 只结束该类,恢复不重播;运行中修改时长/效果只影响
|
|
134
|
+
下次任务。`duration: 0` 同步到终态并忽略该阶段的延迟/交错。
|
|
135
|
+
|
|
136
|
+
总有效规范化点数 **>= threshold** 时静态,默认 threshold=50000,0 始终静态。
|
|
137
|
+
计数包括隐藏及非当前页系列,通过 source.length 读取,不按采样点数计算。
|
|
138
|
+
系统减少动态效果、缺少 RAF 或导出期间同样静态。页面后台暂停,返回扣除后台时间。
|
|
139
|
+
|
|
140
|
+
替换 `data` 引用后,成功采样的兼容 X/线型/点型/误差结构进行数值插值;结构不兼容时
|
|
141
|
+
整体交叉淡化,第三份几何需求直接落到最新目标。失败/回退采样静态展示已有后端策略结果。
|
|
142
|
+
动画只改独立展示状态:原始数据、秒坐标、完整数据查询和受控 annotations 不受改写。
|
|
143
|
+
交互、视口命令、布局变化及 PNG/SVG 导出先提交最新最终态;导出不等待无限动画,仍遵守
|
|
144
|
+
原有 busy/stale/cancelled/timeout 错误契约和 5 秒上限。Demo `#/animation` 提供分类和效果控制。
|
|
145
|
+
|
|
146
|
+
切换分页时,新页波形、散点、误差棒和标注同步淡入,坐标轴与网格立即更新。分页复用
|
|
147
|
+
`animationUpdate`(默认 300ms、cubicInOut),关闭该类别或设置 `duration: 0` 会直接显示新页;
|
|
148
|
+
全局关闭、减少动态效果和点数阈值同样生效。连续翻页只保留最新页,不做跨页形变或重播
|
|
149
|
+
长入场动画。自动页码重置与其他布局变更仍静态处理。
|
|
150
|
+
|
|
151
|
+
### 高级数值引擎
|
|
152
|
+
|
|
153
|
+
根入口导出 `Animation`、`Animator`、`globalAnimator`、`WaveformAnimationController`、
|
|
154
|
+
所有配置/轨道/帧/句柄/调度器/预设类型,以及六个纯预设工厂。无需 D3 selection 或深路径导入。
|
|
155
|
+
`Animator` 和控制器的终态句柄保留 ID/状态;重复控制调用无操作,句柄不再持有任务、轨道目标或调度器。
|
|
156
|
+
模块导入不启动 RAF,SSR 中没有 RAF 时直接完成;注入 `AnimationScheduler` 可控制时钟、RAF、定时器。
|
|
157
|
+
|
|
158
|
+
```ts
|
|
159
|
+
import { Animation, Animator, getEasingFunction } from 'waveform-analysis'
|
|
160
|
+
|
|
161
|
+
const target = {
|
|
162
|
+
x: 0,
|
|
163
|
+
coordinates: [
|
|
164
|
+
[0, 1],
|
|
165
|
+
[1, 2],
|
|
166
|
+
],
|
|
167
|
+
}
|
|
168
|
+
const animator = new Animator()
|
|
169
|
+
const handle = animator.animate({
|
|
170
|
+
duration: 1000,
|
|
171
|
+
delay: 100,
|
|
172
|
+
direction: 'alternate',
|
|
173
|
+
loop: 2,
|
|
174
|
+
easing: 'quadInOut',
|
|
175
|
+
tracks: [{ target, property: 'x', to: 10 }],
|
|
176
|
+
during: (progress, frame) => console.log(progress, frame.iteration, frame.terminal),
|
|
177
|
+
done: () => console.log('完成'),
|
|
178
|
+
aborted: () => console.log('中止'),
|
|
179
|
+
onError: (error) => console.error(error),
|
|
180
|
+
})
|
|
181
|
+
handle.pause()
|
|
182
|
+
handle.resume()
|
|
183
|
+
handle.finish() // 方向决定最后迭代终点;abort() 保留当前值
|
|
184
|
+
animator.pauseAll()
|
|
185
|
+
animator.resumeAll()
|
|
186
|
+
animator.clear()
|
|
187
|
+
animator.destroy()
|
|
188
|
+
|
|
189
|
+
// 累加只允许一次播放及兼容数值形状;to 表示期望的新合成目标。
|
|
190
|
+
animator.animate({ tracks: [{ target, property: 'x', to: 12 }], additive: true })
|
|
191
|
+
const manual = new Animation({ force: true, loop: true, during: () => {} })
|
|
192
|
+
manual.start(0)
|
|
193
|
+
manual.tick(500)
|
|
194
|
+
manual.pause(500)
|
|
195
|
+
manual.resume(800)
|
|
196
|
+
manual.finish()
|
|
197
|
+
getEasingFunction('quartIn')(0.5) // 0.0625
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
轨道接受 number、number[]、number[][],数组每帧替换,不原地改写输入;普通轨道冲突整体
|
|
201
|
+
中止旧任务并从当前合成值接续,累加贡献完成/中止后固定,不逐帧漂移。`loop: true` 无限,
|
|
202
|
+
数字为正整数,方向还支持 normal/reverse/alternate-reverse。`force: true` 让无变化或空轨道计时,
|
|
203
|
+
不能绕过组件禁用策略。31 个缓动是 linear 加 quad/cubic/quart/quint/sine/expo/circ/back/elastic/bounce
|
|
204
|
+
的 In/Out/InOut,来自 D3,也支持自定义函数。回弹可越界,域/opacity/裁剪各自安全限幅。
|
|
205
|
+
|
|
206
|
+
### 纯预设与 owner 控制器
|
|
207
|
+
|
|
208
|
+
工厂只构造配置,注册事务成功后才初始化;零时长跳过隐藏初态。绑定只读写数值状态:
|
|
209
|
+
|
|
210
|
+
路径预设在构造时快照 `from`、`to` 和 `compatible`。修改传入对象不会改变已构造配置的
|
|
211
|
+
端点或过渡模式;下一次构造配置时才使用新值。
|
|
212
|
+
|
|
213
|
+
```ts
|
|
214
|
+
import {
|
|
215
|
+
Animator,
|
|
216
|
+
WaveformAnimationController,
|
|
217
|
+
createLineDrawingAnimation,
|
|
218
|
+
createStaggeredLineDrawingAnimations,
|
|
219
|
+
createPathTransitionAnimation,
|
|
220
|
+
createYAxisScaleAnimation,
|
|
221
|
+
createAnnotationAppearAnimation,
|
|
222
|
+
createAnnotationDisappearAnimation,
|
|
223
|
+
} from 'waveform-analysis'
|
|
224
|
+
import type { AnnotationAnimationState, ClipAnimationState } from 'waveform-analysis'
|
|
225
|
+
|
|
226
|
+
let clip: ClipAnimationState = { x: 0, width: 100 }
|
|
227
|
+
const clipBinding = {
|
|
228
|
+
read: () => clip,
|
|
229
|
+
write: (value: ClipAnimationState) => {
|
|
230
|
+
clip = value
|
|
231
|
+
},
|
|
232
|
+
}
|
|
233
|
+
let style: AnnotationAnimationState = { opacity: 1, scale: 1, offsetY: 0 }
|
|
234
|
+
const styleBinding = {
|
|
235
|
+
read: () => style,
|
|
236
|
+
write: (value: AnnotationAnimationState) => {
|
|
237
|
+
style = value
|
|
238
|
+
},
|
|
239
|
+
}
|
|
240
|
+
let domain: [number, number] = [0, 100]
|
|
241
|
+
const domainBinding = {
|
|
242
|
+
read: () => domain,
|
|
243
|
+
write: (value: [number, number]) => {
|
|
244
|
+
domain = value
|
|
245
|
+
},
|
|
246
|
+
}
|
|
247
|
+
const animator = new Animator()
|
|
248
|
+
animator.animate(createLineDrawingAnimation(clipBinding, 100))
|
|
249
|
+
createStaggeredLineDrawingAnimations([{ binding: clipBinding, width: 100 }], { staggerDelay: 50 })
|
|
250
|
+
animator.animate(
|
|
251
|
+
createPathTransitionAnimation(
|
|
252
|
+
{
|
|
253
|
+
from: { points: [[0, 1]] },
|
|
254
|
+
to: { points: [[0, 2]] },
|
|
255
|
+
compatible: true,
|
|
256
|
+
},
|
|
257
|
+
(frame) => {
|
|
258
|
+
if (frame.kind === 'settled') console.log(frame.values) // 释放旧几何后再通知完成
|
|
259
|
+
},
|
|
260
|
+
),
|
|
261
|
+
)
|
|
262
|
+
animator.animate(createYAxisScaleAnimation(domainBinding, [49, 51], { easing: 'backOut' }))
|
|
263
|
+
animator.animate(createAnnotationAppearAnimation(styleBinding, { type: 'scale' }))
|
|
264
|
+
animator.animate(createAnnotationDisappearAnimation(styleBinding, { type: 'fade-in' }))
|
|
265
|
+
|
|
266
|
+
const controller = new WaveformAnimationController({
|
|
267
|
+
animator,
|
|
268
|
+
commitFinalState: () => {
|
|
269
|
+
clip = { x: 0, width: 100 }
|
|
270
|
+
},
|
|
271
|
+
})
|
|
272
|
+
controller.animateSeriesEnter('signal', clipBinding, 100)
|
|
273
|
+
controller.animateAnnotationAppear('note', styleBinding)
|
|
274
|
+
controller.pauseAll()
|
|
275
|
+
controller.resumeAll()
|
|
276
|
+
controller.cancel({ kind: 'annotation', id: 'note', scope: 'enter' })
|
|
277
|
+
controller.finishAll() // 移除 owner 任务,提交最新业务目标,然后通知 done
|
|
278
|
+
controller.destroy() // 仅清理此 owner,不销毁共享 animator
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
控制器还提供 `animateMultiSeriesEnter`、`animateDataUpdate`、`animateYAxisScale`、
|
|
282
|
+
`animateAnnotationDisappear`、通用 `animate(key, config)`、`cancelAll`、`setEnabled` 和
|
|
283
|
+
`getActiveAnimationCount`。key 包含对象 kind/id/scope;不同控制器同 ID 隔离。
|
|
284
|
+
批量结束期间同 owner 重入创建抛 `animation-terminating`;销毁后抛 `animation-disposed`。
|
|
285
|
+
完成通知可同步读取最终展示数据,DOM 查询需要 `await nextTick()`。
|
|
286
|
+
|
|
287
|
+
真实浏览器基准运行 `pnpm test:animation:browser`(首次需 `pnpm exec playwright install chromium`),
|
|
288
|
+
输出 OpenSpec evidence 目录。FPS/内存/gzip 是实测优化目标,不能由 jsdom 测试证明,
|
|
289
|
+
跨浏览器和移动设备结论只覆盖实际可用环境。
|
|
290
|
+
大点数更新和交叉淡化可能增加浏览器物理内存;原 10/20MB 优化目标尚未达到。
|
|
291
|
+
对内存敏感的应用可降低 `animationThreshold` 或关闭对应动画类别;卸载清理与几何数量限制
|
|
292
|
+
不等于跨设备的绝对内存上限。实际测量及验收条件见
|
|
293
|
+
[动画验收记录](openspec/changes/add-animation-system/evidence/final-acceptance-verification.json)。
|
|
294
|
+
|
|
88
295
|
## API 速查
|
|
89
296
|
|
|
90
297
|
### Props
|
|
91
298
|
|
|
92
|
-
| Prop | 类型
|
|
93
|
-
| -------------------------- |
|
|
94
|
-
| `data` | `WaveformData`
|
|
95
|
-
| `displayMode` | `'independent' \| 'separated' \| 'compact'`
|
|
96
|
-
| `overlayMode` | `'single-axis' \| 'multi-axis'`
|
|
97
|
-
| `layoutPreset` | `'default' \| 'edge-compact'`
|
|
299
|
+
| Prop | 类型 | 默认值 | 说明 |
|
|
300
|
+
| -------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------- |
|
|
301
|
+
| `data` | `WaveformData` | 必填 | 波形数据 |
|
|
302
|
+
| `displayMode` | `'independent' \| 'separated' \| 'compact'` | `'independent'` | 图框布局 |
|
|
303
|
+
| `overlayMode` | `'single-axis' \| 'multi-axis'` | `'single-axis'` | 叠加曲线的 Y 轴模式 |
|
|
304
|
+
| `layoutPreset` | `'default' \| 'edge-compact'` | `'default'` | 标题贴边、时间标签与响应式分页布局 |
|
|
98
305
|
| `unitDisplayMode` | `'axis' \| 'legend-single-series' \| 'channel-label' \| 'channel-label-or-legend'` | `'axis'` | 可选的图表级单位展示规则 |
|
|
99
|
-
| `timeUnit` | `'s' \| 'ms'`
|
|
100
|
-
| `xLabel` / `yLabel` | `string`
|
|
101
|
-
| `lineColor` | `string`
|
|
102
|
-
| `width` / `height` | `number`
|
|
103
|
-
| `zoomable` / `showTooltip` | `boolean`
|
|
104
|
-
| `pannable` | `boolean`
|
|
105
|
-
| `panXDomain` | `[number, number]`
|
|
106
|
-
| `minZoomSpan` | `number`
|
|
107
|
-
| `integerZoom` | `boolean`
|
|
108
|
-
| `minVisiblePoints` | `number`
|
|
109
|
-
| `maxZoomScale` | `number \| null`
|
|
110
|
-
| `initialXDomain` | `[number, number]`
|
|
111
|
-
| `initialXDomains` | `Record<string, [number, number]>`
|
|
112
|
-
| `xDomainStrategy` | `WaveformXDomainStrategy`
|
|
113
|
-
| `yDomain` | `[number, number]`
|
|
114
|
-
| `yDomains` | `Record<string, [number, number]>`
|
|
115
|
-
| `grid` | `WaveformGridOptions`
|
|
116
|
-
| `axes` | `WaveformAxesOptions`
|
|
117
|
-
| `rendering` | `WaveformRenderingOptions`
|
|
118
|
-
| `plotMargin` | `WaveformPlotMargin`
|
|
119
|
-
| `title` / `frameStyle` | 对应公开类型
|
|
120
|
-
| `legend` | `WaveformLegendOptions`
|
|
121
|
-
| `frameNumber` | `string \| number`
|
|
122
|
-
| `frameNumbers` | `Record<string, string \| number>`
|
|
123
|
-
| `zeroLine` | `WaveformZeroLineOptions`
|
|
124
|
-
| `cleanView` | `boolean`
|
|
125
|
-
| `presentationMode` | `boolean`
|
|
126
|
-
| `annotations` | `WaveformAnnotation[]`
|
|
127
|
-
| `annotationsVisible` | `boolean`
|
|
128
|
-
| `interactionMode` | `'zoom' \| 'pan' \| 'annotation' \| 'none'`
|
|
129
|
-
| `hiddenSeriesIds` | `string[]`
|
|
130
|
-
| `defaultHiddenSeriesIds` | `string[]`
|
|
131
|
-
| `toolbar` | `boolean \| WaveformToolbarOptions`
|
|
306
|
+
| `timeUnit` | `'s' \| 'ms'` | `'ms'` | 坐标轴和 tooltip 展示单位 |
|
|
307
|
+
| `xLabel` / `yLabel` | `string` | `时间(timeUnit)` / `'幅值'` | 坐标轴名称 |
|
|
308
|
+
| `lineColor` | `string` | `'#0960bd'` | 单波形默认颜色 |
|
|
309
|
+
| `width` / `height` | `number` | 自适应 | 组件总尺寸,单位为 CSS 像素 |
|
|
310
|
+
| `zoomable` / `showTooltip` | `boolean` | `true` / `true` | 缩放和数值 tooltip 开关 |
|
|
311
|
+
| `pannable` | `boolean` | `false` | 空格拖拽平移开关 |
|
|
312
|
+
| `panXDomain` | `[number, number]` | 未设置 | 远端横向平移边界,使用秒坐标 |
|
|
313
|
+
| `minZoomSpan` | `number` | 未设置 | 最小缩放跨度,使用原始 X 数据单位 |
|
|
314
|
+
| `integerZoom` | `boolean` | `false` | 缩放范围按 X 轴显示单位对齐整数 |
|
|
315
|
+
| `minVisiblePoints` | `number` | `0` | 缩放后至少保留的不同 X 坐标数 |
|
|
316
|
+
| `maxZoomScale` | `number \| null` | 未设置 | 最大缩放倍数;`null` 表示不限制 |
|
|
317
|
+
| `initialXDomain` | `[number, number]` | 未设置 | 所有图框的初始 X 范围(可超出数据,空白显示) |
|
|
318
|
+
| `initialXDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置初始范围(可超出数据) |
|
|
319
|
+
| `xDomainStrategy` | `WaveformXDomainStrategy` | `{ type: 'integer-ms' }` | 自动 X 轴视口范围策略 |
|
|
320
|
+
| `yDomain` | `[number, number]` | 未设置 | 所有波形的固定 Y 轴范围 |
|
|
321
|
+
| `yDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置固定范围 |
|
|
322
|
+
| `grid` | `WaveformGridOptions` | `{ rowCount: 2, columnCount: 1, showPagination: true, fillIncompleteLastRow: false }` | 网格和分页 |
|
|
323
|
+
| `axes` | `WaveformAxesOptions` | 轴线均显示 | X/Y 轴基线、Y 轴分割数与 X 轴 label 格式化 |
|
|
324
|
+
| `rendering` | `WaveformRenderingOptions` | `{}` | 降采样与点/误差棒间距 |
|
|
325
|
+
| `plotMargin` | `WaveformPlotMargin` | `{ top: 18, bottom: 52 }` | 绘图区上下边距,单位为 CSS 像素 |
|
|
326
|
+
| `title` / `frameStyle` | 对应公开类型 | 未设置 | 标题和图框样式 |
|
|
327
|
+
| `legend` | `WaveformLegendOptions` | `{ position: 'top-right', orientation: 'auto' }` | 图例位置、排列、背景和交互 |
|
|
328
|
+
| `frameNumber` | `string \| number` | 未设置 | 图框水印内容 |
|
|
329
|
+
| `frameNumbers` | `Record<string, string \| number>` | 未设置 | 按 `trackId` 覆盖图框水印内容 |
|
|
330
|
+
| `zeroLine` | `WaveformZeroLineOptions` | `{ visible: false }` | 零值参考线显隐与样式 |
|
|
331
|
+
| `cleanView` | `boolean` | `false` | 保留波形、图框和刻度的净图模式 |
|
|
332
|
+
| `presentationMode` | `boolean` | `false` | 禁用绘图区交互的展示模式 |
|
|
333
|
+
| `annotations` | `WaveformAnnotation[]` | `[]` | 受控标注数据 |
|
|
334
|
+
| `annotationsVisible` | `boolean` | `true` | 标注图层显隐 |
|
|
335
|
+
| `interactionMode` | `'zoom' \| 'pan' \| 'annotation' \| 'none'` | `'zoom'` | 左键模式;传入时由宿主控制 |
|
|
336
|
+
| `hiddenSeriesIds` | `string[]` | 未设置 | 受控隐藏系列 ID |
|
|
337
|
+
| `defaultHiddenSeriesIds` | `string[]` | `[]` | 非受控模式的初始隐藏系列 |
|
|
338
|
+
| `toolbar` | `boolean \| WaveformToolbarOptions` | `false` | 内置工具栏配置 |
|
|
132
339
|
|
|
133
340
|
所有公开类型均可从包入口导入,例如 `WaveformData`、`WaveformSeries`、`TypedSampleData`、
|
|
134
341
|
`TypedPointData`、`WaveformAnnotation`、`WaveformLineStyle`、`WaveformRenderingOptions`、
|
|
@@ -519,9 +726,9 @@ const chartData = {
|
|
|
519
726
|
多值轴模式的右侧 Y 轴将指数放在数值右侧,例如 `3 E+03`,不追加单位;不使用科学计数法时显示为 `3 (V)`。
|
|
520
727
|
多 Y 轴模式下,每根轴使用该轴首个 series 的单位。
|
|
521
728
|
|
|
522
|
-
左侧通道名称使用 12px、字重 600
|
|
523
|
-
|
|
524
|
-
|
|
729
|
+
左侧通道名称使用 12px、字重 600 的加粗文字。名称间距按该 Y 轴最长的刻度标签计算,
|
|
730
|
+
包含最值刻度及实际显示的单位,不随名称长度或图框高度变化;科学计数法倍率不参与
|
|
731
|
+
名称间距计算,倍率后的数值仍参与计算;轴外留白按完整刻度标签(含倍率)计算,防止越界。同一列中相同轴位使用逐道计算的最大间距,保证多道名称垂直对齐。
|
|
525
732
|
图框高度不足 80px 时也不会隔道隐藏名称;例如 5×1 布局中,每个符合名称展示规则的图框
|
|
526
733
|
仍显示完整通道名称,允许长名称互相重叠。净图模式及单位展示模式的显隐规则仍然生效。
|
|
527
734
|
|
|
@@ -1299,13 +1506,15 @@ const axes: WaveformAxesOptions = {
|
|
|
1299
1506
|
nice 在添加留白后执行,可能进一步扩域,关闭留白不等于关闭 nice。
|
|
1300
1507
|
常量沿用非零范围回退后计算跨度;误差棒开启时包含其端点;单轴合并范围,多轴分别计算。
|
|
1301
1508
|
|
|
1302
|
-
`axes.y.
|
|
1303
|
-
|
|
1509
|
+
`axes.y.maximumTickVisible` 和 `axes.y.minimumTickVisible` 分别控制原始最大值、最小值的
|
|
1510
|
+
额外刻度线和标签,默认都为 `true`。两个开关与上下留白独立,设为 `false` 隐藏对应的
|
|
1511
|
+
额外最值刻度;关闭留白后仍显示域内已开启的最值。
|
|
1304
1512
|
普通等距刻度不受开关影响,即使某个普通刻度恰好等于最值,也仍正常显示。
|
|
1305
1513
|
支持响应式切换,不改变数据、Y 轴范围、缩放视口或 tooltip。
|
|
1306
1514
|
|
|
1307
1515
|
```vue
|
|
1308
|
-
|
|
1516
|
+
<!-- 只显示最大值的额外刻度 -->
|
|
1517
|
+
<WaveformChart :axes="{ y: { maximumTickVisible: true, minimumTickVisible: false } }" />
|
|
1309
1518
|
```
|
|
1310
1519
|
|
|
1311
1520
|
常量标记仍为原始值且最大值、最小值合并为一个刻度,误差棒开启时极值包含其端点。
|
|
@@ -1314,4 +1523,5 @@ nice 在添加留白后执行,可能进一步扩域,关闭留白不等于关
|
|
|
1314
1523
|
最小值与最大值标签重叠时优先保留最小值。手动视口或固定范围中仅显示域内的极值,
|
|
1315
1524
|
不会为显示最值而扩展范围。同轴取可见系列的共同最值,多轴分别计算,使用完整原始数据。
|
|
1316
1525
|
Demo 的“Y 轴留白”配置区默认显式启用上下各 10%,与组件省略配置时的默认值不同;
|
|
1317
|
-
|
|
1526
|
+
“显示最大值刻度”和“显示最小值刻度”默认都开启,可分别切换。
|
|
1527
|
+
原 `extremaTicksVisible` 总开关已移除,请改用上述两个独立配置项。
|