← 全部模板

柱状图 <BarChart />

竖向柱状图,每根柱子上方标出数值;mode="stack" 时堆叠并只标总数。可以指定一个焦点类别,其余变淡。系列 1 是强调色,其余灰阶。

分组
数据 · 2–8 个类别,分组或堆叠
组件
BarChart · #bar-chart

适合

  • 2–8 个类别的数量对比
  • 每个类别再分 2–3 个系列(分组或构成)

不适合

  • 只有 2–4 个数:用 MetricBars
  • 时间趋势:用 LineChart
  • 有正有负:用 DeltaBars

内容上限

1categories 2–8 个,各 ≤ 6 字
2series 1–3 个:name ≤ 8 字
3note ≤ 36 字

字段

字段类型
kicker · 必填string小节名,2–8 字
title · 必填string | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
categories · 必填string[]类别
series · 必填{ name, values }[]系列
mode'group' | 'stack'分组或堆叠,默认 group
unitstring数值单位
decimalsnumber小数位
focusnumber焦点类别下标
notestring图下结论

示例代码

<BarChart
  kicker="明暗"
  title="深色页集中在 GTM"
  categories={['Lumen', 'GEO', 'GTM', 'Launch', 'Studio']}
  series={[{ name: '浅色页', values: [24, 30, 23, 13, 6] }, { name: '深色页', values: [1, 1, 5, 0, 1] }]}
  mode="stack"
  unit=" 页"
  focus={2}
  source="…"
/>