feat(chart): add series styling and visibility controls

README.md

@@ -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 轴误差范围和受控数据不会损失精度。
 
 ## 采样点标注
 

src/App.test.ts

@@ -5,7 +5,7 @@ import { ColorPicker } from 'vue3-colorpicker'
 
 import App from './App.vue'
 
-describe('App workspace layout', () => {
+describe('App workspace layout', { timeout: 20_000 }, () => {
   it('places controls in the sidebar beside the chart', async () => {
     const wrapper = mount(App)
     await flushPromises()
@@ -64,22 +64,95 @@ describe('App workspace layout', () => {
     wrapper.unmount()
   })
 
-  it('renders three additional sample series in the first frame', async () => {
+  it('renders the requested point-only and line-only examples in the first frame', async () => {
     const wrapper = mount(App)
     await flushPromises()
 
-    const firstFrameLines = wrapper
-      .get('.waveform-chart__track[data-track-index="0"]')
-      .findAll('.waveform-chart__line')
+    const firstFrame = wrapper.get('.waveform-chart__track[data-track-index="0"]')
+    const firstFrameSeries = firstFrame.findAll('.waveform-chart__series')
 
-    expect(firstFrameLines.map((line) => line.attributes('data-series-name'))).toEqual([
+    expect(firstFrameSeries.map((series) => series.attributes('data-series-name'))).toEqual([
       'BT2_2M',
       'TEST_CH_1',
       'TEST_CH_3',
       'TEST_CH_4',
       'TEST_CH_5',
+      '纯点无线',
+      '纯线无点',
     ])
 
+    const pointsOnlySeries = firstFrame.get('.waveform-chart__series[data-series-name="纯点无线"]')
+    expect(pointsOnlySeries.find('.waveform-chart__line').exists()).toBe(false)
+    expect(pointsOnlySeries.get('.waveform-chart__points').attributes('data-point-type')).toBe(
+      'circle',
+    )
+
+    const testChannelFour = firstFrame.get('.waveform-chart__series[data-series-name="TEST_CH_4"]')
+    expect(testChannelFour.get('.waveform-chart__line').attributes('data-line-type')).toBe('linear')
+    expect(testChannelFour.get('.waveform-chart__points').attributes('data-point-type')).toBe(
+      'circle',
+    )
+    expect(testChannelFour.find('.waveform-chart__error-bars').exists()).toBe(false)
+
+    const lineOnlySeries = firstFrame.get('.waveform-chart__series[data-series-name="纯线无点"]')
+    expect(lineOnlySeries.get('.waveform-chart__line').attributes('data-line-type')).toBe('linear')
+    expect(lineOnlySeries.find('.waveform-chart__points').exists()).toBe(false)
+
+    const triangleSeries = firstFrame.get('.waveform-chart__series[data-series-name="BT2_2M"]')
+    expect(triangleSeries.find('.waveform-chart__line').exists()).toBe(false)
+    expect(triangleSeries.get('.waveform-chart__points').attributes('data-point-type')).toBe(
+      'triangle',
+    )
+    expect(triangleSeries.get('.waveform-chart__error-bar').attributes('stroke')).toBe('#0960bd')
+
+    const triangleLegendItem = firstFrame
+      .findAll('.waveform-chart__legend-item')
+      .find((item) => item.text().includes('BT2_2M'))
+    expect(triangleLegendItem).toBeDefined()
+    const triangleSwatch = triangleLegendItem!.get('.waveform-legend__swatch')
+    expect(triangleSwatch.find('.waveform-legend__line').exists()).toBe(false)
+    expect(triangleSwatch.get('.waveform-legend__error-bar').attributes()).toMatchObject({
+      d: 'M9 2H17M13 2V14M9 14H17',
+      stroke: '#0960bd',
+      'stroke-width': '1.5',
+    })
+    expect(triangleSwatch.get('.waveform-legend__point').attributes()).toMatchObject({
+      fill: '#0960bd',
+      transform: 'translate(13 8)',
+    })
+
+    wrapper.unmount()
+  })
+
+  it('renders the three ECharts-style step modes in frame two', async () => {
+    const wrapper = mount(App)
+    await flushPromises()
+
+    const secondFrame = wrapper.get('.waveform-chart__track[data-track-index="1"]')
+    const series = secondFrame.findAll('.waveform-chart__series')
+    expect(series.map((item) => item.attributes('data-series-name'))).toEqual([
+      'Step Start',
+      'Step Middle',
+      'Step End',
+    ])
+    expect(
+      secondFrame.findAll('.waveform-chart__line').map((line) => line.attributes('data-line-type')),
+    ).toEqual(['step-start', 'step-middle', 'step-end'])
+    expect(secondFrame.findAll('.waveform-chart__points')).toHaveLength(3)
+    const legendItems = secondFrame.findAll('.waveform-chart__legend-item')
+    expect(legendItems).toHaveLength(3)
+    expect(legendItems.map((item) => item.get('.waveform-legend__line').attributes('d'))).toEqual([
+      'M1 8H25',
+      'M1 8H25',
+      'M1 8H25',
+    ])
+    expect(
+      legendItems.map((item) => item.get('.waveform-legend__point').attributes('fill')),
+    ).toEqual(['#5470c6', '#91cc75', '#505372'])
+    expect(
+      legendItems.map((item) => item.get('.waveform-legend__point').attributes('transform')),
+    ).toEqual(['translate(13 8)', 'translate(13 8)', 'translate(13 8)'])
+
     wrapper.unmount()
   })
 

src/App.vue

@@ -77,6 +77,7 @@ const interactionMode = ref<WaveformInteractionMode>('zoom')
 const legendPosition = ref<WaveformLegendPosition>('top-right')
 const legendOrientation = ref<WaveformLegendOrientation>('auto')
 const legendBackgroundColor = ref('rgba(255, 255, 255, 0.7)')
+const hiddenSeriesIds = ref<string[]>([])
 const titleVisible = ref(true)
 const titleText = ref(`Shot:${sourceRows[0]?.shot ?? 4712}`)
 const titleAlign = ref<NonNullable<WaveformTitleOptions['align']>>('center')
@@ -129,8 +130,20 @@ const frameStyle = computed<WaveformFrameStyle>(() => ({
   backgroundColor: frameBackgroundColor.value,
 }))
 
-const waveformSeries: WaveformSeries[] = sourceRows.map((row) => {
+const seriesStylePresets: Array<Pick<WaveformSeries, 'lineType' | 'pointType' | 'errorBar'>> = [
+  { lineType: 'none', pointType: 'triangle', errorBar: { visible: true } },
+  { lineType: 'linear', pointType: 'none' },
+  { lineType: 'step-after', pointType: 'circle', errorBar: { visible: true } },
+  { lineType: 'linear', pointType: 'diamond', errorBar: { visible: true } },
+]
+
+const waveformSeries: WaveformSeries[] = sourceRows.map((row, seriesIndex) => {
   const pointCount = Math.min(row.time.length, row.data.length)
+  const presetStyle = seriesStylePresets[seriesIndex % seriesStylePresets.length]!
+  const style: Pick<WaveformSeries, 'lineType' | 'pointType' | 'errorBar'> =
+    row.chnl === 'TEST_CH_4'
+      ? { lineType: 'linear', pointType: 'circle', errorBar: { visible: false } }
+      : presetStyle
   return {
     id: String(row.chnl_id),
     trackId:
@@ -139,17 +152,107 @@ const waveformSeries: WaveformSeries[] = sourceRows.map((row) => {
         : undefined,
     name: row.chnl,
     unit: row.dat_unit,
+    ...style,
     data: {
       kind: 'points',
-      points: Array.from({ length: pointCount }, (_, index) => ({
+      points: Array.from({ length: pointCount }, (_, index) => {
+        const y = row.data[index]
+        const error = Math.max(Math.abs(y) * 0.08, 0.005)
+        return {
           x: row.time[index] / 1000,
-        y: row.data[index],
-      })),
+          y,
+          ...(style.errorBar?.visible
+            ? seriesIndex % 2 === 0
+              ? { lowerError: error * 0.65, upperError: error }
+              : { error }
+            : {}),
+        }
+      }),
     },
   }
 })
 
-const chartData: WaveformData = { kind: 'series', series: waveformSeries }
+const stepDemoValues = [
+  {
+    id: 'step-demo-start',
+    name: 'Step Start',
+    color: '#5470c6',
+    lineType: 'step-start',
+    values: [120, 132, 101, 134, 90, 230, 210],
+  },
+  {
+    id: 'step-demo-middle',
+    name: 'Step Middle',
+    color: '#91cc75',
+    lineType: 'step-middle',
+    values: [220, 282, 201, 234, 290, 430, 410],
+  },
+  {
+    id: 'step-demo-end',
+    name: 'Step End',
+    color: '#505372',
+    lineType: 'step-end',
+    values: [450, 432, 401, 454, 590, 530, 510],
+  },
+] as const
+
+const stepDemoSeries: WaveformSeries[] = stepDemoValues.map((series) => ({
+  id: series.id,
+  trackId: 'step-demo',
+  name: series.name,
+  color: series.color,
+  lineType: series.lineType,
+  pointType: 'circle',
+  data: {
+    kind: 'points',
+    points: series.values.map((y, index) => ({ x: index / 1000, y })),
+  },
+}))
+
+const frameOneTrackId = String(importedSourceRows[0]?.chnl_id ?? 'frame-one')
+const frameOneDemoSource = importedSourceRows[0]
+const basicCurveDemoSeries: WaveformSeries[] = frameOneDemoSource
+  ? [
+      {
+        id: 'basic-points-only-demo',
+        trackId: frameOneTrackId,
+        name: '纯点无线',
+        color: '#d4380d',
+        lineType: 'none',
+        pointType: 'circle',
+        data: {
+          kind: 'points',
+          points: frameOneDemoSource.data.map((value, index) => ({
+            x: frameOneDemoSource.time[index]! / 1000,
+            y: value * 1.18 + Math.sin(index / 12) * 0.006,
+          })),
+        },
+      },
+      {
+        id: 'basic-line-only-demo',
+        trackId: frameOneTrackId,
+        name: '纯线无点',
+        color: '#00796b',
+        lineType: 'linear',
+        pointType: 'none',
+        data: {
+          kind: 'points',
+          points: frameOneDemoSource.data.map((value, index) => ({
+            x: frameOneDemoSource.time[index]! / 1000,
+            y: value * 0.82 - Math.sin(index / 16) * 0.006,
+          })),
+        },
+      },
+    ]
+  : []
+const frameOneSeries = waveformSeries.filter(
+  (series) => series.id === frameOneTrackId || series.trackId === frameOneTrackId,
+)
+const remainingSeries = waveformSeries.filter((series) => !frameOneSeries.includes(series))
+const chartData: WaveformData = {
+  kind: 'series',
+  series: [...frameOneSeries, ...basicCurveDemoSeries, ...stepDemoSeries, ...remainingSeries],
+}
 const titleOptions = computed<WaveformTitleOptions>(() => ({
   visible: titleVisible.value,
   text: titleText.value,
@@ -468,12 +571,14 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
           position: legendPosition,
           orientation: legendOrientation,
           backgroundColor: legendBackgroundColor,
+          interactive: true,
         }"
         :frame-style="frameStyle"
         :frame-number="frameWatermarkVisible ? 1 : undefined"
         v-model:annotations="annotations"
         v-model:annotations-visible="annotationsVisible"
         v-model:interaction-mode="interactionMode"
+        v-model:hidden-series-ids="hiddenSeriesIds"
       />
     </section>
   </main>

src/components/WaveformChart.test.ts

@@ -1,8 +1,10 @@
 import { flushPromises, mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
-import { resizeObservers } from '../test/setup'
+import { flushAnimationFrames, pendingAnimationFrameCount, resizeObservers } from '../test/setup'
 import WaveformChart from './WaveformChart.vue'
+import { prepareWaveformSeries } from './core/useWaveformData'
+import { waveformLegendErrorBarPath, waveformLegendLinePath } from './rendering/seriesStyle'
 import { normalizeWaveformData, normalizeWaveformSeries, type WaveformData } from './waveform'
 
 async function mountSizedChart(data: WaveformData, extraProps = {}) {
@@ -50,6 +52,80 @@ describe('normalizeWaveformData', () => {
     expect(normalizeWaveformData({ kind: 'samples', values: [1, 2], sampleRate: 0 })).toEqual([])
   })
 
+  it('normalizes errors and preserves a pure error-bar series', () => {
+    const [series] = normalizeWaveformSeries({
+      kind: 'series',
+      series: [
+        {
+          name: 'styled',
+          lineType: 'none',
+          pointType: 'none',
+          errorBar: { visible: true, width: -1, capWidth: Number.NaN },
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 2, error: 1, lowerError: -1, upperError: 2 },
+              { x: 1, y: 3, error: Number.NaN },
+            ],
+          },
+        },
+      ],
+    })
+
+    expect(series).toMatchObject({
+      lineType: 'none',
+      pointType: 'none',
+      errorBar: { visible: true, width: 1.5, capWidth: 8 },
+      points: [
+        { x: 0, y: 2, error: 1, upperError: 2 },
+        { x: 1, y: 3 },
+      ],
+    })
+  })
+
+  it('falls back to a line only when every series visual is disabled', () => {
+    const [series] = normalizeWaveformSeries({
+      kind: 'series',
+      series: [
+        {
+          name: 'invisible',
+          lineType: 'none',
+          pointType: 'none',
+          errorBar: { visible: false },
+          data: { kind: 'points', points: [{ x: 0, y: 1 }] },
+        },
+      ],
+    })
+
+    expect(series).toMatchObject({
+      lineType: 'linear',
+      pointType: 'none',
+      errorBar: { visible: false },
+    })
+  })
+
+  it('includes visible error bounds in the prepared Y domain', () => {
+    const [series] = prepareWaveformSeries({
+      kind: 'series',
+      series: [
+        {
+          name: 'errors',
+          errorBar: { visible: true },
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 2, lowerError: 3, upperError: 4 },
+              { x: 1, y: 3 },
+            ],
+          },
+        },
+      ],
+    })
+
+    expect(series?.yDomain[0]).toBeLessThanOrEqual(-1)
+    expect(series?.yDomain[1]).toBeGreaterThanOrEqual(6)
+  })
+
   it('normalizes multiple named series and removes empty series', () => {
     expect(
       normalizeWaveformSeries({
@@ -74,12 +150,28 @@ describe('normalizeWaveformData', () => {
         name: 'BT2_2M',
         unit: 'T',
         color: undefined,
+        lineType: 'linear',
+        pointType: 'none',
+        errorBar: { visible: false, width: 1.5, capWidth: 8 },
         points: [{ x: 1, y: 2 }],
       },
     ])
   })
 })
 
+describe('legend series geometry', () => {
+  it('keeps line samples centered and clamps error-bar caps to the swatch', () => {
+    expect(waveformLegendLinePath('linear')).toBe('M1 8H25')
+    expect(waveformLegendLinePath('step-start')).toBe('M1 8H25')
+    expect(waveformLegendLinePath('step-middle')).toBe('M1 8H25')
+    expect(waveformLegendLinePath('step-end')).toBe('M1 8H25')
+    expect(waveformLegendLinePath('step-after')).toBe('M1 8H25')
+    expect(waveformLegendLinePath('none')).toBeNull()
+    expect(waveformLegendErrorBarPath(10)).toBe('M8 2H18M13 2V14M8 14H18')
+    expect(waveformLegendErrorBarPath(100)).toBe('M1 2H25M13 2V14M1 14H25')
+  })
+})
+
 describe('WaveformChart', () => {
   const gridSeries = (count: number): WaveformData => ({
     kind: 'series',
@@ -96,6 +188,232 @@ describe('WaveformChart', () => {
     })),
   })
 
+  it('places start, middle, and end step transitions at the expected X positions', async () => {
+    const lineTypes = ['step-start', 'step-middle', 'step-end', 'step-after'] as const
+    const wrapper = await mountSizedChart({
+      kind: 'series',
+      series: lineTypes.map((lineType) => ({
+        id: lineType,
+        trackId: 'steps',
+        name: lineType,
+        lineType,
+        data: {
+          kind: 'points',
+          points: [
+            { x: 0, y: 0 },
+            { x: 2, y: 10 },
+          ],
+        },
+      })),
+    })
+    const pathCoordinates = (lineType: (typeof lineTypes)[number]) =>
+      Array.from(
+        (
+          wrapper.get(`.waveform-chart__line[data-series-id="${lineType}"]`).attributes('d') ?? ''
+        ).matchAll(/[ML]([\d.-]+),([\d.-]+)/g),
+        (match) => ({ x: Number(match[1]), y: Number(match[2]) }),
+      )
+
+    const start = pathCoordinates('step-start')
+    const middle = pathCoordinates('step-middle')
+    const end = pathCoordinates('step-end')
+    const after = pathCoordinates('step-after')
+    expect(start.map((point) => point.x)).toEqual([start[0]?.x, start[0]?.x, start.at(-1)?.x])
+    expect(middle[1]?.x).toBe(middle[2]?.x)
+    expect(middle[1]?.x).toBe((middle[0]!.x + middle.at(-1)!.x) / 2)
+    expect(end.map((point) => point.x)).toEqual([end[0]?.x, end.at(-1)?.x, end.at(-1)?.x])
+    expect(after).toEqual(end)
+
+    wrapper.unmount()
+  })
+
+  it('renders per-series lines, point symbols, error bars, and matching legend swatches', async () => {
+    const wrapper = await mountSizedChart({
+      kind: 'series',
+      series: [
+        {
+          id: 'triangle-errors',
+          trackId: 'styled-track',
+          name: '三角误差',
+          lineType: 'none',
+          pointType: 'triangle',
+          errorBar: { visible: true },
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 1, error: 0.25 },
+              { x: 1, y: 2, error: 0.5 },
+            ],
+          },
+        },
+        {
+          id: 'line-only',
+          trackId: 'styled-track',
+          name: '纯线',
+          lineType: 'linear',
+          pointType: 'none',
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 2 },
+              { x: 1, y: 3 },
+            ],
+          },
+        },
+        {
+          id: 'step-errors',
+          trackId: 'styled-track',
+          name: '阶梯误差',
+          lineType: 'step-after',
+          pointType: 'circle',
+          errorBar: { visible: true, color: '#222222', width: 2, capWidth: 10 },
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 3, lowerError: 0.5, upperError: 1 },
+              { x: 1, y: 4 },
+            ],
+          },
+        },
+        {
+          id: 'errors-only',
+          trackId: 'styled-track',
+          name: '纯误差棒',
+          lineType: 'none',
+          pointType: 'none',
+          errorBar: { visible: true },
+          data: {
+            kind: 'points',
+            points: [
+              { x: 0, y: 4, error: 0.5 },
+              { x: 1, y: 5, error: 0.5 },
+            ],
+          },
+        },
+      ],
+    })
+
+    expect(wrapper.find('.waveform-chart__line[data-series-id="triangle-errors"]').exists()).toBe(
+      false,
+    )
+    const stepLine = wrapper.get('.waveform-chart__line[data-series-id="step-errors"]')
+    expect(stepLine.attributes('data-line-type')).toBe('step-after')
+    expect(stepLine.attributes('d')).toMatch(/^M[\d.-]+,([\d.-]+)L[\d.-]+,\1L/)
+    expect(
+      wrapper
+        .get('.waveform-chart__points[data-series-id="triangle-errors"]')
+        .attributes('data-point-type'),
+    ).toBe('triangle')
+    expect(wrapper.findAll('.waveform-chart__point')).toHaveLength(2)
+    expect(
+      wrapper
+        .get('.waveform-chart__points[data-series-id="triangle-errors"] .waveform-chart__point')
+        .attributes('d'),
+    ).toMatch(/M.*M/)
+    expect(wrapper.findAll('.waveform-chart__error-bar')).toHaveLength(3)
+    expect(
+      wrapper
+        .get('.waveform-chart__error-bars[data-series-id="step-errors"] .waveform-chart__error-bar')
+        .attributes('stroke'),
+    ).toBe('#222222')
+    const errorsOnlySeries = wrapper.get('.waveform-chart__series[data-series-id="errors-only"]')
+    expect(errorsOnlySeries.find('.waveform-chart__line').exists()).toBe(false)
+    expect(errorsOnlySeries.find('.waveform-chart__point').exists()).toBe(false)
+    expect(errorsOnlySeries.find('.waveform-chart__error-bar').exists()).toBe(true)
+
+    const swatches = wrapper.findAll('.waveform-legend__swatch')
+    expect(swatches.map((swatch) => swatch.attributes('data-line-type'))).toEqual([
+      'none',
+      'linear',
+      'step-after',
+      'none',
+    ])
+    expect(swatches[0]?.attributes('data-error-bar-visible')).toBe('true')
+    expect(swatches[2]?.attributes('data-error-bar-visible')).toBe('true')
+    expect(swatches[3]?.attributes('data-error-bar-visible')).toBe('true')
+    expect(swatches[0]!.findAll('path').map((path) => path.classes())).toEqual([
+      ['waveform-legend__error-bar'],
+      ['waveform-legend__point'],
+    ])
+    const stepSwatchPaths = swatches[2]!.findAll('path')
+    expect(stepSwatchPaths.map((path) => path.classes())).toEqual([
+      ['waveform-legend__line'],
+      ['waveform-legend__error-bar'],
+      ['waveform-legend__point'],
+    ])
+    expect(stepSwatchPaths[0]?.attributes()).toMatchObject({
+      d: 'M1 8H25',
+      stroke: '#389e0d',
+      'stroke-width': '1.5',
+    })
+    expect(stepSwatchPaths[1]?.attributes()).toMatchObject({
+      d: 'M8 2H18M13 2V14M8 14H18',
+      stroke: '#222222',
+      'stroke-width': '2',
+      'stroke-linecap': 'butt',
+    })
+    expect(stepSwatchPaths[2]?.attributes('transform')).toBe('translate(13 8)')
+    expect(swatches[3]!.findAll('path').map((path) => path.classes())).toEqual([
+      ['waveform-legend__error-bar'],
+    ])
+
+    const renderedSeriesNodes = wrapper
+      .findAll('.waveform-chart__line, .waveform-chart__point, .waveform-chart__error-bar')
+      .map((node) => node.element)
+    const overlay = wrapper.get('.waveform-chart__overlay--independent')
+    const overlayWidth = Number(overlay.attributes('width'))
+    const overlayHeight = Number(overlay.attributes('height'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: overlayWidth, height: overlayHeight }),
+    })
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        clientX: overlayWidth / 2,
+        clientY: overlayHeight / 2,
+        bubbles: true,
+      }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(
+      wrapper
+        .findAll('.waveform-chart__line, .waveform-chart__point, .waveform-chart__error-bar')
+        .map((node) => node.element),
+    ).toEqual(renderedSeriesNodes)
+
+    wrapper.unmount()
+  })
+
+  const visibilitySeries = (): WaveformData => ({
+    kind: 'series',
+    series: [
+      {
+        id: 'low',
+        trackId: 'shared-frame',
+        name: '低量程',
+        data: {
+          kind: 'points',
+          points: [
+            { x: 0, y: 0 },
+            { x: 1, y: 10 },
+          ],
+        },
+      },
+      {
+        id: 'high',
+        trackId: 'shared-frame',
+        name: '高量程',
+        data: {
+          kind: 'points',
+          points: [
+            { x: 10, y: 1000 },
+            { x: 20, y: 2000 },
+          ],
+        },
+      },
+    ],
+  })
+
   it('binds overlaid series to at most four value axes in multi-axis mode', async () => {
     const data: WaveformData = {
       kind: 'series',
@@ -353,8 +671,10 @@ describe('WaveformChart', () => {
       'TEST_CH_1',
     ])
     expect(
-      legend.findAll('.waveform-legend__swatch').map((swatch) => swatch.attributes('style')),
-    ).toEqual(['background-color: rgb(9, 96, 189);', 'background-color: rgb(56, 158, 13);'])
+      legend
+        .findAll('.waveform-legend__swatch')
+        .map((swatch) => swatch.get('path').attributes('stroke')),
+    ).toEqual(['#0960bd', '#389e0d'])
     expect(wrapper.findAll('.waveform-chart__watermark').map((item) => item.text())).toEqual([
       '1',
       '2',
@@ -374,6 +694,7 @@ describe('WaveformChart', () => {
         bubbles: true,
       }),
     )
+    flushAnimationFrames()
     await flushPromises()
 
     const tooltipSeries = wrapper.findAll('.waveform-chart__tooltip-series')
@@ -496,6 +817,193 @@ describe('WaveformChart', () => {
     })
   })
 
+  it('keeps legends display-only unless interaction is explicitly enabled', async () => {
+    const wrapper = await mountSizedChart(visibilitySeries(), {
+      grid: { rowCount: 1, columnCount: 1 },
+    })
+
+    const items = wrapper.findAll('.waveform-chart__legend-item')
+    expect(items).toHaveLength(2)
+    expect(items.every((item) => item.attributes('disabled') !== undefined)).toBe(true)
+    expect(wrapper.get('.waveform-legend__panel').classes()).not.toContain(
+      'waveform-legend__panel--interactive',
+    )
+    expect(wrapper.emitted('update:hidden-series-ids')).toBeUndefined()
+  })
+
+  it('toggles series, axes, tooltips, and annotations from an interactive legend', async () => {
+    const wrapper = await mountSizedChart(visibilitySeries(), {
+      annotations: [{ id: 'high-note', seriesId: 'high', x: 15, y: 1500, text: '高值' }],
+      grid: { rowCount: 1, columnCount: 1 },
+      legend: { interactive: true },
+      overlayMode: 'multi-axis',
+    })
+
+    expect(wrapper.findAll('.waveform-chart__axis--y')).toHaveLength(2)
+    expect(wrapper.find('[data-annotation-id="high-note"]').exists()).toBe(true)
+    const highLegendItem = wrapper.findAll('.waveform-chart__legend-item')[1]
+    expect(highLegendItem.attributes('aria-pressed')).toBe('true')
+
+    await highLegendItem.trigger('click')
+    await flushPromises()
+
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['low'])
+    expect(wrapper.findAll('.waveform-chart__axis--y')).toHaveLength(1)
+    expect(wrapper.find('[data-annotation-id="high-note"]').exists()).toBe(false)
+    expect(wrapper.findAll('.waveform-chart__legend-item')[1].classes()).toContain('is-hidden')
+    expect(wrapper.findAll('.waveform-chart__legend-item')[1].attributes('aria-pressed')).toBe(
+      'false',
+    )
+    expect(wrapper.emitted('update:hidden-series-ids')?.at(-1)).toEqual([['high']])
+    expect(wrapper.emitted('series-visibility-change')?.at(-1)).toEqual([
+      { seriesId: 'high', visible: false, hiddenSeriesIds: ['high'] },
+    ])
+
+    const overlay = wrapper.get('.waveform-chart__overlay--independent')
+    const overlayWidth = Number(overlay.attributes('width'))
+    const overlayHeight = Number(overlay.attributes('height'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: overlayWidth, height: overlayHeight }),
+    })
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        clientX: overlayWidth / 2,
+        clientY: overlayHeight / 2,
+        bubbles: true,
+      }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.findAll('.waveform-chart__tooltip-series')).toHaveLength(1)
+    expect(wrapper.get('.waveform-chart__tooltip-series').text()).toContain('低量程')
+
+    await wrapper.findAll('.waveform-chart__legend-item')[1].trigger('click')
+    await flushPromises()
+    expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(2)
+    expect(wrapper.find('[data-annotation-id="high-note"]').exists()).toBe(true)
+    expect(wrapper.emitted('series-visibility-change')?.at(-1)).toEqual([
+      { seriesId: 'high', visible: true, hiddenSeriesIds: [] },
+    ])
+  })
+
+  it('waits for controlled visibility updates and preserves unknown controlled IDs', async () => {
+    const wrapper = await mountSizedChart(visibilitySeries(), {
+      grid: { rowCount: 1, columnCount: 1 },
+      hiddenSeriesIds: ['high', 'temporarily-absent'],
+      legend: { interactive: true },
+    })
+
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['low'])
+    await wrapper.findAll('.waveform-chart__legend-item')[0].trigger('click')
+    expect(wrapper.emitted('update:hidden-series-ids')?.at(-1)).toEqual([
+      ['high', 'temporarily-absent', 'low'],
+    ])
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['low'])
+
+    await wrapper.setProps({ hiddenSeriesIds: ['low'] })
+    await flushPromises()
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['high'])
+  })
+
+  it('retains uncontrolled visibility by stable ID and clears removed IDs', async () => {
+    const original = visibilitySeries()
+    const wrapper = await mountSizedChart(original, {
+      grid: { rowCount: 1, columnCount: 1 },
+      legend: { interactive: true },
+    })
+    await wrapper.findAll('.waveform-chart__legend-item')[1].trigger('click')
+
+    const reversed: WaveformData = {
+      kind: 'series',
+      series: [...(original.kind === 'series' ? original.series : [])].reverse(),
+    }
+    await wrapper.setProps({ data: reversed })
+    await flushPromises()
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['low'])
+
+    await wrapper.setProps({
+      data: {
+        kind: 'series',
+        series: original.kind === 'series' ? [original.series[0]!] : [],
+      },
+    })
+    await flushPromises()
+    await wrapper.setProps({ data: original })
+    await flushPromises()
+    expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(2)
+  })
+
+  it('keeps a recoverable legend and stops chart interaction when every series is hidden', async () => {
+    const wrapper = await mountSizedChart(visibilitySeries(), {
+      defaultHiddenSeriesIds: ['low', 'high'],
+      grid: { rowCount: 1, columnCount: 1 },
+      legend: { interactive: true },
+      overlayMode: 'multi-axis',
+    })
+
+    expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(0)
+    expect(wrapper.findAll('.waveform-chart__axis')).toHaveLength(0)
+    expect(wrapper.findAll('.waveform-chart__overlay')).toHaveLength(0)
+    expect(wrapper.findAll('.waveform-chart__legend-item')).toHaveLength(2)
+    expect(wrapper.get('.waveform-track__no-visible-series').text()).toBe('暂无可见曲线')
+
+    await wrapper.findAll('.waveform-chart__legend-item')[0].trigger('click')
+    await flushPromises()
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['low'])
+    expect(wrapper.findAll('.waveform-chart__axis--x')).toHaveLength(1)
+    expect(wrapper.findAll('.waveform-chart__axis--y')).toHaveLength(1)
+    expect(wrapper.findAll('.waveform-chart__overlay--independent')).toHaveLength(1)
+  })
+
+  it('closes an annotation editor when its series is hidden from the legend', async () => {
+    const wrapper = await mountSizedChart(visibilitySeries(), {
+      grid: { rowCount: 1, columnCount: 1 },
+      legend: { interactive: true },
+    })
+    const overlay = wrapper.get('.waveform-chart__overlay--independent')
+    const overlayWidth = Number(overlay.attributes('width'))
+    const overlayHeight = Number(overlay.attributes('height'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: overlayWidth, height: overlayHeight }),
+    })
+    overlay.element.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        clientX: overlayWidth * 0.75,
+        clientY: overlayHeight / 2,
+        bubbles: true,
+      }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(true)
+
+    const component = wrapper.vm as typeof wrapper.vm & {
+      annotationInteraction: { editorDraft: { value: { annotation: { seriesId: string } } | null } }
+    }
+    const draftSeriesId = component.annotationInteraction.editorDraft.value?.annotation.seriesId
+    const item = wrapper
+      .findAll('.waveform-chart__legend-item')
+      .find((legendItem) =>
+        legendItem.text().includes(draftSeriesId === 'high' ? '高量程' : '低量程'),
+      )
+    expect(item).toBeDefined()
+    await item!.trigger('click')
+    await flushPromises()
+    expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(false)
+  })
+
   it('renders independent cells with separate x axes and overlays', async () => {
     const wrapper = await mountSizedChart(gridSeries(4), {
       displayMode: 'independent',
@@ -556,10 +1064,10 @@ describe('WaveformChart', () => {
       tracks[0].get('.waveform-chart__y-axis-label-bg').attributes('x'),
     )
 
-    expect(labelX).toBe(-99)
+    expect(labelX).toBe(-103)
     expect(labelBackgroundX).toBe(labelX - 12)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(115)
-    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(115)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(119)
+    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(119)
   })
 
   it('keeps a tick-only gutter when channel labels are empty', async () => {
@@ -585,8 +1093,8 @@ describe('WaveformChart', () => {
     const secondLeft = Number(tracks[1].attributes('data-track-left'))
 
     expect(wrapper.findAll('.waveform-chart__y-axis-label')).toHaveLength(0)
-    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(85)
-    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(85)
+    expect(Number(wrapper.attributes('data-chart-left-margin'))).toBe(89)
+    expect(secondLeft - firstWidth).toBeGreaterThanOrEqual(89)
   })
 
   it('keeps the Y-axis label gutter stable while paging between value ranges', async () => {
@@ -1020,6 +1528,7 @@ describe('WaveformChart', () => {
     overlay.element.dispatchEvent(
       new MouseEvent('pointermove', { clientX: overlayWidth / 2, clientY: 100, bubbles: true }),
     )
+    flushAnimationFrames()
     await flushPromises()
 
     const tooltipTop = Number.parseFloat(
@@ -1165,6 +1674,39 @@ describe('WaveformChart', () => {
     expect(path).toContain(',0')
   })
 
+  it('bounds dense decorations by pixel spacing while keeping one SVG path per series', async () => {
+    const sourcePoints = Array.from({ length: 1_000 }, (_, index) => ({
+      x: index,
+      y: Math.sin(index / 20),
+      error: 0.1,
+    }))
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            id: 'dense-decorations',
+            name: '密集标记',
+            pointType: 'triangle',
+            errorBar: { visible: true },
+            data: { kind: 'points', points: sourcePoints },
+          },
+        ],
+      },
+      { rendering: { pointMinSpacing: 10, errorBarMinSpacing: 12 } },
+    )
+    const overlayWidth = Number(wrapper.get('.waveform-chart__overlay').attributes('width'))
+    const pointPaths = wrapper.findAll('.waveform-chart__point')
+    const errorBarPaths = wrapper.findAll('.waveform-chart__error-bar')
+    const pointCount = pointPaths[0]?.attributes('d')?.match(/M/g)?.length ?? 0
+    const errorBarCount = (errorBarPaths[0]?.attributes('d')?.match(/M/g)?.length ?? 0) / 3
+
+    expect(pointPaths).toHaveLength(1)
+    expect(errorBarPaths).toHaveLength(1)
+    expect(pointCount).toBeLessThanOrEqual(Math.ceil(overlayWidth / 10) + 2)
+    expect(errorBarCount).toBeLessThanOrEqual(Math.ceil(overlayWidth / 12) + 2)
+  })
+
   it('renders explicit points and supports a single point', async () => {
     const wrapper = await mountSizedChart({ kind: 'points', points: [{ x: 3, y: 8 }] })
 
@@ -1199,15 +1741,73 @@ describe('WaveformChart', () => {
     overlay.element.dispatchEvent(
       new MouseEvent('pointermove', { clientX: 700, clientY: 120, bubbles: true }),
     )
+    flushAnimationFrames()
     await flushPromises()
     expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: 1, y: 5 }])
     expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(true)
     expect(wrapper.get('.waveform-chart__tooltip').text()).toContain('ms: 1,000.0000')
+    const crosshairLines = wrapper.findAll('.waveform-chart__crosshair line')
+    expect(crosshairLines).toHaveLength(1)
+    expect(crosshairLines[0].attributes('x1')).toBe(crosshairLines[0].attributes('x2'))
+    expect(crosshairLines[0].attributes('y1')).toBe('0')
+    expect(wrapper.find('.waveform-chart__crosshair circle').exists()).toBe(false)
 
     await overlay.trigger('pointerleave')
     expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([null])
   })
 
+  it('coalesces pointer moves per frame and cancels pending hover work', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 5 },
+        ],
+      },
+      { grid: { rowCount: 1, columnCount: 1 } },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay')
+    const overlayWidth = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
+    })
+    const emittedBeforeMove = wrapper.emitted('point-hover')?.length ?? 0
+
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: 0, clientY: 100, bubbles: true }),
+    )
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: overlayWidth, clientY: 120, bubbles: true }),
+    )
+
+    expect(pendingAnimationFrameCount()).toBe(1)
+    expect(wrapper.emitted('point-hover')?.length ?? 0).toBe(emittedBeforeMove)
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.emitted('point-hover')).toHaveLength(emittedBeforeMove + 1)
+    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: 1, y: 5 }])
+
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: 0, clientY: 100, bubbles: true }),
+    )
+    expect(pendingAnimationFrameCount()).toBe(1)
+    await overlay.trigger('pointerleave')
+    const emittedAfterLeave = wrapper.emitted('point-hover')?.length ?? 0
+    expect(pendingAnimationFrameCount()).toBe(0)
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.emitted('point-hover')).toHaveLength(emittedAfterLeave)
+    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([null])
+
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: overlayWidth, clientY: 100, bubbles: true }),
+    )
+    expect(pendingAnimationFrameCount()).toBe(1)
+    wrapper.unmount()
+    expect(pendingAnimationFrameCount()).toBe(0)
+  })
+
   it('renders reference grid styling and an optional frame watermark', async () => {
     const wrapper = await mountSizedChart(
       {
@@ -1430,6 +2030,7 @@ describe('WaveformChart', () => {
         cancelable: true,
       }),
     )
+    flushAnimationFrames()
     await flushPromises()
 
     const emittedDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as
@@ -1469,6 +2070,7 @@ describe('WaveformChart', () => {
         cancelable: true,
       }),
     )
+    flushAnimationFrames()
     await flushPromises()
 
     const domain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
@@ -1853,6 +2455,7 @@ describe('WaveformChart', () => {
     overlay.element.dispatchEvent(
       new MouseEvent('pointermove', { clientX: 700, clientY: 120, bubbles: true }),
     )
+    flushAnimationFrames()
     await flushPromises()
 
     const tooltip = wrapper.get('.waveform-chart__tooltip')
@@ -1860,10 +2463,34 @@ describe('WaveformChart', () => {
     expect(tooltip.text()).toContain('2 T')
     expect(tooltip.text()).toContain('BT1_2M:')
     expect(tooltip.text()).toContain('4 T')
-    expect(wrapper.findAll('.waveform-chart__crosshair circle')).toHaveLength(2)
+    const crosshairLines = wrapper.findAll('.waveform-chart__crosshair line')
+    expect(crosshairLines).toHaveLength(2)
+    crosshairLines.forEach((line) => {
+      expect(line.attributes('x1')).toBe(line.attributes('x2'))
+      expect(line.attributes('y1')).toBe('0')
+    })
+    expect(wrapper.find('.waveform-chart__crosshair circle').exists()).toBe(false)
     expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: 1, y: 2 }])
   })
 
+  it('keeps synchronized hover feedback in compact mode', async () => {
+    const wrapper = await mountSizedChart(gridSeries(2), { displayMode: 'compact' })
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: 712, height: 290 }),
+    })
+
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: 700, clientY: 120, bubbles: true }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+
+    expect(wrapper.findAll('.waveform-chart__crosshair line')).toHaveLength(2)
+    expect(wrapper.findAll('.waveform-chart__tooltip-series')).toHaveLength(2)
+    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: 1, y: 1 }])
+  })
+
   it('keeps separated tracks apart while sharing one x-axis and one interaction layer', async () => {
     const wrapper = await mountSizedChart(
       {
@@ -1998,6 +2625,7 @@ describe('WaveformChart', () => {
         cancelable: true,
       }),
     )
+    flushAnimationFrames()
     await flushPromises()
 
     expect(endpoints()[0]).not.toBe(initialEndpoints[0])
@@ -2054,9 +2682,21 @@ describe('WaveformChart', () => {
         cancelable: true,
       }),
     )
+    overlay.element.dispatchEvent(
+      new WheelEvent('wheel', {
+        deltaY: -200,
+        clientX: 356,
+        clientY: 145,
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    expect(pendingAnimationFrameCount()).toBe(1)
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(initialZoomEventCount)
+    flushAnimationFrames()
     await flushPromises()
 
-    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBeGreaterThan(initialZoomEventCount)
+    expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(initialZoomEventCount + 1)
 
     await wrapper.setProps({ zoomable: false })
     await flushPromises()
@@ -2070,6 +2710,7 @@ describe('WaveformChart', () => {
         cancelable: true,
       }),
     )
+    flushAnimationFrames()
     await flushPromises()
 
     expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(zoomEventCount)
@@ -2375,6 +3016,7 @@ describe('WaveformChart', () => {
         cancelable: true,
       }),
     )
+    flushAnimationFrames()
     await flushPromises()
     expect(wrapper.get('.waveform-annotation__arrow').attributes('x2')).not.toBe(initialX)
 

src/components/WaveformChart.vue

@@ -73,7 +73,11 @@ import {
   type WaveformGridOptions,
 } from './core/grid'
 import type { DisplaySeries, DisplayTrack, HoveredSeriesPoint, TrackLayout } from './core/types'
-import { buildTrackLayouts, measureTrackYAxisClearance } from './core/layout'
+import {
+  buildTrackLayouts,
+  measureTrackYAxisClearance,
+  Y_AXIS_EXPONENT_GAP,
+} from './core/layout'
 import { calculateRotatedTitleLayout, TITLE_AREA_HORIZONTAL_PADDING } from './core/title'
 import { usePreparedWaveformSeries } from './core/useWaveformData'
 import WaveformAnnotationEditor from './annotation/WaveformAnnotationEditor.vue'
@@ -101,6 +105,8 @@ const props = withDefaults(
     rendering?: WaveformRenderingOptions
     title?: WaveformTitleOptions
     legend?: WaveformLegendOptions
+    hiddenSeriesIds?: string[]
+    defaultHiddenSeriesIds?: string[]
   }>(),
   {
     displayMode: 'independent',
@@ -118,6 +124,7 @@ const props = withDefaults(
     grid: () => ({ rowCount: 2, columnCount: 1, showPagination: true }),
     rendering: () => ({}),
     legend: () => ({ position: 'top-right', orientation: 'auto' }),
+    defaultHiddenSeriesIds: () => [],
   },
 )
 
@@ -127,6 +134,14 @@ const emit = defineEmits<{
   'update:annotations': [annotations: WaveformAnnotation[]]
   'update:annotations-visible': [visible: boolean]
   'update:interaction-mode': [mode: WaveformInteractionMode]
+  'update:hidden-series-ids': [ids: string[]]
+  'series-visibility-change': [
+    payload: {
+      seriesId: string
+      visible: boolean
+      hiddenSeriesIds: string[]
+    },
+  ]
   'annotation-create': [annotation: WaveformAnnotation]
   'annotation-update': [annotation: WaveformAnnotation, previous: WaveformAnnotation]
   'annotation-delete': [annotation: WaveformAnnotation]
@@ -153,10 +168,16 @@ const resizeObserver = shallowRef<ResizeObserver>()
 const zoomBehaviors = new Map<number | 'shared', ZoomBehavior<SVGRectElement, unknown>>()
 const clipPathId = `${useId()}-waveform-clip`
 const internalInteractionMode = ref<WaveformInteractionMode | undefined>(undefined)
+const internalHiddenSeriesIds = ref(new Set(props.defaultHiddenSeriesIds))
 const annotationInteraction = useWaveformAnnotationInteraction()
 const editorSeriesOptions = ref<AnnotationSeriesCandidate[]>([])
 let generatedAnnotationId = 0
 let synchronizingZoomTransform = false
+let zoomAnimationFrame: number | null = null
+let pendingSharedZoomTransform: ZoomTransform | null = null
+const pendingIndependentZoomTransforms = new Map<number, ZoomTransform>()
+let hoverAnimationFrame: number | null = null
+let pendingHoverUpdate: (() => void) | null = null
 const preparedSeries = usePreparedWaveformSeries(() => props.data, handleDataReferenceChange)
 
 // 用于传递给 WaveformTooltip 的接口
@@ -188,6 +209,13 @@ const legendPosition = computed<WaveformLegendPosition>(() => props.legend?.posi
 const legendBackgroundColor = computed(
   () => props.legend?.backgroundColor || 'rgba(255, 255, 255, 0.7)',
 )
+const legendInteractive = computed(() => props.legend?.interactive === true)
+const hiddenSeriesIdSet = computed(() =>
+  props.hiddenSeriesIds === undefined
+    ? internalHiddenSeriesIds.value
+    : new Set(props.hiddenSeriesIds),
+)
+const resolvedHiddenSeriesIds = computed(() => Array.from(hiddenSeriesIdSet.value))
 const legendOrientation = computed<Exclude<WaveformLegendOrientation, 'auto'>>(() => {
   const orientation = props.legend?.orientation ?? 'auto'
   if (orientation !== 'auto') return orientation
@@ -288,12 +316,16 @@ const chartTracks = computed<DisplayTrack[]>(() => {
     if (trackSeries) trackSeries.push(series)
     else groupedSeries.set(trackId, [series])
   })
-  return Array.from(groupedSeries, ([id, series]) => ({
+  return Array.from(groupedSeries, ([id, series]) => {
+    const visibleSeries = series.filter((item) => !hiddenSeriesIdSet.value.has(item.id))
+    return {
       id,
       series,
-    xDomain: paddedDomain(series.flatMap((item) => item.xDomain)),
-    yDomain: paddedDomain(series.flatMap((item) => item.yDomain)),
-  }))
+      visibleSeries,
+      xDomain: paddedDomain(visibleSeries.flatMap((item) => item.xDomain)),
+      yDomain: paddedDomain(visibleSeries.flatMap((item) => item.yDomain)),
+    }
+  })
 })
 const gridOptions = computed(() => normalizeGridOptions(props.grid))
 const renderingOptions = computed(() => resolveWaveformRenderingOptions(props.rendering))
@@ -307,11 +339,12 @@ const yAxisTickPadding = 7
 const yAxisOuterPadding = 4
 const yAxisLabelGap = 6
 const yAxisLabelBandWidth = 24
-const yAxisExponentGap = 4
 const minimumPlotWidth = 120
 
 const yAxisMetrics = computed(() => {
-  const axisText = chartTracks.value.map((track) => {
+  const axisText = chartTracks.value
+    .filter((track) => track.visibleSeries.length > 0)
+    .map((track) => {
       const scale = scaleLinear(track.yDomain, [1, 0]).nice()
       const [axisMin, axisMax] = scale.domain()
       const values = scale.ticks(10)
@@ -327,7 +360,9 @@ const yAxisMetrics = computed(() => {
     0,
     ...axisText.map(({ exponentLabel }) => (exponentLabel?.length ?? 0) * yAxisCharacterWidth),
   )
-  const exponentClearance = maximumExponentWidth ? maximumExponentWidth + yAxisExponentGap : 0
+  const exponentClearance = maximumExponentWidth
+    ? maximumExponentWidth + Y_AXIS_EXPONENT_GAP
+    : 0
   const tickClearance = tickTextWidth + yAxisTickPadding + exponentClearance + yAxisOuterPadding
   const labelCenterX = -(
     yAxisTickPadding +
@@ -348,15 +383,20 @@ const yAxisMetrics = computed(() => {
 })
 const hasYAxisLabels = computed(() =>
   chartTracks.value.some(
-    (track) => track.series.length === 1 && Boolean(track.series[0]?.name.trim() || props.yLabel),
+    (track) =>
+      track.visibleSeries.length === 1 &&
+      Boolean(track.visibleSeries[0]?.name.trim() || props.yLabel),
   ),
 )
+const hasVisibleWaveformData = computed(() =>
+  chartTracks.value.some((track) => track.visibleSeries.length > 0),
+)
 const chartLeftMargin = computed(() =>
   Math.max(
     margin.left,
     hasYAxisLabels.value
       ? yAxisMetrics.value.fullClearance
-      : chartSeries.value.length
+      : hasVisibleWaveformData.value
         ? yAxisMetrics.value.tickClearance
         : 0,
   ),
@@ -397,9 +437,9 @@ const yAxisLayout = computed(() => {
 
   return {
     horizontalGap:
-      props.overlayMode === 'multi-axis' && hasMultipleColumns && chartSeries.value.length
+      props.overlayMode === 'multi-axis' && hasMultipleColumns && hasVisibleWaveformData.value
         ? Math.max(baseGap, multiAxisClearance.value.left + multiAxisClearance.value.right)
-        : hasMultipleColumns && chartSeries.value.length
+        : hasMultipleColumns && hasVisibleWaveformData.value
           ? hasYAxisLabels.value && canReserveLabelClearance
             ? fullGap
             : tickGap
@@ -433,7 +473,9 @@ const tooltipSeriesPoints = computed<TooltipSeriesPoint[]>(() => {
 })
 
 const sharedXDomain = computed(() =>
-  paddedDomain(chartTracks.value.flatMap((track) => track.xDomain)),
+  paddedDomain(
+    chartTracks.value.flatMap((track) => (track.visibleSeries.length ? track.xDomain : [])),
+  ),
 )
 const sharedZoomDomain = computed(
   () =>
@@ -526,7 +568,22 @@ function resolveFrameNumber(trackIndex: number): string | number | undefined {
 
 function handleSharedZoom(event: D3ZoomEvent<SVGRectElement, unknown>) {
   if (synchronizingZoomTransform) return
-  const transform = event.transform
+  cancelPendingHover()
+  pendingSharedZoomTransform = event.transform
+  scheduleZoomCommit()
+}
+
+function handleIndependentZoom(event: D3ZoomEvent<SVGRectElement, unknown>, trackIndex: number) {
+  if (synchronizingZoomTransform) return
+  cancelPendingHover()
+  pendingIndependentZoomTransforms.set(trackIndex, event.transform)
+  scheduleZoomCommit()
+}
+
+function commitPendingZoom() {
+  if (pendingSharedZoomTransform) {
+    const transform = pendingSharedZoomTransform
+    pendingSharedZoomTransform = null
     sharedTransform.value = transform
     const domain = transform
       .rescaleX(scaleLinear(sharedXDomain.value, [0, innerWidth.value]))
@@ -534,19 +591,48 @@ function handleSharedZoom(event: D3ZoomEvent<SVGRectElement, unknown>) {
     emit('zoom-change', [domain[0], domain[1]])
   }
 
-function handleIndependentZoom(event: D3ZoomEvent<SVGRectElement, unknown>, trackIndex: number) {
-  if (synchronizingZoomTransform) return
-  const transform = event.transform
+  if (!pendingIndependentZoomTransforms.size) return
   const nextTransforms = [...independentTransforms.value]
+  const changedTrackIndexes = Array.from(pendingIndependentZoomTransforms.keys())
+  pendingIndependentZoomTransforms.forEach((transform, trackIndex) => {
     nextTransforms[trackIndex] = transform
+  })
+  pendingIndependentZoomTransforms.clear()
   independentTransforms.value = nextTransforms
-  const track = trackLayouts.value[trackIndex]
+  changedTrackIndexes.forEach((trackIndex) => {
+    const track = trackLayouts.value.find((item) => item.index === trackIndex)
     if (!track) return
     const domain = track.xScale.domain()
     emit('zoom-change', [domain[0], domain[1]])
+  })
+}
+
+function scheduleZoomCommit() {
+  if (zoomAnimationFrame !== null) return
+  zoomAnimationFrame = requestAnimationFrame(() => {
+    zoomAnimationFrame = null
+    commitPendingZoom()
+  })
+}
+
+function flushPendingZoom() {
+  if (zoomAnimationFrame !== null) {
+    cancelAnimationFrame(zoomAnimationFrame)
+    zoomAnimationFrame = null
+  }
+  commitPendingZoom()
+}
+
+function cancelPendingZoom() {
+  pendingSharedZoomTransform = null
+  pendingIndependentZoomTransforms.clear()
+  if (zoomAnimationFrame === null) return
+  cancelAnimationFrame(zoomAnimationFrame)
+  zoomAnimationFrame = null
 }
 
 function clearZoomBindings() {
+  cancelPendingZoom()
   const svg = svgElement.value
   if (svg) {
     const overlays = svg.querySelectorAll<SVGRectElement>('.waveform-chart__overlay')
@@ -579,6 +665,7 @@ function configureZoom() {
           [track.width, track.height],
         ])
         .on('zoom', (event) => handleIndependentZoom(event, track.index))
+        .on('end', flushPendingZoom)
       zoomBehaviors.set(track.index, behavior)
       synchronizingZoomTransform = true
       try {
@@ -604,6 +691,7 @@ function configureZoom() {
       [innerWidth.value, innerHeight.value],
     ])
     .on('zoom', handleSharedZoom)
+    .on('end', flushPendingZoom)
   zoomBehaviors.set('shared', behavior)
   const overlay = sharedOverlayElement.value
   if (overlay) {
@@ -616,7 +704,51 @@ function configureZoom() {
   }
 }
 
+function cancelPendingHover() {
+  pendingHoverUpdate = null
+  if (hoverAnimationFrame === null) return
+  cancelAnimationFrame(hoverAnimationFrame)
+  hoverAnimationFrame = null
+}
+
+function scheduleHover(update: () => void) {
+  pendingHoverUpdate = update
+  if (hoverAnimationFrame !== null) return
+  hoverAnimationFrame = requestAnimationFrame(() => {
+    hoverAnimationFrame = null
+    const nextUpdate = pendingHoverUpdate
+    pendingHoverUpdate = null
+    nextUpdate?.()
+  })
+}
+
+function hoveredPointsMatch(nextPoints: HoveredSeriesPoint[]): boolean {
+  return (
+    hoveredSeriesPoints.value.length === nextPoints.length &&
+    nextPoints.every((point, index) => {
+      const current = hoveredSeriesPoints.value[index]
+      return (
+        current?.id === point.id &&
+        current.trackIndex === point.trackIndex &&
+        current.point === point.point
+      )
+    })
+  )
+}
+
+function commitHover(
+  nextPoints: HoveredSeriesPoint[],
+  trackIndex: number | null,
+  position: { x: number; y: number },
+) {
+  if (!hoveredPointsMatch(nextPoints)) hoveredSeriesPoints.value = nextPoints
+  hoveredTrackIndex.value = trackIndex
+  hoverPosition.value = position
+  emit('point-hover', nextPoints[0]?.point ?? null)
+}
+
 function clearHover() {
+  cancelPendingHover()
   hoveredSeriesPoints.value = []
   hoveredTrackIndex.value = null
   emit('point-hover', null)
@@ -651,6 +783,18 @@ function setAnnotationsVisible(visible: boolean) {
   emit('update:annotations-visible', visible)
 }
 
+function toggleSeriesVisibility(seriesId: string) {
+  if (!chartSeries.value.some((series) => series.id === seriesId)) return
+  const nextHiddenSeriesIds = new Set(hiddenSeriesIdSet.value)
+  const visible = nextHiddenSeriesIds.has(seriesId)
+  if (visible) nextHiddenSeriesIds.delete(seriesId)
+  else nextHiddenSeriesIds.add(seriesId)
+  const ids = Array.from(nextHiddenSeriesIds)
+  if (props.hiddenSeriesIds === undefined) internalHiddenSeriesIds.value = nextHiddenSeriesIds
+  emit('update:hidden-series-ids', ids)
+  emit('series-visibility-change', { seriesId, visible, hiddenSeriesIds: ids })
+}
+
 function resolvePointerEditorAnchor(
   event: MouseEvent,
   trackIndex?: number,
@@ -709,7 +853,9 @@ function changeDraftSeries(seriesId: string) {
   )
   const series = track?.seriesList.find((item) => item.id === seriesId)
   const point =
-    series && draft ? interpolateAnnotationPoint(series.points, draft.annotation.x) : null
+    series && draft
+      ? interpolateAnnotationPoint(series.points, draft.annotation.x, series.lineType)
+      : null
   if (!draft || !candidate || !track || !point) return
   draft.annotation = {
     ...draft.annotation,
@@ -734,8 +880,12 @@ function resolveTrackAtPointer(
   pointerY: number,
   trackIndex?: number,
 ): TrackLayout | undefined {
-  if (trackIndex !== undefined) return trackLayouts.value[trackIndex]
-  if (!trackLayouts.value.length) return undefined
+  if (trackIndex !== undefined) {
+    const track = trackLayouts.value[trackIndex]
+    return track?.hasVisibleSeries ? track : undefined
+  }
+  const visibleTracks = trackLayouts.value.filter((track) => track.hasVisibleSeries)
+  if (!visibleTracks.length) return undefined
 
   const distanceToTrack = (track: TrackLayout) => {
     const xDistance =
@@ -748,7 +898,7 @@ function resolveTrackAtPointer(
     if (pointerY > track.top + track.height) return pointerY - (track.top + track.height)
     return xDistance
   }
-  return trackLayouts.value.reduce((closest, candidate) => {
+  return visibleTracks.reduce((closest, candidate) => {
     const distance = distanceToTrack(candidate)
     const closestDistance = distanceToTrack(closest)
     if (distance !== closestDistance) return distance < closestDistance ? candidate : closest
@@ -899,44 +1049,49 @@ function confirmAnnotation(annotation: WaveformAnnotation) {
 
 function handleIndependentPointerMove(event: PointerEvent, trackIndex: number) {
   const overlay = event.currentTarget as SVGRectElement | null
-  const track = trackLayouts.value[trackIndex]
-  if (!overlay || !track) return
+  if (!overlay) return
   const [pointerX, pointerY] = pointer(event, overlay)
+  scheduleHover(() => {
+    const track = trackLayouts.value[trackIndex]
+    if (!track) return
     const xValue = track.xScale.invert(Math.max(0, Math.min(innerWidth.value, pointerX)))
-  hoveredSeriesPoints.value = track.seriesList.flatMap((series) => {
+    const nextPoints = track.seriesList.flatMap((series) => {
       const point = nearestPoint(series, xValue)
       return point ? [{ ...series, trackIndex, point }] : []
     })
-  hoveredTrackIndex.value = trackIndex
-  hoverPosition.value = {
+    commitHover(nextPoints, trackIndex, {
       x: resolvedChartLeftMargin.value + track.left + pointerX,
       y: titleAreaHeight.value + margin.top + track.top + pointerY,
-  }
-  emit('point-hover', hoveredSeriesPoints.value[0]?.point ?? null)
+    })
+  })
 }
 
 function handleSharedPointerMove(event: PointerEvent) {
   if (!sharedOverlayElement.value || !trackLayouts.value.length) return
   const [pointerX, pointerY] = pointer(event, sharedOverlayElement.value)
+  scheduleHover(() => {
     const referenceTrack = resolveTrackAtPointer(pointerX, pointerY) ?? trackLayouts.value[0]
     if (!referenceTrack) return
-  const localPointerX = Math.max(0, Math.min(referenceTrack.width, pointerX - referenceTrack.left))
+    const localPointerX = Math.max(
+      0,
+      Math.min(referenceTrack.width, pointerX - referenceTrack.left),
+    )
     const xValue = referenceTrack.xScale.invert(localPointerX)
-  hoveredSeriesPoints.value = trackLayouts.value.flatMap((track) =>
+    const nextPoints = trackLayouts.value.flatMap((track) =>
       track.seriesList.flatMap((series) => {
         const point = nearestPoint(series, xValue)
         return point ? [{ ...series, trackIndex: track.index, point }] : []
       }),
     )
-  hoveredTrackIndex.value = null
-  hoverPosition.value = {
+    commitHover(nextPoints, null, {
       x: resolvedChartLeftMargin.value + pointerX,
       y: titleAreaHeight.value + margin.top + pointerY,
-  }
-  emit('point-hover', hoveredPoint.value)
+    })
+  })
 }
 
 function resetViewport() {
+  cancelPendingZoom()
   sharedTransform.value = zoomIdentity
   independentTransforms.value = chartTracks.value.map(() => zoomIdentity)
   clearHover()
@@ -1012,6 +1167,45 @@ watch(activeInteractionMode, () => {
   editorSeriesOptions.value = []
 })
 
+watch(
+  () => chartSeries.value.map((series) => series.id).join('\u0000'),
+  () => {
+    if (props.hiddenSeriesIds !== undefined) return
+    const availableIds = new Set(chartSeries.value.map((series) => series.id))
+    const retainedIds = new Set(
+      Array.from(internalHiddenSeriesIds.value).filter((seriesId) => availableIds.has(seriesId)),
+    )
+    if (
+      retainedIds.size !== internalHiddenSeriesIds.value.size ||
+      Array.from(retainedIds).some((seriesId) => !internalHiddenSeriesIds.value.has(seriesId))
+    ) {
+      internalHiddenSeriesIds.value = retainedIds
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () =>
+    chartTracks.value
+      .flatMap((track) => track.visibleSeries.map((series) => series.id))
+      .join('\u0000'),
+  () => {
+    clearHover()
+    editorSeriesOptions.value = []
+    const draftSeriesId = annotationInteraction.editorDraft.value?.annotation.seriesId
+    if (draftSeriesId && hiddenSeriesIdSet.value.has(draftSeriesId)) {
+      annotationInteraction.closeEditor()
+    }
+    const contextAnnotationId = annotationInteraction.contextMenu.value?.annotationId
+    const contextAnnotation = props.annotations.find((item) => item.id === contextAnnotationId)
+    if (contextAnnotation && hiddenSeriesIdSet.value.has(contextAnnotation.seriesId)) {
+      annotationInteraction.closeContextMenu()
+    }
+    void nextTick(configureZoom)
+  },
+)
+
 watch(
   () => props.annotationsVisible,
   (visible) => {
@@ -1070,6 +1264,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  cancelPendingHover()
   resizeObserver.value?.disconnect()
   clearZoomBindings()
   editorSeriesOptions.value = []
@@ -1153,6 +1348,22 @@ onBeforeUnmount(() => {
             />
           </g>
         </g>
+        <rect
+          v-if="displayMode !== 'independent' && trackLayouts.length && hasVisibleWaveformData"
+          ref="sharedOverlayElement"
+          class="waveform-chart__overlay waveform-chart__overlay--shared"
+          :class="{
+            'is-zoomable': zoomable && isZoomMode,
+            'is-annotating': activeInteractionMode === 'annotation',
+          }"
+          :width="innerWidth"
+          :height="innerHeight"
+          @pointermove="handleSharedPointerMove"
+          @pointerleave="clearHover"
+          @click="handleAnnotationClick"
+          @contextmenu="handleAnnotationContextMenu"
+        />
+
         <!-- 轨道渲染 -->
         <WaveformTrack
           v-for="track in trackLayouts"
@@ -1171,27 +1382,14 @@ onBeforeUnmount(() => {
           :legend-position="legendPosition"
           :legend-orientation="legendOrientation"
           :legend-background-color="legendBackgroundColor"
+          :legend-interactive="legendInteractive"
+          :hidden-series-ids="resolvedHiddenSeriesIds"
           :hovered-point="hoveredSeriesPoints.find((p) => p.trackIndex === track.index)"
           @pointer-move="handleIndependentPointerMove($event, track.index)"
           @pointer-leave="clearHover"
           @click="handleAnnotationClick($event, track.index)"
           @contextmenu="handleAnnotationContextMenu($event, track.index)"
-        />
-
-        <rect
-          v-if="displayMode !== 'independent' && trackLayouts.length"
-          ref="sharedOverlayElement"
-          class="waveform-chart__overlay waveform-chart__overlay--shared"
-          :class="{
-            'is-zoomable': zoomable && isZoomMode,
-            'is-annotating': activeInteractionMode === 'annotation',
-          }"
-          :width="innerWidth"
-          :height="innerHeight"
-          @pointermove="handleSharedPointerMove"
-          @pointerleave="clearHover"
-          @click="handleAnnotationClick"
-          @contextmenu="handleAnnotationContextMenu"
+          @series-visibility-toggle="toggleSeriesVisibility"
         />
 
         <WaveformAnnotationLayer

src/components/annotation/markup.test.ts

@@ -55,6 +55,34 @@ describe('waveform annotation markup', () => {
     ).toBeNull()
   })
 
+  it('interpolates start, middle, and end step lines at their visual transitions', () => {
+    const points = [
+      { x: 0, y: 2 },
+      { x: 2, y: 10 },
+    ]
+
+    expect(interpolateAnnotationPoint(points, 0.5, 'step-start')).toEqual({ x: 0.5, y: 10 })
+    expect(interpolateAnnotationPoint(points, 0.5, 'step-middle')).toEqual({ x: 0.5, y: 2 })
+    expect(interpolateAnnotationPoint(points, 1, 'step-middle')).toEqual({ x: 1, y: 10 })
+    expect(interpolateAnnotationPoint(points, 1.5, 'step-middle')).toEqual({ x: 1.5, y: 10 })
+    expect(interpolateAnnotationPoint(points, 1, 'step-end')).toEqual({ x: 1, y: 2 })
+    expect(interpolateAnnotationPoint(points, 1, 'step-after')).toEqual({ x: 1, y: 2 })
+    expect(interpolateAnnotationPoint(points, 2, 'step-start')).toEqual({ x: 2, y: 10 })
+    expect(interpolateAnnotationPoint(points, 2, 'step-after')).toEqual({ x: 2, y: 10 })
+    expect(interpolateAnnotationPoint(points, 1, 'none')).toBeNull()
+    expect(interpolateAnnotationPoint(points, 2, 'none')).toEqual({ x: 2, y: 10 })
+  })
+
+  it('omits interpolated candidates for point-only series between samples', () => {
+    const pointOnly = createTrack(0, 'points', 0, [
+      { x: 0, y: 2 },
+      { x: 2, y: 10 },
+    ])
+    pointOnly.series.lineType = 'none'
+
+    expect(findAnnotationSeriesCandidates([pointOnly], 1, 100, 50)).toEqual([])
+  })
+
   it('sorts line candidates by screen distance and keeps series metadata', () => {
     const first = createTrack(0, 'first', 0, [
       { x: 0, y: 0 },

src/components/annotation/markup.ts

@@ -1,6 +1,6 @@
 import { bisector } from 'd3'
 
-import type { WaveformAnnotation, WaveformAnnotationStyle } from '../../types'
+import type { WaveformAnnotation, WaveformAnnotationStyle, WaveformLineType } from '../../types'
 import type {
   AnnotationBoxLayout,
   AnnotationHit,
@@ -46,6 +46,7 @@ const pointBisector = bisector((point: { x: number }) => point.x)
 export function interpolateAnnotationPoint(
   points: Array<{ x: number; y: number }>,
   xValue: number,
+  lineType: WaveformLineType = 'linear',
 ): { x: number; y: number } | null {
   if (!points.length || !Number.isFinite(xValue)) return null
   const first = points[0]
@@ -56,8 +57,16 @@ export function interpolateAnnotationPoint(
   const rightIndex = pointBisector.left(points, xValue)
   const right = points[Math.min(rightIndex, points.length - 1)]
   if (right.x === xValue || rightIndex === 0) return { x: xValue, y: right.y }
+  if (lineType === 'none') return null
 
   const left = points[rightIndex - 1]
+  if (lineType === 'step-start') return { x: xValue, y: right.y }
+  if (lineType === 'step-middle') {
+    return { x: xValue, y: xValue < (left.x + right.x) / 2 ? left.y : right.y }
+  }
+  if (lineType === 'step-end' || lineType === 'step-after') {
+    return { x: xValue, y: left.y }
+  }
   const xSpan = right.x - left.x
   if (xSpan === 0) return { x: xValue, y: right.y }
   const ratio = (xValue - left.x) / xSpan
@@ -72,7 +81,7 @@ export function findAnnotationSeriesCandidates(
 ): AnnotationSeriesCandidate[] {
   return tracks
     .flatMap((track): AnnotationSeriesCandidate[] => {
-      const point = interpolateAnnotationPoint(track.series.points, xValue)
+      const point = interpolateAnnotationPoint(track.series.points, xValue, track.series.lineType)
       if (!point) return []
       const screenX = track.xScale(point.x)
       const screenY = track.top + track.yScale(point.y)

src/components/annotation/types.ts

@@ -1,6 +1,6 @@
 import type { ScaleLinear } from 'd3'
 
-import type { WaveformAnnotation, WaveformPoint } from '../../types'
+import type { WaveformAnnotation, WaveformLineType, WaveformPoint } from '../../types'
 
 export interface AnnotationTrackLayout {
   index: number
@@ -9,6 +9,7 @@ export interface AnnotationTrackLayout {
     name?: string
     color?: string
     unit?: string
+    lineType?: WaveformLineType
     points: WaveformPoint[]
   }
   left?: number

src/components/core/layout.test.ts

@@ -1,13 +1,23 @@
+import { zoomIdentity } from 'd3'
 import { describe, expect, it } from 'vitest'
 
+import { DEFAULT_WAVEFORM_RENDERING_OPTIONS } from '../../core'
 import type { DisplaySeries, DisplayTrack } from './types'
-import { buildYAxisSeriesGroups, MAX_MULTI_Y_AXIS_COUNT } from './layout'
+import {
+  buildTrackLayouts,
+  buildYAxisSeriesGroups,
+  MAX_MULTI_Y_AXIS_COUNT,
+  measureYAxisGroupClearance,
+} from './layout'
 
 function series(id: string, minimum: number, maximum: number): DisplaySeries {
   return {
     id,
     name: id,
     color: '#1677ff',
+    lineType: 'linear',
+    pointType: 'none',
+    errorBar: { visible: false, width: 1.5, capWidth: 8 },
     points: [
       { x: 0, y: minimum },
       { x: 1, y: maximum },
@@ -21,11 +31,49 @@ function track(seriesList: DisplaySeries[]): DisplayTrack {
   return {
     id: 'track',
     series: seriesList,
+    visibleSeries: seriesList,
     xDomain: [0, 1],
     yDomain: [0, 50],
   }
 }
 
+function layoutForSeries(
+  sourceSeries: DisplaySeries,
+  rendering = DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+  transform = zoomIdentity,
+) {
+  const sourceTrack = track([sourceSeries])
+  sourceTrack.xDomain = sourceSeries.xDomain
+  sourceTrack.yDomain = sourceSeries.yDomain
+  return buildTrackLayouts({
+    cells: [
+      {
+        slotIndex: 0,
+        row: 0,
+        column: 0,
+        left: 0,
+        top: 0,
+        width: 120,
+        height: 100,
+        plotHeight: 100,
+        cellHeight: 130,
+        xAxisBand: 30,
+        series: sourceTrack,
+      },
+    ],
+    grid: { rowCount: 1, columnCount: 1, showPagination: false },
+    displayMode: 'independent',
+    overlayMode: 'single-axis',
+    independentTransforms: [transform],
+    sharedZoomDomain: sourceSeries.xDomain,
+    timeUnit: 'ms',
+    rendering,
+    hideSecondaryLabels: false,
+    yAxisLabelX: -50,
+    showCompactEmptyTracks: false,
+  })[0]!.seriesPaths[0]!
+}
+
 describe('multi-value Y-axis grouping', () => {
   it('keeps every overlaid series on one axis in single-axis mode', () => {
     const groups = buildYAxisSeriesGroups(
@@ -95,4 +143,120 @@ describe('multi-value Y-axis grouping', () => {
       'right',
     ])
   })
+
+  it('places left and right scientific exponents eight pixels outside their tick labels', () => {
+    const layout = buildTrackLayouts({
+      cells: [
+        {
+          slotIndex: 0,
+          row: 0,
+          column: 0,
+          left: 0,
+          top: 0,
+          width: 600,
+          height: 300,
+          plotHeight: 300,
+          cellHeight: 330,
+          xAxisBand: 30,
+          series: track([series('left', 0, 254), series('right', 0, 254)]),
+        },
+      ],
+      grid: { rowCount: 1, columnCount: 1, showPagination: false },
+      displayMode: 'independent',
+      overlayMode: 'multi-axis',
+      independentTransforms: [zoomIdentity],
+      sharedZoomDomain: [0, 1],
+      timeUnit: 'ms',
+      rendering: DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+      hideSecondaryLabels: false,
+      yAxisLabelX: -50,
+      showCompactEmptyTracks: false,
+    })[0]
+
+    expect(
+      layout?.yAxes.map(({ side, x, exponentX, exponentLabel }) => ({
+        side,
+        offset: Math.abs(exponentX - x),
+        exponentLabel,
+      })),
+    ).toEqual([
+      { side: 'left', offset: 43, exponentLabel: 'E+02' },
+      { side: 'right', offset: 43, exponentLabel: 'E+02' },
+    ])
+  })
+
+  it('retains enough outer clearance for long scientific exponents', () => {
+    const [group] = buildYAxisSeriesGroups(track([series('long', -1e120, 1e120)]), 'multi-axis')
+
+    expect(group).toBeDefined()
+    expect(measureYAxisGroupClearance(group!)).toBe(119)
+  })
+})
+
+describe('decoration sampling', () => {
+  const denseSeries = (): DisplaySeries => ({
+    ...series('dense', -1, 1),
+    pointType: 'circle',
+    errorBar: { visible: true, width: 1.5, capWidth: 8 },
+    points: Array.from({ length: 1_000 }, (_, index) => ({
+      x: index,
+      y: Math.sin(index / 20),
+      error: index % 200 === 1 ? 0.1 : 0,
+    })),
+    xDomain: [0, 999],
+  })
+
+  it('shares prioritized source points between dense symbols and error bars', () => {
+    const sourceSeries = denseSeries()
+    const path = layoutForSeries(sourceSeries, {
+      ...DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+      pointMinSpacing: 10,
+      errorBarMinSpacing: 12,
+    })
+    const sourceErrorPoints = sourceSeries.points.filter((point) => point.error !== 0)
+
+    expect(path.errorBarRenderPoints).toEqual(sourceErrorPoints)
+    expect(path.errorBarRenderPoints.every((point) => path.pointRenderPoints.includes(point))).toBe(
+      true,
+    )
+    expect(path.pointRenderPoints.length).toBeLessThanOrEqual(Math.ceil(120 / 12) + 2)
+  })
+
+  it('keeps standalone, zero-error, and non-downsampled decoration behavior', () => {
+    const noErrors = denseSeries()
+    noErrors.points = noErrors.points.map((point) => ({ x: point.x, y: point.y }))
+    const zeroErrorPath = layoutForSeries(noErrors)
+    expect(zeroErrorPath.errorBarRenderPoints).toEqual([])
+    expect(zeroErrorPath.pointRenderPoints.length).toBeLessThanOrEqual(Math.ceil(120 / 10) + 2)
+
+    const errorsOnly = denseSeries()
+    errorsOnly.pointType = 'none'
+    const errorsOnlyPath = layoutForSeries(errorsOnly)
+    expect(errorsOnlyPath.pointRenderPoints).toEqual([])
+    expect(errorsOnlyPath.errorBarRenderPoints.length).toBeLessThanOrEqual(Math.ceil(120 / 12) + 2)
+
+    const pointsOnly = denseSeries()
+    pointsOnly.errorBar.visible = false
+    const pointsOnlyPath = layoutForSeries(pointsOnly)
+    expect(pointsOnlyPath.errorBarRenderPoints).toEqual([])
+    expect(pointsOnlyPath.pointRenderPoints.length).toBeLessThanOrEqual(Math.ceil(120 / 10) + 2)
+
+    const completePath = layoutForSeries(denseSeries(), {
+      ...DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+      downsample: false,
+    })
+    expect(completePath.pointRenderPoints).toHaveLength(1_000)
+    expect(completePath.errorBarRenderPoints).toHaveLength(5)
+  })
+
+  it('restores every visible source decoration after zooming to sparse spacing', () => {
+    const path = layoutForSeries(
+      denseSeries(),
+      DEFAULT_WAVEFORM_RENDERING_OPTIONS,
+      zoomIdentity.scale(200),
+    )
+
+    expect(path.pointRenderPoints.map((point) => point.x)).toEqual([0, 1, 2, 3, 4])
+    expect(path.errorBarRenderPoints.map((point) => point.x)).toEqual([1])
+  })
 })

src/components/core/layout.ts

@@ -1,6 +1,19 @@
-import { line, scaleLinear, zoomIdentity, type ZoomTransform } from 'd3'
+import {
+  curveStep,
+  curveStepAfter,
+  curveStepBefore,
+  line,
+  scaleLinear,
+  zoomIdentity,
+  type ZoomTransform,
+} from 'd3'
 
-import { selectRenderablePoints, type ResolvedWaveformRenderingOptions } from '../../core'
+import {
+  selectDecorationPoints,
+  selectRenderablePoints,
+  resolveWaveformPointErrors,
+  type ResolvedWaveformRenderingOptions,
+} from '../../core'
 import type { WaveformDisplayMode, WaveformOverlayMode, WaveformPoint } from '../../types'
 import {
   buildMinorTicks,
@@ -23,7 +36,7 @@ const Y_AXIS_TICK_PADDING = 7
 const Y_AXIS_OUTER_PADDING = 4
 const Y_AXIS_LABEL_GAP = 6
 const Y_AXIS_LABEL_BAND_WIDTH = 24
-const Y_AXIS_EXPONENT_GAP = 4
+export const Y_AXIS_EXPONENT_GAP = 8
 
 interface YAxisSeriesGroup {
   index: number
@@ -57,8 +70,8 @@ export function buildYAxisSeriesGroups(
   if (cached) return cached
   const axisCount =
     overlayMode === 'multi-axis'
-      ? Math.min(track.series.length, MAX_MULTI_Y_AXIS_COUNT)
-      : Math.min(track.series.length, 1)
+      ? Math.min(track.visibleSeries.length, MAX_MULTI_Y_AXIS_COUNT)
+      : Math.min(track.visibleSeries.length, 1)
   const sides = resolveAxisSides(axisCount)
   const grouped = Array.from({ length: axisCount }, (_, index) => ({
     index,
@@ -67,7 +80,7 @@ export function buildYAxisSeriesGroups(
     domain: [0, 1] as [number, number],
   }))
 
-  track.series.forEach((series, index) => {
+  track.visibleSeries.forEach((series, index) => {
     grouped[Math.min(index, axisCount - 1)]?.seriesList.push(series)
   })
   grouped.forEach((group) => {
@@ -136,7 +149,7 @@ export function measureTrackYAxisClearance(
   return buildYAxisSeriesGroups(track, overlayMode).reduce(
     (clearance, group) => {
       clearance[group.side] +=
-        overlayMode === 'multi-axis' || track.series.length === 1
+        overlayMode === 'multi-axis' || track.visibleSeries.length === 1
           ? measureYAxisGroupClearance(group)
           : measureYAxisGroupTickClearance(group)
       return clearance
@@ -174,6 +187,9 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       id: `empty-grid-slot-${cell.slotIndex}`,
       name: '',
       color: 'transparent',
+      lineType: 'linear',
+      pointType: 'none',
+      errorBar: { visible: false, width: 1.5, capWidth: 8 },
       points: [],
       xDomain: [0, 1],
       yDomain: [0, 1],
@@ -181,10 +197,12 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     const displayTrack: DisplayTrack = cell.series ?? {
       id: emptySeries.id,
       series: [emptySeries],
+      visibleSeries: [emptySeries],
       xDomain: emptySeries.xDomain,
       yDomain: emptySeries.yDomain,
     }
-    const series = displayTrack.series[0]
+    const hasVisibleSeries = !isEmpty && displayTrack.visibleSeries.length > 0
+    const series = displayTrack.visibleSeries[0] ?? displayTrack.series[0] ?? emptySeries
     const baseXScale =
       options.displayMode === 'independent'
         ? scaleLinear(displayTrack.xDomain, [0, cell.width])
@@ -220,8 +238,8 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       const exponentX =
         x +
         (group.side === 'left'
-          ? -(Y_AXIS_TICK_PADDING + tickTextWidth + exponentClearance)
-          : Y_AXIS_TICK_PADDING + tickTextWidth + exponentClearance)
+          ? -(Y_AXIS_TICK_PADDING + tickTextWidth + Y_AXIS_EXPONENT_GAP)
+          : Y_AXIS_TICK_PADDING + tickTextWidth + Y_AXIS_EXPONENT_GAP)
       const labelDistance =
         tickTextWidth +
         Y_AXIS_TICK_PADDING +
@@ -261,24 +279,69 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       const position = xScale(tick)
       return position > leftClearance && position < cell.width - rightClearance
     })
-    const seriesPaths = displayTrack.series.map((trackSeries) => {
+    const seriesPaths = displayTrack.visibleSeries.map((trackSeries) => {
       const yAxis = yAxes.find((axis) =>
         axis.seriesList.some((series) => series.id === trackSeries.id),
       )
       const seriesYScale = yAxis?.scale ?? yScale
-      const renderPoints = selectRenderablePoints(
+      const pathPoints = selectRenderablePoints(
         trackSeries.points,
         domain,
         cell.width,
         options.rendering,
       )
+      const hasError = (point: WaveformPoint) => {
+        const { lower, upper } = resolveWaveformPointErrors(point)
+        return lower !== 0 || upper !== 0
+      }
+      const hasErrorPoints = trackSeries.errorBar.visible && trackSeries.points.some(hasError)
+      const sharesDecorationPoints = trackSeries.pointType !== 'none' && hasErrorPoints
+      const sharedDecorationPoints = sharesDecorationPoints
+        ? selectDecorationPoints(
+            trackSeries.points,
+            domain,
+            cell.width,
+            Math.max(options.rendering.pointMinSpacing, options.rendering.errorBarMinSpacing),
+            options.rendering.downsample,
+            undefined,
+            hasError,
+          )
+        : undefined
+      const pointRenderPoints =
+        trackSeries.pointType === 'none'
+          ? []
+          : (sharedDecorationPoints ??
+            selectDecorationPoints(
+              trackSeries.points,
+              domain,
+              cell.width,
+              options.rendering.pointMinSpacing,
+              options.rendering.downsample,
+            ))
+      const errorBarRenderPoints = trackSeries.errorBar.visible
+        ? (sharedDecorationPoints?.filter(hasError) ??
+          selectDecorationPoints(
+            trackSeries.points,
+            domain,
+            cell.width,
+            options.rendering.errorBarMinSpacing,
+            options.rendering.downsample,
+            hasError,
+          ))
+        : []
+      const pathGenerator = line<WaveformPoint>()
+        .x((point) => xScale(point.x))
+        .y((point) => seriesYScale(point.y))
+      if (trackSeries.lineType === 'step-start') pathGenerator.curve(curveStepBefore)
+      if (trackSeries.lineType === 'step-middle') pathGenerator.curve(curveStep)
+      if (trackSeries.lineType === 'step-end' || trackSeries.lineType === 'step-after') {
+        pathGenerator.curve(curveStepAfter)
+      }
       return {
         series: trackSeries,
-        path: isEmpty
-          ? null
-          : line<WaveformPoint>()
-              .x((point) => xScale(point.x))
-              .y((point) => seriesYScale(point.y))(renderPoints),
+        path: isEmpty || trackSeries.lineType === 'none' ? null : pathGenerator(pathPoints),
+        pointRenderPoints,
+        errorBarRenderPoints,
         yScale: seriesYScale,
         yAxisIndex: yAxis?.index ?? 0,
       }
@@ -287,8 +350,10 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
     return {
       index,
       series,
-      seriesList: displayTrack.series,
+      seriesList: displayTrack.visibleSeries,
+      legendSeries: displayTrack.series,
       isEmpty,
+      hasVisibleSeries,
       column: cell.column,
       showYAxisLabel: !options.hideSecondaryLabels || cell.column === 0,
       yAxisLabelX: options.yAxisLabelX,
@@ -310,10 +375,11 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
       path: seriesPaths[0]?.path ?? null,
       seriesPaths,
       showXAxis:
-        options.displayMode === 'independent' ||
+        (isEmpty || hasVisibleSeries) &&
+        (options.displayMode === 'independent' ||
           (options.displayMode === 'compact'
             ? cell.row === options.grid.rowCount - 1
-          : bottomCells.has(cell.slotIndex)),
+            : bottomCells.has(cell.slotIndex))),
     }
   })
 }

src/components/core/types.ts

@@ -1,5 +1,10 @@
 import type { ScaleLinear } from 'd3'
-import type { WaveformPoint } from '../../types'
+import type {
+  ResolvedWaveformErrorBarOptions,
+  WaveformLineType,
+  WaveformPoint,
+  WaveformPointType,
+} from '../../types'
 
 /**
  * 显示系列
@@ -10,6 +15,9 @@ export interface DisplaySeries {
   name: string
   unit?: string
   color: string
+  lineType: WaveformLineType
+  pointType: WaveformPointType
+  errorBar: ResolvedWaveformErrorBarOptions
   points: WaveformPoint[]
   xDomain: [number, number]
   yDomain: [number, number]
@@ -17,7 +25,10 @@ export interface DisplaySeries {
 
 export interface DisplayTrack {
   id: string
+  /** Complete series list retained for legend rendering and visibility restoration. */
   series: DisplaySeries[]
+  /** Series currently participating in layout, rendering, and interaction. */
+  visibleSeries: DisplaySeries[]
   xDomain: [number, number]
   yDomain: [number, number]
 }
@@ -25,6 +36,8 @@ export interface DisplayTrack {
 export interface TrackSeriesPath {
   series: DisplaySeries
   path: string | null
+  pointRenderPoints: WaveformPoint[]
+  errorBarRenderPoints: WaveformPoint[]
   yScale: ScaleLinear<number, number>
   yAxisIndex: number
 }
@@ -57,8 +70,12 @@ export interface HoveredSeriesPoint extends DisplaySeries {
 export interface TrackLayout {
   index: number
   series: DisplaySeries
+  /** Visible series used by rendering and interaction code. */
   seriesList: DisplaySeries[]
+  /** Complete series list used by the legend. */
+  legendSeries: DisplaySeries[]
   isEmpty: boolean
+  hasVisibleSeries: boolean
   column: number
   showYAxisLabel: boolean
   yAxisLabelX: number

src/components/core/useWaveformData.ts

@@ -1,7 +1,13 @@
 import { shallowRef, watch } from 'vue'
 
-import { normalizeWaveformSeries } from '../../core'
-import type { WaveformData, WaveformPoint } from '../../types'
+import { normalizeWaveformSeries, resolveWaveformPointErrors } from '../../core'
+import type {
+  ResolvedWaveformErrorBarOptions,
+  WaveformData,
+  WaveformLineType,
+  WaveformPoint,
+  WaveformPointType,
+} from '../../types'
 import { paddedDomain } from '../../utils'
 
 export interface PreparedWaveformSeries {
@@ -10,18 +16,30 @@ export interface PreparedWaveformSeries {
   name: string
   unit?: string
   color?: string
+  lineType: WaveformLineType
+  pointType: WaveformPointType
+  errorBar: ResolvedWaveformErrorBarOptions
   points: WaveformPoint[]
   xDomain: [number, number]
   yDomain: [number, number]
 }
 
-function pointDomain(points: WaveformPoint[], key: 'x' | 'y'): [number, number] {
+function pointDomain(
+  points: WaveformPoint[],
+  key: 'x' | 'y',
+  includeErrors = false,
+): [number, number] {
   let minimum = Number.POSITIVE_INFINITY
   let maximum = Number.NEGATIVE_INFINITY
   points.forEach((point) => {
     const value = point[key]
     if (value < minimum) minimum = value
     if (value > maximum) maximum = value
+    if (key === 'y' && includeErrors) {
+      const errors = resolveWaveformPointErrors(point)
+      minimum = Math.min(minimum, point.y - errors.lower)
+      maximum = Math.max(maximum, point.y + errors.upper)
+    }
   })
   return paddedDomain(Number.isFinite(minimum) ? [minimum, maximum] : [])
 }
@@ -30,7 +48,7 @@ export function prepareWaveformSeries(data: WaveformData): PreparedWaveformSerie
   return normalizeWaveformSeries(data).map((series) => ({
     ...series,
     xDomain: pointDomain(series.points, 'x'),
-    yDomain: pointDomain(series.points, 'y'),
+    yDomain: pointDomain(series.points, 'y', series.errorBar.visible),
   }))
 }
 

src/components/data/types.ts

@@ -19,6 +19,10 @@ export type {
   WaveformLegendOptions,
   WaveformFrameStyle,
   SingleWaveformData,
+  WaveformLineType,
+  WaveformPointType,
+  WaveformErrorBarOptions,
+  ResolvedWaveformErrorBarOptions,
   WaveformSeries,
   WaveformData,
   NormalizedWaveformSeries,

src/components/index.ts

@@ -18,6 +18,9 @@ export type {
   WaveformFrameStyle,
   WaveformPoint,
   WaveformSeries,
+  WaveformLineType,
+  WaveformPointType,
+  WaveformErrorBarOptions,
   WaveformGridOptions,
 } from './data/types'
 

src/components/interaction/WaveformTooltip.test.ts

@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import WaveformTooltip from './WaveformTooltip.vue'
+
+describe('WaveformTooltip', () => {
+  const point = { x: 1, y: 12 }
+
+  function mountTooltip(positionX: number, containerWidth = 400) {
+    return mount(WaveformTooltip, {
+      props: {
+        visible: true,
+        position: { x: positionX, y: 100 },
+        timeUnit: 's',
+        hoveredPoint: point,
+        seriesPoints: [{ trackIndex: 0, name: 'Temperature', color: '#f00', point }],
+        containerWidth,
+        containerHeight: 300,
+      },
+    })
+  }
+
+  it('positions the tooltip to the right when enough space remains', () => {
+    const tooltip = mountTooltip(100).get('.waveform-tooltip')
+
+    expect(tooltip.attributes('style')).toContain('left: 112px')
+    expect(tooltip.attributes('style')).not.toContain('right:')
+  })
+
+  it('flips the tooltip to the left near the right boundary', () => {
+    const tooltip = mountTooltip(370).get('.waveform-tooltip')
+
+    expect(tooltip.attributes('style')).toContain('right: 42px')
+    expect(tooltip.attributes('style')).not.toContain('left:')
+  })
+
+  it('keeps the tooltip inside the left boundary when neither side has enough space', () => {
+    const tooltip = mountTooltip(100, 200).get('.waveform-tooltip')
+
+    expect(tooltip.attributes('style')).toContain('left: 8px')
+    expect(tooltip.attributes('style')).not.toContain('right:')
+  })
+
+  it('shows resolved asymmetric errors beside the hovered value', () => {
+    const pointWithErrors = { x: 1, y: 12, error: 1, upperError: 2 }
+    const wrapper = mount(WaveformTooltip, {
+      props: {
+        visible: true,
+        position: { x: 10, y: 10 },
+        timeUnit: 's',
+        hoveredPoint: pointWithErrors,
+        seriesPoints: [
+          {
+            trackIndex: 0,
+            name: '温度',
+            color: '#f00',
+            unit: 'C',
+            point: pointWithErrors,
+          },
+        ],
+        containerWidth: 400,
+        containerHeight: 300,
+      },
+    })
+
+    expect(wrapper.get('.waveform-tooltip__series small').text()).toBe('(+2 / -1)')
+  })
+
+  it('omits the error label when both resolved errors are zero', () => {
+    const point = { x: 1, y: 12 }
+    const wrapper = mount(WaveformTooltip, {
+      props: {
+        visible: true,
+        position: { x: 10, y: 10 },
+        timeUnit: 's',
+        hoveredPoint: point,
+        seriesPoints: [{ trackIndex: 0, name: '温度', color: '#f00', point }],
+        containerWidth: 400,
+        containerHeight: 300,
+      },
+    })
+
+    expect(wrapper.find('.waveform-tooltip__series small').exists()).toBe(false)
+  })
+})

src/components/interaction/WaveformTooltip.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { resolveWaveformPointErrors } from '../../core'
 import { formatTooltipNumber, formatTooltipTime } from '../../utils'
 import type { WaveformPoint } from '../data/types'
 
@@ -30,15 +31,34 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const tooltipGap = 12
+const containerPadding = 8
+const tooltipMaxWidth = 238
+
 const tooltipStyle = computed(() => {
   if (!props.visible || !props.hoveredPoint) return { display: 'none' }
 
   const estimatedHeight = 44 + props.seriesPoints.length * 22
+  const rightPlacement = props.position.x + tooltipGap
+  const leftPlacement = props.position.x - tooltipGap - tooltipMaxWidth
+  const horizontalStyle =
+    rightPlacement + tooltipMaxWidth <= props.containerWidth - containerPadding
+      ? { left: `${rightPlacement}px` }
+      : leftPlacement >= containerPadding
+        ? { right: `${props.containerWidth - props.position.x + tooltipGap}px` }
+        : { left: `${containerPadding}px` }
+
   return {
-    left: `${Math.min(props.position.x + 12, Math.max(8, props.containerWidth - 250))}px`,
+    ...horizontalStyle,
     top: `${Math.max(8, Math.min(props.position.y - 18, props.containerHeight - estimatedHeight - 8))}px`,
   }
 })
+
+function formatError(point: WaveformPoint): string | null {
+  const { lower, upper } = resolveWaveformPointErrors(point)
+  if (lower === 0 && upper === 0) return null
+  return `(+${formatTooltipNumber(upper)} / -${formatTooltipNumber(lower)})`
+}
 </script>
 
 <template>
@@ -60,6 +80,7 @@ const tooltipStyle = computed(() => {
       <span>
         {{ formatTooltipNumber(seriesPoint.point.y)
         }}{{ seriesPoint.unit ? ` ${seriesPoint.unit}` : '' }}
+        <small v-if="formatError(seriesPoint.point)">{{ formatError(seriesPoint.point) }}</small>
       </span>
     </span>
   </div>
@@ -67,6 +88,7 @@ const tooltipStyle = computed(() => {
 
 <style scoped>
 .waveform-tooltip {
+  box-sizing: border-box;
   position: absolute;
   z-index: 2;
   display: grid;
@@ -111,4 +133,9 @@ const tooltipStyle = computed(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.waveform-tooltip__series small {
+  color: #667085;
+  white-space: nowrap;
+}
 </style>

src/components/rendering/WaveformLegend.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { WaveformLegendPosition } from '../../types'
 import type { DisplaySeries } from '../core/types'
+import {
+  waveformLegendErrorBarPath,
+  waveformLegendLinePath,
+  waveformPointSymbolPath,
+} from './seriesStyle'
 
 interface Props {
   series: DisplaySeries[]
@@ -9,9 +16,26 @@ interface Props {
   backgroundColor: string
   width: number
   height: number
+  interactive?: boolean
+  hiddenSeriesIds?: string[]
 }
 
-defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  interactive: false,
+  hiddenSeriesIds: () => [],
+})
+const emit = defineEmits<{
+  toggle: [seriesId: string]
+}>()
+const hiddenSeriesIdSet = computed(() => new Set(props.hiddenSeriesIds))
+
+function isHidden(seriesId: string): boolean {
+  return hiddenSeriesIdSet.value.has(seriesId)
+}
+
+function toggleSeries(seriesId: string) {
+  if (props.interactive) emit('toggle', seriesId)
+}
 </script>
 
 <template>
@@ -32,19 +56,62 @@ defineProps<Props>()
     >
       <div
         class="waveform-legend__panel"
-        :class="`waveform-legend__panel--${orientation}`"
+        :class="[
+          `waveform-legend__panel--${orientation}`,
+          { 'waveform-legend__panel--interactive': interactive },
+        ]"
         :style="{ backgroundColor }"
         role="list"
       >
-        <div
+        <button
           v-for="item in series"
           :key="item.id"
           class="waveform-legend__item waveform-chart__legend-item"
+          :class="{ 'is-hidden': isHidden(item.id) }"
+          type="button"
           role="listitem"
+          :disabled="!interactive"
+          :aria-pressed="interactive ? !isHidden(item.id) : undefined"
+          :aria-label="
+            interactive ? `${isHidden(item.id) ? '显示' : '隐藏'}曲线 ${item.name}` : undefined
+          "
+          @click.stop="toggleSeries(item.id)"
         >
-          <i class="waveform-legend__swatch" :style="{ backgroundColor: item.color }" />
+          <svg
+            class="waveform-legend__swatch"
+            viewBox="0 0 26 16"
+            aria-hidden="true"
+            :data-line-type="item.lineType"
+            :data-point-type="item.pointType"
+            :data-error-bar-visible="item.errorBar.visible || undefined"
+          >
+            <path
+              v-if="waveformLegendLinePath(item.lineType)"
+              class="waveform-legend__line"
+              :d="waveformLegendLinePath(item.lineType) ?? undefined"
+              :stroke="item.color"
+              stroke-width="1.5"
+              fill="none"
+            />
+            <path
+              v-if="item.errorBar.visible"
+              class="waveform-legend__error-bar"
+              :d="waveformLegendErrorBarPath(item.errorBar.capWidth)"
+              :stroke="item.errorBar.color || item.color"
+              :stroke-width="item.errorBar.width"
+              stroke-linecap="butt"
+              fill="none"
+            />
+            <path
+              v-if="item.pointType !== 'none'"
+              class="waveform-legend__point"
+              :d="waveformPointSymbolPath(item.pointType, 30) ?? undefined"
+              :fill="item.color"
+              transform="translate(13 8)"
+            />
+          </svg>
           <span class="waveform-legend__label" :title="item.name">{{ item.name }}</span>
-        </div>
+        </button>
       </div>
     </div>
   </foreignObject>
@@ -119,6 +186,10 @@ defineProps<Props>()
   border-radius: 4px;
 }
 
+.waveform-legend__panel--interactive {
+  pointer-events: auto;
+}
+
 .waveform-legend__panel--horizontal {
   flex-flow: row wrap;
   align-items: center;
@@ -135,13 +206,44 @@ defineProps<Props>()
   max-width: 160px;
   align-items: center;
   gap: 6px;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   white-space: nowrap;
+  appearance: none;
+  background: none;
+  border: 0;
+}
+
+.waveform-legend__item:disabled {
+  opacity: 1;
+}
+
+.waveform-legend__panel--interactive .waveform-legend__item {
+  cursor: pointer;
+}
+
+.waveform-legend__panel--interactive .waveform-legend__item:focus-visible {
+  outline: 2px solid #1677ff;
+  outline-offset: 2px;
+}
+
+.waveform-legend__item.is-hidden {
+  opacity: 0.45;
+}
+
+.waveform-legend__item.is-hidden .waveform-legend__label {
+  text-decoration: line-through;
 }
 
 .waveform-legend__swatch {
-  flex: 0 0 18px;
-  width: 18px;
-  height: 2px;
+  flex: 0 0 26px;
+  width: 26px;
+  height: 16px;
+  overflow: visible;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
 .waveform-legend__label {

src/components/rendering/WaveformSeriesLayer.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { resolveWaveformPointErrors } from '../../core'
+import type { TrackLayout, TrackSeriesPath } from '../core/types'
+import { waveformPointSeriesPath } from './seriesStyle'
+
+const props = defineProps<{
+  track: TrackLayout
+  clipPathId: string
+}>()
+
+interface RenderedSeriesPath extends TrackSeriesPath {
+  pointPath: string | null
+  errorBarPath: string | null
+}
+
+const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
+  props.track.seriesPaths.map((seriesPath) => {
+    const pointPath = waveformPointSeriesPath(
+      seriesPath.series.pointType,
+      seriesPath.pointRenderPoints.map((point) => ({
+        x: props.track.xScale(point.x),
+        y: seriesPath.yScale(point.y),
+      })),
+    )
+    const capHalfWidth = seriesPath.series.errorBar.capWidth / 2
+    const errorBarPath = seriesPath.errorBarRenderPoints
+      .map((point) => {
+        const { lower, upper } = resolveWaveformPointErrors(point)
+        const x = props.track.xScale(point.x)
+        const lowerY = seriesPath.yScale(point.y - lower)
+        const upperY = seriesPath.yScale(point.y + upper)
+        return [
+          `M${x - capHalfWidth},${lowerY}H${x + capHalfWidth}`,
+          `M${x},${lowerY}V${upperY}`,
+          `M${x - capHalfWidth},${upperY}H${x + capHalfWidth}`,
+        ].join('')
+      })
+      .join('')
+    return { ...seriesPath, pointPath, errorBarPath: errorBarPath || null }
+  }),
+)
+</script>
+
+<template>
+  <g
+    v-if="!track.isEmpty && track.hasVisibleSeries"
+    class="waveform-track__series"
+    :clip-path="`url(#${clipPathId}-${track.index})`"
+  >
+    <g
+      v-for="seriesPath in renderedSeriesPaths"
+      :key="seriesPath.series.id"
+      class="waveform-track__series-item waveform-chart__series"
+      :data-series-id="seriesPath.series.id"
+      :data-series-name="seriesPath.series.name || undefined"
+    >
+      <path
+        v-if="seriesPath.path"
+        class="waveform-track__line waveform-chart__line"
+        :data-series-id="seriesPath.series.id"
+        :data-series-name="seriesPath.series.name || undefined"
+        :data-y-axis-index="seriesPath.yAxisIndex"
+        :data-line-type="seriesPath.series.lineType"
+        :d="seriesPath.path"
+        :stroke="seriesPath.series.color"
+      />
+
+      <g
+        v-if="seriesPath.series.errorBar.visible"
+        class="waveform-track__error-bars waveform-chart__error-bars"
+        :data-series-id="seriesPath.series.id"
+      >
+        <path
+          v-if="seriesPath.errorBarPath"
+          class="waveform-track__error-bar waveform-chart__error-bar"
+          :d="seriesPath.errorBarPath"
+          :stroke="seriesPath.series.errorBar.color || seriesPath.series.color"
+          :stroke-width="seriesPath.series.errorBar.width"
+        />
+      </g>
+
+      <g
+        v-if="seriesPath.series.pointType !== 'none'"
+        class="waveform-track__points waveform-chart__points"
+        :data-series-id="seriesPath.series.id"
+        :data-point-type="seriesPath.series.pointType"
+      >
+        <path
+          v-if="seriesPath.pointPath"
+          class="waveform-track__point waveform-chart__point"
+          :d="seriesPath.pointPath"
+          :fill="seriesPath.series.color"
+        />
+      </g>
+    </g>
+  </g>
+</template>
+
+<style scoped>
+.waveform-track__line {
+  fill: none;
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.waveform-track__error-bar {
+  fill: none;
+}
+
+.waveform-track__point,
+.waveform-track__error-bar {
+  pointer-events: none;
+}
+</style>

src/components/rendering/WaveformTrack.vue

@@ -15,6 +15,7 @@ import type {
   WaveformYAxisLayout,
 } from '../core/types'
 import WaveformLegend from './WaveformLegend.vue'
+import WaveformSeriesLayer from './WaveformSeriesLayer.vue'
 
 interface Props {
   /** 轨道布局信息 */
@@ -47,6 +48,10 @@ interface Props {
   legendOrientation?: 'horizontal' | 'vertical'
   /** 多曲线图例背景颜色 */
   legendBackgroundColor?: string
+  /** 图例是否允许切换曲线显隐 */
+  legendInteractive?: boolean
+  /** 当前隐藏的系列 ID */
+  hiddenSeriesIds?: string[]
 }
 
 interface Emits {
@@ -54,6 +59,7 @@ interface Emits {
   (e: 'pointer-leave'): void
   (e: 'click', event: MouseEvent): void
   (e: 'contextmenu', event: MouseEvent): void
+  (e: 'series-visibility-toggle', seriesId: string): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -61,6 +67,8 @@ const props = withDefaults(defineProps<Props>(), {
   legendPosition: 'top-right',
   legendOrientation: 'vertical',
   legendBackgroundColor: 'rgba(255, 255, 255, 0.7)',
+  legendInteractive: false,
+  hiddenSeriesIds: () => [],
 })
 const emit = defineEmits<Emits>()
 
@@ -92,14 +100,6 @@ function setYAxisElement(element: unknown, index: number) {
   if (element) yAxisElements.value[index] = element as SVGGElement
 }
 
-function resolveHoveredYScale() {
-  const seriesId = props.hoveredPoint?.id
-  return (
-    props.track.seriesPaths.find((seriesPath) => seriesPath.series.id === seriesId)?.yScale ??
-    props.track.yScale
-  )
-}
-
 /**
  * 判断是否应该显示 Y 轴标签
  * 在紧凑模式下，当轨道高度太小时隐藏标签避免重叠
@@ -121,12 +121,6 @@ function crosshairX(): number {
     : 0
 }
 
-function crosshairY(): number {
-  return props.hoveredPoint && props.hoveredPoint.trackIndex === props.track.index
-    ? resolveHoveredYScale()(props.hoveredPoint.point.y)
-    : 0
-}
-
 function hasCrosshair(): boolean {
   return (
     props.showTooltip &&
@@ -213,7 +207,11 @@ watch(
     />
 
     <!-- 网格和背景 -->
-    <g v-if="!track.isEmpty" :clip-path="`url(#${clipPathId}-${track.index})`" aria-hidden="true">
+    <g
+      v-if="!track.isEmpty && track.hasVisibleSeries"
+      :clip-path="`url(#${clipPathId}-${track.index})`"
+      aria-hidden="true"
+    >
       <g
         class="waveform-track__grid waveform-track__grid--minor waveform-chart__grid waveform-chart__grid--minor"
       >
@@ -258,7 +256,7 @@ watch(
 
     <!-- 帧编号水印 -->
     <text
-      v-if="!track.isEmpty && frameNumber !== undefined"
+      v-if="!track.isEmpty && track.hasVisibleSeries && frameNumber !== undefined"
       class="waveform-track__watermark waveform-chart__watermark"
       :x="(track.width ?? innerWidth) / 2"
       :y="track.height / 2"
@@ -344,6 +342,7 @@ watch(
     <g
       v-if="
         !track.isEmpty &&
+        track.hasVisibleSeries &&
         track.seriesList.length === 1 &&
         track.showYAxisLabel &&
         resolveYAxisLabel(track.series) &&
@@ -407,45 +406,21 @@ watch(
       aria-hidden="true"
     />
 
-    <!-- 波形线 -->
-    <g v-if="!track.isEmpty" class="waveform-track__lines">
-      <path
-        v-for="seriesPath in track.seriesPaths"
-        :key="seriesPath.series.id"
-        class="waveform-track__line waveform-chart__line"
-        :data-series-id="seriesPath.series.id"
-        :data-series-name="seriesPath.series.name || undefined"
-        :data-y-axis-index="seriesPath.yAxisIndex"
-        :d="seriesPath.path ?? undefined"
-        :stroke="seriesPath.series.color"
-        :clip-path="`url(#${clipPathId}-${track.index})`"
-      />
-    </g>
-
-    <WaveformLegend
-      v-if="!track.isEmpty && track.seriesList.length > 1"
-      :series="track.seriesList"
-      :position="legendPosition"
-      :orientation="legendOrientation"
-      :background-color="legendBackgroundColor"
-      :width="track.width ?? innerWidth"
-      :height="track.height"
-    />
+    <!-- 波形系列隔离在静态子组件中，避免 hover 更新遍历大量 SVG 节点。 -->
+    <WaveformSeriesLayer :track="track" :clip-path-id="clipPathId" />
 
     <!-- 十字线 -->
     <g
-      v-if="!track.isEmpty && hasCrosshair()"
+      v-if="!track.isEmpty && track.hasVisibleSeries && hasCrosshair()"
       class="waveform-track__crosshair waveform-chart__crosshair"
       :clip-path="`url(#${clipPathId}-${track.index})`"
     >
       <line :x1="crosshairX()" :x2="crosshairX()" y1="0" :y2="track.height" />
-      <line x1="0" :x2="track.width ?? innerWidth" :y1="crosshairY()" :y2="crosshairY()" />
-      <circle :cx="crosshairX()" :cy="crosshairY()" r="4" :fill="track.series.color" />
     </g>
 
     <!-- 交互覆盖层（仅在独立模式下） -->
     <rect
-      v-if="!track.isEmpty && displayMode === 'independent'"
+      v-if="!track.isEmpty && track.hasVisibleSeries && displayMode === 'independent'"
       class="waveform-track__overlay waveform-track__overlay--independent waveform-chart__overlay waveform-chart__overlay--independent"
       :class="{
         'is-zoomable': zoomable && interactionMode === 'zoom',
@@ -459,19 +434,37 @@ watch(
       @click="emit('click', $event)"
       @contextmenu="emit('contextmenu', $event)"
     />
+
+    <text
+      v-if="!track.isEmpty && !track.hasVisibleSeries"
+      class="waveform-track__no-visible-series"
+      :x="(track.width ?? innerWidth) / 2"
+      :y="track.height / 2"
+      text-anchor="middle"
+      dominant-baseline="central"
+    >
+      暂无可见曲线
+    </text>
+
+    <WaveformLegend
+      v-if="!track.isEmpty && track.legendSeries.length > 1"
+      :series="track.legendSeries"
+      :position="legendPosition"
+      :orientation="legendOrientation"
+      :background-color="legendBackgroundColor"
+      :interactive="legendInteractive"
+      :hidden-series-ids="hiddenSeriesIds"
+      :width="track.width ?? innerWidth"
+      :height="track.height"
+      @toggle="emit('series-visibility-toggle', $event)"
+    />
   </g>
 </template>
 
 <style scoped>
 .waveform-track {
   isolation: isolate;
-}
-
-.waveform-track__line {
-  fill: none;
-  stroke-width: 1.5;
-  stroke-linejoin: round;
-  stroke-linecap: round;
+  pointer-events: none;
 }
 
 .waveform-track__y-axis-label-bg {
@@ -517,9 +510,16 @@ watch(
 .waveform-track__overlay {
   fill: transparent;
   cursor: crosshair;
+  pointer-events: all;
   touch-action: none;
 }
 
+.waveform-track__no-visible-series {
+  fill: #8c8c8c;
+  font: 13px sans-serif;
+  pointer-events: none;
+}
+
 .waveform-track__overlay.is-zoomable {
   cursor: grab;
 }
@@ -542,11 +542,6 @@ watch(
   stroke-dasharray: 4 3;
 }
 
-.waveform-track__crosshair circle {
-  stroke: #fff;
-  stroke-width: 2;
-}
-
 .waveform-track__axis-endpoint {
   fill: #667085;
   font-size: 11px;

src/components/rendering/index.ts

@@ -1,2 +1,3 @@
 export { default as WaveformTrack } from './WaveformTrack.vue'
 export { default as WaveformLegend } from './WaveformLegend.vue'
+export { waveformPointSymbolPath } from './seriesStyle'

src/components/rendering/seriesStyle.ts

@@ -0,0 +1,98 @@
+import {
+  symbol,
+  symbolCircle,
+  symbolDiamond,
+  symbolSquare,
+  symbolTriangle,
+  type SymbolType,
+} from 'd3'
+
+import type { WaveformLineType, WaveformPointType } from '../../types'
+
+const LEGEND_SWATCH_CENTER_X = 13
+const LEGEND_ERROR_BAR_TOP = 2
+const LEGEND_ERROR_BAR_BOTTOM = 14
+const LEGEND_ERROR_BAR_DEFAULT_CAP_WIDTH = 8
+const LEGEND_ERROR_BAR_MAX_CAP_WIDTH = 24
+
+const pointSymbols: Record<Exclude<WaveformPointType, 'none'>, SymbolType> = {
+  circle: symbolCircle,
+  square: symbolSquare,
+  triangle: symbolTriangle,
+  diamond: symbolDiamond,
+}
+
+export function waveformPointSymbolPath(pointType: WaveformPointType, size = 48): string | null {
+  if (pointType === 'none') return null
+  return symbol().type(pointSymbols[pointType]).size(size)() ?? null
+}
+
+export function waveformPointSeriesPath(
+  pointType: WaveformPointType,
+  points: ReadonlyArray<{ x: number; y: number }>,
+  size = 48,
+): string | null {
+  if (pointType === 'none' || points.length === 0) return null
+
+  if (pointType === 'circle') {
+    const radius = Math.sqrt(size / Math.PI)
+    return points
+      .map(
+        ({ x, y }) =>
+          `M${x + radius},${y}A${radius},${radius},0,1,1,${x - radius},${y}` +
+          `A${radius},${radius},0,1,1,${x + radius},${y}`,
+      )
+      .join('')
+  }
+
+  if (pointType === 'square') {
+    const side = Math.sqrt(size)
+    const halfSide = side / 2
+    return points
+      .map(({ x, y }) => `M${x - halfSide},${y - halfSide}h${side}v${side}h${-side}Z`)
+      .join('')
+  }
+
+  if (pointType === 'triangle') {
+    const topOffset = Math.sqrt(size / ((Math.sqrt(3) * 3) / 4))
+    const halfWidth = (topOffset * Math.sqrt(3)) / 2
+    const bottomOffset = topOffset / 2
+    return points
+      .map(
+        ({ x, y }) =>
+          `M${x},${y - topOffset}L${x + halfWidth},${y + bottomOffset}` +
+          `L${x - halfWidth},${y + bottomOffset}Z`,
+      )
+      .join('')
+  }
+
+  const verticalOffset = Math.sqrt(size / (2 * Math.tan(Math.PI / 6)))
+  const horizontalOffset = verticalOffset * Math.tan(Math.PI / 6)
+  return points
+    .map(
+      ({ x, y }) =>
+        `M${x},${y - verticalOffset}L${x + horizontalOffset},${y}` +
+        `L${x},${y + verticalOffset}L${x - horizontalOffset},${y}Z`,
+    )
+    .join('')
+}
+
+export function waveformLegendLinePath(lineType: WaveformLineType): string | null {
+  if (lineType === 'none') return null
+  return 'M1 8H25'
+}
+
+export function waveformLegendErrorBarPath(capWidth: number): string {
+  const resolvedCapWidth =
+    Number.isFinite(capWidth) && capWidth > 0
+      ? Math.min(capWidth, LEGEND_ERROR_BAR_MAX_CAP_WIDTH)
+      : LEGEND_ERROR_BAR_DEFAULT_CAP_WIDTH
+  const capHalfWidth = resolvedCapWidth / 2
+  const capStart = LEGEND_SWATCH_CENTER_X - capHalfWidth
+  const capEnd = LEGEND_SWATCH_CENTER_X + capHalfWidth
+  return [
+    `M${capStart} ${LEGEND_ERROR_BAR_TOP}H${capEnd}`,
+    `M${LEGEND_SWATCH_CENTER_X} ${LEGEND_ERROR_BAR_TOP}V${LEGEND_ERROR_BAR_BOTTOM}`,
+    `M${capStart} ${LEGEND_ERROR_BAR_BOTTOM}H${capEnd}`,
+  ].join('')
+}

src/core/data.ts

@@ -5,6 +5,37 @@ import type {
   NormalizedWaveformSeries,
 } from '../types'
 
+const DEFAULT_ERROR_BAR_WIDTH = 1.5
+const DEFAULT_ERROR_BAR_CAP_WIDTH = 8
+
+function normalizeError(value: number | undefined): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : undefined
+}
+
+function normalizeWaveformPoint(point: WaveformPoint): WaveformPoint {
+  const error = normalizeError(point.error)
+  const lowerError = normalizeError(point.lowerError)
+  const upperError = normalizeError(point.upperError)
+  return {
+    x: point.x,
+    y: point.y,
+    ...(error === undefined ? {} : { error }),
+    ...(lowerError === undefined ? {} : { lowerError }),
+    ...(upperError === undefined ? {} : { upperError }),
+  }
+}
+
+export function resolveWaveformPointErrors(point: WaveformPoint): {
+  lower: number
+  upper: number
+} {
+  const symmetric = normalizeError(point.error) ?? 0
+  return {
+    lower: normalizeError(point.lowerError) ?? symmetric,
+    upper: normalizeError(point.upperError) ?? symmetric,
+  }
+}
+
 /**
  * 规范化单波形数据
  * @param data 输入数据（samples 或 points 格式）
@@ -22,7 +53,7 @@ export function normalizeWaveformData(data: SingleWaveformData): WaveformPoint[]
 
   return data.points
     .filter((point) => Number.isFinite(point.x) && Number.isFinite(point.y))
-    .map((point) => ({ ...point }))
+    .map(normalizeWaveformPoint)
     .sort((left, right) => left.x - right.x)
 }
 
@@ -34,7 +65,22 @@ export function normalizeWaveformData(data: SingleWaveformData): WaveformPoint[]
 export function normalizeWaveformSeries(data: WaveformData): NormalizedWaveformSeries[] {
   if (data.kind !== 'series') {
     const points = normalizeWaveformData(data)
-    return points.length > 0 ? [{ id: 'series-0', name: '', points }] : []
+    return points.length > 0
+      ? [
+          {
+            id: 'series-0',
+            name: '',
+            lineType: 'linear',
+            pointType: 'none',
+            errorBar: {
+              visible: false,
+              width: DEFAULT_ERROR_BAR_WIDTH,
+              capWidth: DEFAULT_ERROR_BAR_CAP_WIDTH,
+            },
+            points,
+          },
+        ]
+      : []
   }
 
   const usedIds = new Set<string>()
@@ -52,12 +98,31 @@ export function normalizeWaveformSeries(data: WaveformData): NormalizedWaveformS
       }
       usedIds.add(uniqueId)
 
+      const requestedLineType = series.lineType ?? 'linear'
+      const requestedPointType = series.pointType ?? 'none'
+      const errorBarVisible = series.errorBar?.visible === true
+      const lineType =
+        requestedLineType === 'none' && requestedPointType === 'none' && !errorBarVisible
+          ? 'linear'
+          : requestedLineType
+      const width = Number(series.errorBar?.width)
+      const capWidth = Number(series.errorBar?.capWidth)
+
       return {
         id: uniqueId,
         trackId: series.trackId?.trim() || undefined,
         name: series.name,
         unit: series.unit,
         color: series.color,
+        lineType,
+        pointType: requestedPointType,
+        errorBar: {
+          visible: errorBarVisible,
+          color: series.errorBar?.color,
+          width: Number.isFinite(width) && width > 0 ? width : DEFAULT_ERROR_BAR_WIDTH,
+          capWidth:
+            Number.isFinite(capWidth) && capWidth > 0 ? capWidth : DEFAULT_ERROR_BAR_CAP_WIDTH,
+        },
         points: normalizeWaveformData(series.data),
       }
     })

src/core/index.ts

@@ -3,10 +3,11 @@
  */
 
 // 数据处理
-export { normalizeWaveformData, normalizeWaveformSeries } from './data'
+export { normalizeWaveformData, normalizeWaveformSeries, resolveWaveformPointErrors } from './data'
 export {
   DEFAULT_WAVEFORM_RENDERING_OPTIONS,
   resolveWaveformRenderingOptions,
+  selectDecorationPoints,
   selectRenderablePoints,
   type ResolvedWaveformRenderingOptions,
 } from './rendering'

src/core/rendering.test.ts

@@ -1,7 +1,11 @@
 import { describe, expect, it } from 'vitest'
 
 import type { WaveformPoint } from '../types'
-import { resolveWaveformRenderingOptions, selectRenderablePoints } from './rendering'
+import {
+  resolveWaveformRenderingOptions,
+  selectDecorationPoints,
+  selectRenderablePoints,
+} from './rendering'
 
 describe('waveform rendering selection', () => {
   const points = Array.from({ length: 10_000 }, (_, index): WaveformPoint => ({
@@ -37,7 +41,85 @@ describe('waveform rendering selection', () => {
 
   it('normalizes invalid rendering options to stable defaults', () => {
     expect(
-      resolveWaveformRenderingOptions({ downsampleThreshold: -1, maxPointsPerPixel: 0 }),
-    ).toEqual({ downsample: true, downsampleThreshold: 2_000, maxPointsPerPixel: 4 })
+      resolveWaveformRenderingOptions({
+        downsampleThreshold: -1,
+        maxPointsPerPixel: 0,
+        pointMinSpacing: -1,
+        errorBarMinSpacing: Number.POSITIVE_INFINITY,
+      }),
+    ).toEqual({
+      downsample: true,
+      downsampleThreshold: 2_000,
+      maxPointsPerPixel: 4,
+      pointMinSpacing: 10,
+      errorBarMinSpacing: 12,
+    })
+  })
+
+  it('accepts custom decoration spacing and uses zero to disable it', () => {
+    expect(resolveWaveformRenderingOptions({ pointMinSpacing: 6, errorBarMinSpacing: 0 })).toEqual({
+      downsample: true,
+      downsampleThreshold: 2_000,
+      maxPointsPerPixel: 4,
+      pointMinSpacing: 6,
+      errorBarMinSpacing: 0,
+    })
+  })
+
+  it('selects evenly distributed source points for dense decorations', () => {
+    const selected = selectDecorationPoints(points, [0, 9_999], 100, 10, true)
+
+    expect(selected.length).toBeLessThanOrEqual(12)
+    expect(selected[0]).toBe(points[0])
+    expect(selected.at(-1)).toBe(points.at(-1))
+    expect(selected.every((point) => points.includes(point))).toBe(true)
+  })
+
+  it('clips decorations exactly to the visible domain and preserves sparse points', () => {
+    const sparsePoints = [
+      { x: 0, y: 0 },
+      { x: 40, y: 1 },
+      { x: 80, y: 2 },
+      { x: 120, y: 3 },
+    ]
+
+    expect(selectDecorationPoints(sparsePoints, [40, 80], 100, 10, true)).toEqual([
+      sparsePoints[1],
+      sparsePoints[2],
+    ])
+  })
+
+  it('supports filtering decoration candidates and disabling sampling', () => {
+    const errorPoints = Array.from({ length: 100 }, (_, index) => ({
+      x: index,
+      y: index,
+      error: index % 10 === 0 ? 1 : 0,
+    }))
+    const hasError = (point: WaveformPoint) => (point.error ?? 0) > 0
+
+    expect(selectDecorationPoints(errorPoints, [0, 99], 100, 12, true, hasError)).toHaveLength(10)
+    expect(selectDecorationPoints(errorPoints, [0, 99], 100, 12, false)).toHaveLength(100)
+    expect(selectDecorationPoints(errorPoints, [0, 99], 100, 0, true)).toHaveLength(100)
+  })
+
+  it('prefers priority candidates within dense decoration buckets', () => {
+    const priorityPoints = Array.from({ length: 100 }, (_, index) => ({
+      x: index,
+      y: index,
+      error: index % 20 === 1 ? 1 : 0,
+    }))
+    const hasError = (point: WaveformPoint) => (point.error ?? 0) > 0
+    const selected = selectDecorationPoints(
+      priorityPoints,
+      [0, 99],
+      100,
+      20,
+      true,
+      undefined,
+      hasError,
+    )
+
+    expect(selected.filter(hasError)).toEqual(priorityPoints.filter(hasError))
+    expect(selected.length).toBeLessThanOrEqual(Math.ceil(100 / 20) + 2)
   })
 })

src/core/rendering.ts

@@ -6,12 +6,16 @@ export interface ResolvedWaveformRenderingOptions {
   downsample: boolean
   downsampleThreshold: number
   maxPointsPerPixel: number
+  pointMinSpacing: number
+  errorBarMinSpacing: number
 }
 
 export const DEFAULT_WAVEFORM_RENDERING_OPTIONS: ResolvedWaveformRenderingOptions = {
   downsample: true,
   downsampleThreshold: 2_000,
   maxPointsPerPixel: 4,
+  pointMinSpacing: 10,
+  errorBarMinSpacing: 12,
 }
 
 const pointBisector = bisector((point: WaveformPoint) => point.x)
@@ -21,6 +25,8 @@ export function resolveWaveformRenderingOptions(
 ): ResolvedWaveformRenderingOptions {
   const threshold = Number(options?.downsampleThreshold)
   const pointsPerPixel = Number(options?.maxPointsPerPixel)
+  const pointMinSpacing = Number(options?.pointMinSpacing)
+  const errorBarMinSpacing = Number(options?.errorBarMinSpacing)
   return {
     downsample: options?.downsample ?? DEFAULT_WAVEFORM_RENDERING_OPTIONS.downsample,
     downsampleThreshold:
@@ -31,6 +37,14 @@ export function resolveWaveformRenderingOptions(
       Number.isFinite(pointsPerPixel) && pointsPerPixel > 0
         ? pointsPerPixel
         : DEFAULT_WAVEFORM_RENDERING_OPTIONS.maxPointsPerPixel,
+    pointMinSpacing:
+      Number.isFinite(pointMinSpacing) && pointMinSpacing >= 0
+        ? pointMinSpacing
+        : DEFAULT_WAVEFORM_RENDERING_OPTIONS.pointMinSpacing,
+    errorBarMinSpacing:
+      Number.isFinite(errorBarMinSpacing) && errorBarMinSpacing >= 0
+        ? errorBarMinSpacing
+        : DEFAULT_WAVEFORM_RENDERING_OPTIONS.errorBarMinSpacing,
   }
 }
 
@@ -106,3 +120,96 @@ export function selectRenderablePoints(
   pushUniquePoint(result, points[end - 1])
   return result
 }
+
+/** Selects real source points for discrete decorations without using line-extrema sampling. */
+export function selectDecorationPoints(
+  points: WaveformPoint[],
+  domain: [number, number],
+  width: number,
+  minSpacing: number,
+  downsample: boolean,
+  predicate: (point: WaveformPoint) => boolean = () => true,
+  priorityPredicate?: (point: WaveformPoint) => boolean,
+): WaveformPoint[] {
+  if (!points.length || width <= 0) return []
+
+  const domainStart = Math.min(domain[0], domain[1])
+  const domainEnd = Math.max(domain[0], domain[1])
+  const visibleStart = pointBisector.left(points, domainStart)
+  const visibleEnd = pointBisector.right(points, domainEnd)
+  if (!downsample || minSpacing === 0) {
+    return points.slice(visibleStart, visibleEnd).filter(predicate)
+  }
+
+  const span = domainEnd - domainStart
+  if (span <= 0) {
+    const point = points.slice(visibleStart, visibleEnd).find(predicate)
+    return point ? [point] : []
+  }
+
+  const toPixel = (point: WaveformPoint) => ((point.x - domainStart) / span) * width
+  const sparsePoints: WaveformPoint[] = []
+  let alreadySparse = true
+  let first: WaveformPoint | undefined
+  let last: WaveformPoint | undefined
+  let previousPixel = Number.NEGATIVE_INFINITY
+  let candidateCount = 0
+
+  for (let index = visibleStart; index < visibleEnd; index += 1) {
+    const point = points[index]
+    if (!predicate(point)) continue
+    first ??= point
+    last = point
+    candidateCount += 1
+    if (!alreadySparse) continue
+    const pixel = toPixel(point)
+    if (pixel - previousPixel < minSpacing) {
+      alreadySparse = false
+      sparsePoints.length = 0
+      continue
+    }
+    sparsePoints.push(point)
+    previousPixel = pixel
+  }
+  if (candidateCount <= 2) {
+    if (!first) return []
+    return last && last !== first ? [first, last] : [first]
+  }
+  if (alreadySparse) return sparsePoints
+
+  const bucketCount = Math.max(1, Math.ceil(width / minSpacing))
+  const bucketWidth = width / bucketCount
+  const bucketPoints: Array<WaveformPoint | undefined> = Array.from({ length: bucketCount })
+  const bucketDistances = Array.from({ length: bucketCount }, () => Number.POSITIVE_INFINITY)
+  const priorityBucketPoints: Array<WaveformPoint | undefined> = Array.from({
+    length: bucketCount,
+  })
+  const priorityBucketDistances = Array.from(
+    { length: bucketCount },
+    () => Number.POSITIVE_INFINITY,
+  )
+
+  for (let index = visibleStart; index < visibleEnd; index += 1) {
+    const point = points[index]
+    if (!predicate(point)) continue
+    const pixel = Math.max(0, Math.min(width, toPixel(point)))
+    const bucket = Math.min(bucketCount - 1, Math.floor(pixel / bucketWidth))
+    const center = (bucket + 0.5) * bucketWidth
+    const distance = Math.abs(pixel - center)
+    if (distance < bucketDistances[bucket]) {
+      bucketPoints[bucket] = point
+      bucketDistances[bucket] = distance
+    }
+    if (priorityPredicate?.(point) && distance < priorityBucketDistances[bucket]) {
+      priorityBucketPoints[bucket] = point
+      priorityBucketDistances[bucket] = distance
+    }
+  }
+
+  const selected = bucketPoints
+    .map((point, index) => priorityBucketPoints[index] ?? point)
+    .filter((point): point is WaveformPoint => point !== undefined)
+  if (first && selected[0] !== first) selected.unshift(first)
+  if (last && selected.at(-1) !== last) selected.push(last)
+  return selected
+}

src/index.ts

@@ -24,6 +24,10 @@ export type {
   WaveformFrameStyle,
   // 数据类型
   SingleWaveformData,
+  WaveformLineType,
+  WaveformPointType,
+  WaveformErrorBarOptions,
+  ResolvedWaveformErrorBarOptions,
   WaveformSeries,
   WaveformData,
   NormalizedWaveformSeries,

src/test/setup.ts

@@ -8,6 +8,8 @@ interface ResizeObserverEntryMock {
 type ResizeCallback = (entries: ResizeObserverEntryMock[]) => void
 
 export const resizeObservers: ResizeObserverMock[] = []
+const animationFrameCallbacks = new Map<number, FrameRequestCallback>()
+let animationFrameId = 0
 
 export class ResizeObserverMock {
   private target?: Element
@@ -35,6 +37,20 @@ export class ResizeObserverMock {
 }
 
 vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+vi.stubGlobal(
+  'requestAnimationFrame',
+  vi.fn((callback: FrameRequestCallback) => {
+    animationFrameId += 1
+    animationFrameCallbacks.set(animationFrameId, callback)
+    return animationFrameId
+  }),
+)
+vi.stubGlobal(
+  'cancelAnimationFrame',
+  vi.fn((id: number) => {
+    animationFrameCallbacks.delete(id)
+  }),
+)
 vi.stubGlobal(
   'matchMedia',
   vi.fn((query: string): MediaQueryList => ({
@@ -51,4 +67,16 @@ vi.stubGlobal(
 
 beforeEach(() => {
   resizeObservers.length = 0
+  animationFrameCallbacks.clear()
+  animationFrameId = 0
 })
+
+export function flushAnimationFrames(timestamp = 0) {
+  const callbacks = Array.from(animationFrameCallbacks.values())
+  animationFrameCallbacks.clear()
+  callbacks.forEach((callback) => callback(timestamp))
+}
+
+export function pendingAnimationFrameCount(): number {
+  return animationFrameCallbacks.size
+}

src/types/chart.ts

@@ -4,6 +4,12 @@
 export interface WaveformPoint {
   x: number
   y: number
+  /** Symmetric Y error used when a side-specific value is not provided. */
+  error?: number
+  /** Error below Y; overrides `error` for the lower side. */
+  lowerError?: number
+  /** Error above Y; overrides `error` for the upper side. */
+  upperError?: number
 }
 
 /**
@@ -46,6 +52,10 @@ export interface WaveformRenderingOptions {
   downsampleThreshold?: number
   /** Upper bound for rendered points per horizontal CSS pixel. */
   maxPointsPerPixel?: number
+  /** Minimum horizontal CSS-pixel spacing between rendered point symbols. Use 0 to disable. */
+  pointMinSpacing?: number
+  /** Minimum horizontal CSS-pixel spacing between rendered error bars. Use 0 to disable. */
+  errorBarMinSpacing?: number
 }
 
 /** Text styling for the chart-level title. */
@@ -81,6 +91,8 @@ export interface WaveformLegendOptions {
   orientation?: WaveformLegendOrientation
   /** CSS color used by the legend panel; alpha controls background transparency. */
   backgroundColor?: string
+  /** Allows legend items to toggle their corresponding series. Defaults to false. */
+  interactive?: boolean
 }
 
 /** Styling shared by every non-empty waveform frame. */

src/types/data.ts

@@ -1,5 +1,30 @@
 import type { WaveformPoint } from './chart'
 
+export type WaveformLineType =
+  | 'none'
+  | 'linear'
+  | 'step-start'
+  | 'step-middle'
+  | 'step-end'
+  /** Backward-compatible alias for `step-end`. */
+  | 'step-after'
+
+export type WaveformPointType = 'none' | 'circle' | 'square' | 'triangle' | 'diamond'
+
+export interface WaveformErrorBarOptions {
+  visible?: boolean
+  color?: string
+  width?: number
+  capWidth?: number
+}
+
+export interface ResolvedWaveformErrorBarOptions {
+  visible: boolean
+  color?: string
+  width: number
+  capWidth: number
+}
+
 /**
  * 单波形数据格式（采样点或显式坐标点）
  */
@@ -25,6 +50,9 @@ export interface WaveformSeries {
   name: string
   unit?: string
   color?: string
+  lineType?: WaveformLineType
+  pointType?: WaveformPointType
+  errorBar?: WaveformErrorBarOptions
   data: SingleWaveformData
 }
 
@@ -47,5 +75,8 @@ export interface NormalizedWaveformSeries {
   name: string
   unit?: string
   color?: string
+  lineType: WaveformLineType
+  pointType: WaveformPointType
+  errorBar: ResolvedWaveformErrorBarOptions
   points: WaveformPoint[]
 }

src/types/index.ts

@@ -22,6 +22,10 @@ export type {
 // 数据类型
 export type {
   SingleWaveformData,
+  WaveformLineType,
+  WaveformPointType,
+  WaveformErrorBarOptions,
+  ResolvedWaveformErrorBarOptions,
   WaveformSeries,
   WaveformData,
   NormalizedWaveformSeries,

vite.config.ts

@@ -5,6 +5,12 @@ import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+  },
+  preview: {
+    host: '0.0.0.0',
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),