开发预览 更新于 2026-05-10

SlopeChart 斜率图

A → B 两点连线 —— 上升 / 下降一目了然,做版本对比、AB 测试、季度回顾的轻量替代品。

基础用法

每一行 { label, before, after } 在画布上画一条左到右的连线,颜色按变化方向上升绿 / 下降红 / 持平灰自动着色,悬停高亮单条并 dim 其他。

背景 视口

API

Prop类型默认说明
items{ label, before, after, color? }[]数据数组
beforeLabelstring'之前'左侧列名
afterLabelstring'之后'右侧列名
heightnumber320像素高度
colorByDirectionbooleantrue自动按方向着色
format(v) => string端点值格式化
ariaLabelstringSR 描述
size'sm' | 'md' | 'lg''md'字号档位

事件:

  • Vue: @hover / @select
  • React: onHover / onSelect

回调 payload:{ index, item, delta },其中 delta = after - before

反馈与讨论

SlopeChart 斜率图 的讨论

0
0 / 600
正在加载评论...