BarChart 柱状图
单 series 垂直柱状图。
基础用法
数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。
配色取自 --viz-1..8 token，色盲友好。
<CfBarChart ... /><CfBarChart ... />颜色
colorIndex 0..7 直接选 --viz-1..8。
<CfBarChart :data="data" :color-index="0" />
<CfBarChart :data="data" :color-index="3" /><CfBarChart data={data} colorIndex={0} />
<CfBarChart data={data} colorIndex={3} />横向布局
需要较长分类名、排行或对比列表时，使用 orientation="horizontal"。
<CfBarChart :data="data" :labels="labels" orientation="horizontal" /><CfBarChart data={data} labels={labels} orientation="horizontal" />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | number[] | — | 柱高度 |
labels | string[] | — | x 轴标签 |
colorIndex | 0..7 | 0 | |
orientation | 'vertical' | 'horizontal' | 'vertical' | 柱方向 |
width / height / showGrid / showLabels | “ | “ |
反馈与讨论
BarChart 柱状图 的讨论