diff --git a/README.md b/README.md index 31a5e29..0bc6036 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ 基于 Vue 3、TypeScript 和 D3 的响应式 SVG 波形图组件。适合展示单通道、多通道和大规模采样 数据,内置缩放、tooltip、图例、误差棒、标注、分页和多 Y 轴叠加。 +当前稳定版本:`v0.1.15`。 + 组件使用不可变数据模型:替换 `data` 引用后会重新计算数据域和视口;大数据会按当前可见范围 和屏幕像素自动保峰降采样,而 tooltip、最近点查询和标注仍使用完整原始数据。 @@ -16,18 +18,16 @@ - 采样值、显式坐标点和多系列数据模型 - `independent`、`separated`、`compact` 三种布局模式 - 曲线、阶梯线、点符号和对称/非对称误差棒 +- 实线、虚线和点划线,可按系列独立配置 - 缩放过程事件、缩放结束按可视区间加载和视口重置 +- 可选的空格拖拽平移,默认关闭并隔离多图表实例 - 多系列图例、受控显隐、网格分页和最多四根 Y 轴 +- 按轨道控制水平/垂直网格线的显隐与颜色 - 受控标注、右键编辑、拖拽避让和自定义颜色 -- 标题、图框、坐标轴、时间单位和降采样参数可配置 +- 标题、图框、坐标轴、零值参考线、净图和渲染参数可配置 ## 安装 -```bash -pnpm install -pnpm dev -``` - 组件库将 Vue、D3、Ant Design Vue 和 vue3-colorpicker 作为 peer dependency;直接安装到业务项目时请一并 安装这些依赖: @@ -39,12 +39,14 @@ pnpm add waveform-analysis vue d3 ant-design-vue vue3-colorpicker 组件库支持以下运行时版本: -| 依赖 | 支持版本 | -| -------------- | ------------- | -| Vue | `>=3.2.33 <4` | -| Ant Design Vue | `>=3.2.20 <4` | +| 依赖 | 支持版本 | +| ---------------- | ------------- | +| Vue | `>=3.2.33 <4` | +| Ant Design Vue | `>=3.2.20 <4` | +| D3 | `>=7.9.0 <8` | +| vue3-colorpicker | `>=2.3.0 <3` | -安装时请确保业务项目中的 Vue 与 Ant Design Vue 版本满足上述范围。 +安装时请确保业务项目中的 peer dependency 版本均满足上述范围。 ## 发布 @@ -96,24 +98,30 @@ const data = ref({ | `displayMode` | `'independent' \| 'separated' \| 'compact'` | `'independent'` | 图框布局 | | `overlayMode` | `'single-axis' \| 'multi-axis'` | `'single-axis'` | 叠加曲线的 Y 轴模式 | | `timeUnit` | `'s' \| 'ms'` | `'ms'` | 坐标轴和 tooltip 展示单位 | +| `xLabel` / `yLabel` | `string` | `时间(timeUnit)` / `'幅值'` | 坐标轴名称 | +| `lineColor` | `string` | `'#0960bd'` | 单波形默认颜色 | | `width` / `height` | `number` | 自适应 | 组件总尺寸,单位为 CSS 像素 | | `zoomable` / `showTooltip` | `boolean` | `true` / `true` | 缩放和数值 tooltip 开关 | | `pannable` | `boolean` | `false` | 空格拖拽平移开关 | | `minZoomSpan` | `number` | 未设置 | 最小缩放跨度,使用原始 X 数据单位 | +| `minVisiblePoints` | `number` | `0` | 缩放后至少保留的不同 X 坐标数 | | `initialXDomain` | `[number, number]` | 未设置 | 所有图框的初始 X 范围 | | `initialXDomains` | `Record` | 未设置 | 按 track/series ID 配置初始范围 | | `grid` | `WaveformGridOptions` | `{ rowCount: 2, columnCount: 1, showPagination: true }` | 网格和分页 | | `rendering` | `WaveformRenderingOptions` | `{}` | 降采样与点/误差棒间距 | | `title` / `legend` / `frameStyle` | 对应公开类型 | 未设置 | 标题、图例和图框样式 | +| `frameNumber` | `string \| number` | 未设置 | 图框水印内容 | | `zeroLine` | `WaveformZeroLineOptions` | `{ visible: false }` | 零值参考线显隐与样式 | | `cleanView` | `boolean` | `false` | 仅保留波形的净图模式 | | `annotations` | `WaveformAnnotation[]` | `[]` | 受控标注数据 | +| `annotationsVisible` | `boolean` | `true` | 标注图层显隐 | +| `interactionMode` | `'zoom' \| 'annotation'` | `'zoom'` | 左键交互模式 | | `hiddenSeriesIds` | `string[]` | 未设置 | 受控隐藏系列 ID | | `defaultHiddenSeriesIds` | `string[]` | `[]` | 非受控模式的初始隐藏系列 | 所有公开类型均可从包入口导入,例如 `WaveformData`、`WaveformSeries`、 -`WaveformAnnotation`、`WaveformRenderingOptions`、`WaveformZeroLineOptions` 和 -`WaveformGridOptions`。 +`WaveformAnnotation`、`WaveformLineStyle`、`WaveformRenderingOptions`、 +`WaveformZeroLineOptions`、`WaveformGridOptions` 和 `WaveformGridTrackLines`。 ### 数据结构 @@ -157,7 +165,8 @@ const chartData: WaveformData = { ```vue