← All templates

柱状图 <BarChart />

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

Template and style descriptions are currently available in Chinese only.

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

Good for

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

Avoid when

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

Content limits

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

Fields

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

Example

<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="…"
/>