feat(chart): add axis and dotted frame controls
All checks were successful
Package component / package (push) Successful in 5m34s

This commit is contained in:
liqiyuan
2026-07-22 21:22:26 +08:00
parent c258c11795
commit 3ed17eb061
13 changed files with 228 additions and 17 deletions

View File

@@ -108,6 +108,7 @@ const data = ref<WaveformData>({
| `initialXDomain` | `[number, number]` | 未设置 | 所有图框的初始 X 范围 |
| `initialXDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置初始范围 |
| `grid` | `WaveformGridOptions` | `{ rowCount: 2, columnCount: 1, showPagination: true }` | 网格和分页 |
| `axes` | `WaveformAxesOptions` | 轴线均显示 | X/Y 轴基线显隐 |
| `rendering` | `WaveformRenderingOptions` | `{}` | 降采样与点/误差棒间距 |
| `title` / `legend` / `frameStyle` | 对应公开类型 | 未设置 | 标题、图例和图框样式 |
| `frameNumber` | `string \| number` | 未设置 | 图框水印内容 |
@@ -121,7 +122,8 @@ const data = ref<WaveformData>({
所有公开类型均可从包入口导入,例如 `WaveformData``WaveformSeries`
`WaveformAnnotation``WaveformLineStyle``WaveformRenderingOptions`
`WaveformZeroLineOptions``WaveformGridOptions` `WaveformGridTrackLines`
`WaveformAxesOptions``WaveformZeroLineOptions``WaveformGridOptions`
`WaveformGridTrackLines`
### 数据结构
@@ -340,6 +342,8 @@ Demo 左侧控制面板提供标题实时预览,可配置标题名称、显隐
/>
```
`frameStyle.borderStyle` 支持 `solid`(实线)、`dashed`(虚线)和 `dotted`(点虚线)。
对应的公开类型为 `WaveformFrameStyle`。默认边框颜色为 `#1f2937`、线宽为 `1`、线型为
`solid`,背景透明。`borderWidth``0` 时隐藏边框;非有限值或负数会回退到默认线宽。
@@ -441,6 +445,29 @@ tooltip 仍然可用,切换回普通模式后原有配置和标注不会丢失
/>
```
`axes` 可以分别隐藏 X/Y 轴的基线,同时保留刻度短线、刻度数字、科学计数倍率、单位和轴标题。
与关闭网格线、设置 `frameStyle` 组合后,可以只使用图框边框围住绘图区:
```vue
<WaveformChart
:data="chartData"
:axes="{
x: { lineVisible: false },
y: { lineVisible: false },
}"
:grid="{
trackLines: {
voltage: { horizontal: false, vertical: false },
},
}"
:frame-style="{
borderColor: '#1f2937',
borderWidth: 1,
borderStyle: 'solid',
}"
/>
```
`interactionMode` 可选 `zoom``annotation`,默认使用缩放模式。右键绘图区可直接打开
标注编辑器,无需切换交互模式。`zoomable``pannable``showTooltip` 可分别控制缩放、
空格拖拽平移和 tooltip平移默认关闭。