CirclePacking 捆绑图

Bullet 子弹图

Gauge 仪表盘

简介

捆绑（circle-packing）又称圆形打包图，是一种将多层级数据以嵌套圆形形式可视化的图表，其核心特征包括：

空间填充逻辑：大圆内包含小圆，小圆又可嵌套更小的圆，通过圆的大小、位置和嵌套关系编码数据的层级与数值。

面积映射数值：圆的面积通常与数据值成正比（如销售额越大，圆面积越大），嵌套关系代表数据的所属层级（如公司→部门→团队）。

无重叠原则：所有圆彼此相切或分离，通过紧凑排列最大化空间利用率，类似自然界的气泡堆积。

配置项

通用属性参考：通用配置

概览

配置项	说明	类型	默认值
data	数据	object	[]
valueField	大小、大小映射字段	string	-
colorField	颜色通道字段，详见color	string（可选）	-
title	用于指定图表的标题内容，详见标题	object（可选）	-
label	数据标签是给图表添加标注的手段之一，详见标签	object（可选）	-
tooltip	用于动态展示数据点的详细信息，详见提示	object（可选）	-
style	视觉样式，配置项详见绘图属性	object（可选）	-
theme	用于控制图表的整体外观，包括颜色、字体、边距等视觉属性，详见主题	string \| object（可选）	`light`
onReady	图表加载回调，用于后续的事件事件绑定	Function（可选）	-
scale	将抽象数据映射为视觉数据，详见比例尺	object（可选）	-
animate	动画作为可视化的重要组成部分，能显著提高数据可视化的表现力，详见动画	object（可选）	-
interaction	提供了按需探索数据的能力，详见交互	object（可选）	-
state	实现交互反馈、高亮、选中等效果，详见状态，不同交互下图表样式	object（可选）	-
annotations	视图好比一个画板，`CirclePacking` 组件默认在其上绘制了一个捆绑，我们可以通过 annotations 在上面叠加更多的图层，详见标注	Array（可选）	-

data

树结构。

{
  "name": "咖啡产地",
  "children": [
    {
      "name": "非洲",
      "value": 4,
      "children": [
        {
          "name": "埃塞俄比亚",
          "value": 1
        },
      ]
    },
  ]
}

Ant Design Charts

CirclePacking 捆绑图

简介

代码演示

基础用法

数据标签

自定义padding距离

配置项

概览

data

事件

方法