feat(chart): add series styling and visibility controls

This commit is contained in:
李启源
2026-07-20 17:57:52 +08:00
parent c9e4dae25f
commit efb685646a
31 changed files with 2356 additions and 209 deletions

View File

@@ -50,6 +50,36 @@ import { WaveformChart } from './index'
多通道数据应为每个 `WaveformSeries` 提供稳定的 `id`。内部时间坐标始终使用秒,
`timeUnit` 只控制坐标轴和 tooltip 的显示单位。
### 线型、点型与误差棒
每条序列可以独立设置连线方式、数据点符号和误差棒:
```ts
const series = {
id: 'temperature',
name: '温度',
lineType: 'step-end',
pointType: 'circle',
errorBar: { visible: true, width: 1.5, capWidth: 8 },
data: {
kind: 'points',
points: [
{ x: 0, y: 12, error: 0.5 },
{ x: 1, y: 15, lowerError: 0.4, upperError: 0.8 },
],
},
} satisfies WaveformSeries
```
`lineType` 支持 `none``linear``step-start``step-middle``step-end`;兼容值
`step-after``step-end` 等价。三个阶梯值分别在区间起点、中点和终点跳变。`pointType`
支持 `none``circle``square``triangle``diamond`。默认使用普通直线且不显示数据点;
设置 `lineType: 'none'` 可以隐藏数据点之间的连接线,只保留点符号和误差棒;将其改为
`linear` 或阶梯类型即可同时显示对应连接线。误差棒仅在 `errorBar.visible``true` 时显示,
并参与 Y 轴范围计算;当误差棒可见时,`lineType``pointType` 可以同时为 `none`,用于展示
纯误差棒。只有连接线、点符号和误差棒全部关闭时才会回退为普通直线。`lowerError`
`upperError` 分别覆盖对称的 `error`,图例会同步显示实际线型、点型和误差棒样式。
### 叠加与多值轴
为多条曲线设置相同的 `trackId`,可将它们叠加到同一图框。`overlayMode` 控制叠加
@@ -166,23 +196,38 @@ Demo 左侧控制面板提供标题实时预览,可配置标题名称、显隐
对应的公开类型为 `WaveformFrameStyle`。默认边框颜色为 `#1f2937`、线宽为 `1`、线型为
`solid`,背景透明。`borderWidth``0` 时隐藏边框;非有限值或负数会回退到默认线宽。
### 图例样式
### 图例与曲线显隐
`legend.backgroundColor` 设置多曲线图例的背景颜色。该字段接受任意有效 CSS 颜色值,
可通过 `rgba(...)``hsla(...)` 中的 alpha 通道调整透明度:
```vue
<script setup lang="ts">
import { ref } from 'vue'
const hiddenSeriesIds = ref<string[]>([])
</script>
<WaveformChart
:data="chartData"
v-model:hidden-series-ids="hiddenSeriesIds"
:legend="{
position: 'top-right',
orientation: 'auto',
backgroundColor: 'rgba(255, 255, 255, 0.45)',
interactive: true,
}"
/>
```
未配置或传入空字符串时,图例背景默认使用 `rgba(255, 255, 255, 0.7)`
`legend.interactive` 默认为 `false`;开启后可以单击或使用键盘操作图例项切换曲线显隐。
调用方可通过 `hiddenSeriesIds``update:hidden-series-ids` 控制状态,也可使用
`defaultHiddenSeriesIds` 设置非受控模式的初始隐藏项。隐藏状态同步作用于坐标轴、tooltip、
悬浮点和标注交互;允许隐藏全部曲线,并可通过保留的图例恢复显示。
显隐状态以规范化后的 `series.id` 为键。要在数据刷新和重新排序后稳定保留状态,每个系列都应
提供全图唯一且稳定的显式 `id`;自动生成的索引 ID 或重复 ID 添加的后缀不保证跨排序稳定。
## 大数据渲染
@@ -198,11 +243,20 @@ Demo 左侧控制面板提供标题实时预览,可配置标题名称、显隐
downsample: true,
downsampleThreshold: 2000,
maxPointsPerPixel: 4,
pointMinSpacing: 10,
errorBarMinSpacing: 12,
}"
/>
```
降采样仅作用于 SVG path。最近点查询、tooltip、标注插值和受控数据不会损失精度。
全量视图只绘制均匀分布的真实数据点,放大后会自动恢复更多源标记。`pointMinSpacing`
`errorBarMinSpacing` 分别控制点符号和误差棒的最小水平间距,单位为 CSS 像素。两者同时
显示时共用一批采样点,并采用两个间距中的较大值,确保误差棒与对应点符号保持共心;仅显示
一类装饰时仍使用各自的间距。仅显示一类装饰时可将对应间距设为 `0`;两者同时显示时需将
两个间距都设为 `0` 才会关闭共同限制。设置 `downsample: false` 会关闭曲线和装饰的全部降采样。
降采样仅作用于 SVG 中的曲线、点符号和误差棒。点符号和误差棒在每个系列中分别合并为
单个 SVG path最近点查询、tooltip、标注插值、Y 轴误差范围和受控数据不会损失精度。
## 采样点标注