StackedBar100 100% 占比柱
横向 100% 堆叠柱，适合占比分布。
基础用法
数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。
配色取自 --viz-1..8 token，色盲友好。
- Chrome 65.0%
- Safari 18.0%
- Firefox 9.0%
- Edge 5.0%
- Other 3.0%
<CfStackedBar100 ... /><CfStackedBar100 ... />趋势对比
把多年份的占比柱叠在一起，能直观看出份额迁移。
2024 浏览器份额
- Chrome 65.0%
- Safari 18.0%
- Firefox 9.0%
- Edge 5.0%
- Other 3.0%
2025 浏览器份额
- Chrome 62.0%
- Safari 20.0%
- Firefox 7.0%
- Edge 8.0%
- Other 3.0%
<CfStackedBar100 :segments="seg2024" />
<CfStackedBar100 :segments="seg2025" /><CfStackedBar100 segments={seg2024} />
<CfStackedBar100 segments={seg2025} />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
segments | StackedBar100Series[] | — | { name, value, colorIndex? }[] |
height | number | 24 | |
showLegend | boolean | true |
反馈与讨论
StackedBar100 100% 占比柱 的讨论