← All templates

气泡簇 <BubbleCluster />

一簇紧密排列的圆,面积与数值成正比,大圆里写名称和数值;右侧可放 1–3 条解读。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
数据 · 比较体量
Component
BubbleCluster · #bubble-cluster

Good for

  • 5–14 个对象比体量,差距大但不需要坐标轴
  • 想强调某一项在整体里的位置

Avoid when

  • 要精确比较数值:用 BarChart
  • 有两个维度:用 Scatter

Content limits

1items 5–14 项,name ≤ 6 字;最小值 ≥ 最大值的 1/16,否则小圆放不下名字
2unit ≤ 4 个字符
3notes 1–3 条:key ≤ 8 字,text ≤ 30 字

Fields

FieldType
kicker · requiredstring标题上方的小节名,2–8 字
title · requiredstring | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
items · required{ name, value }[]对象与数值
unitstring单位
decimalsnumber小数位
focusstring强调色的项,默认最大项
notes{ key, text }[]右侧解读,逐条展开

Example

<BubbleCluster kicker="体量" title="各类电源有多大" items={[{ name: '煤电', value: 10472 }, …]} unit="TWh" focus="太阳能" />