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

ParetoChart 帕累托图

降序柱 + 累计百分比线 + 80/20 参考线 —— 运维 / 质量 / 客服等领域定位"少数关键原因"的 ABC 分析标配。

基础用法

传入 items: { label, value }[],组件自动按 value 降序排列、计算累计百分比、画出 cutoff 参考线(默认 80%)。鼠标悬停柱子或线点可看到该项绝对值和累计百分比。

背景 视口

API

Prop类型默认说明
items{ label, value, color? }[]数据数组,组件内部排序
heightnumber260像素高度
cutoffnumber0.8参考线位置(0–1)
barColorstringaccent柱默认色
lineColorstringwarning累计线颜色
formatValue(v) => string左轴 / 柱值格式化
ariaLabelstringSR 描述
size'sm' | 'md' | 'lg''md'字号档位

事件:

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

回调 payload:{ index, item, cumulative, cumulativePct }

反馈与讨论

ParetoChart 帕累托图 的讨论

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