logo

Ant Design Charts

  • 教程
  • 选项
  • 图表示例
  • 所有产品antv logo arrow
  • 2.0.0
  • 📈 图表分类
  • 统计图表
    • 图表组成
    • 图表组件 - Component
      • 标题(Title)
      • 坐标轴(Axis)
      • 图例(Legend)
      • 滚动条(Scrollbar)
      • 缩略轴(Slider)
      • 提示信息(Tooltip)
      • 数据标签(Label)
    • 核心概念 - Core
      • 视图(View)
      • 数据(Data)
        • 概览
        • custom
        • ema
        • fetch
        • filter
        • fold
        • inline
        • join
        • kde
        • log
        • map
        • pick
        • rename
        • slice
        • sort
        • sortBy
      • 比例尺(Scale)
        • 概览
        • band
        • linear
        • log
        • ordinal
        • point
        • pow
        • quantile
        • quantize
        • sqrt
        • threshold
        • time
      • 转换(Transform)
        • 概览
        • bin
        • binX
        • diffY
        • dodgeX
        • flexX
        • group
        • groupColor
        • groupX
        • groupY
        • jitter
        • jitterX
        • jitterY
        • normalizeY
        • pack
        • sample
        • select
        • selectX
        • selectY
        • sortColor
        • sortX
        • sortY
        • stackEnter
        • stackY
        • symmetryY
      • 坐标系(Coordinate)
        • 概览
        • fisheye
        • parallel
        • polar
        • radial
        • theta
        • transpose
        • cartesian3D
      • 样式(Style)
      • 动画(Animate)
        • 概览
        • fadeIn
        • fadeOut
        • growInX
        • growInY
        • morphing
        • pathIn
        • scaleInX
        • scaleInY
        • scaleOutX
        • scaleOutY
        • waveIn
        • zoomIn
        • zoomOut
      • 状态(State)
      • 交互(Interaction)
        • 概览
        • brushAxisHighlight
        • brushHighlight
        • brushXHighlight
        • brushYHighlight
        • brushFilter
        • brushXFilter
        • brushYFilter
        • chartIndex
        • elementHighlight
        • elementHighlightByColor
        • elementHighlightByX
        • elementSelect
        • elementSelectByColor
        • elementSelectByX
        • fisheye
        • legendFilter
        • legendHighlight
        • poptip
        • scrollbarFilter
        • sliderFilter
      • 复合(Composition)
        • 概览
        • facetCircle
        • facetRect
        • repeatMatrix
        • spaceFlex
        • spaceLayer
        • timingKeyframe
      • 主题(Theme)
        • 概览
        • academy
        • classic
        • classicDark
      • 事件(Event)
      • 颜色映射(Color)
    • 专有配置 - Specal Plot
      • Area 面积图
      • Bar 条形图
      • CirclePacking 捆绑图
      • DualAxes 双轴图
      • Gauge 仪表盘
      • Line 折线图
      • Rose 玫瑰图
      • Sankey 桑基图
      • Scatter 散点图
      • Sunburst 旭日图
      • Treemap 矩阵树图
      • Venn 韦恩图
      • WordCloud 词云图
      • Column 柱状图
      • Pie 饼图
      • BidirectionalBar 对称条形图
      • Box 箱线图
      • Bullet 子弹图
      • Funnel 漏斗图
      • Heatmap 热力图
      • Histogram 直方图
      • Liquid 水波图
      • Radar 雷达图
      • Stock 股票图
      • Tiny 迷你图
      • Violin 小提琴图
      • Waterfall 瀑布图
      • RadialBar 玉珏图
  • 关系图组件
    • 总览
    • MindMap 思维导图
    • Fishbone 鱼骨图
    • IndentedTree 缩进树图
    • Dendrogram 生态树图
    • OrganizationChart 组织结构图
    • FlowGraph 流程图
    • FlowDirectionGraph 流向图
    • NetworkGraph 网络图
    • FAQ

facetCircle

上一篇
概览
下一篇
facetRect

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

根据字段分片数据,利用圆形划分空间,然后进行各个分面的数据可视化。

开始使用

facetCircle

更多的案例,可以查看图表示例页面。

选项

facetCircle 的底层实现和 mark 一致,所以在配置上有很多是一样的。

属性描述类型默认值
data参考 data 相关介绍Data
encode通道设置,见下表
paddingpadding 大小number0
paddingLeftnumber0
paddingRightnumber0
paddingTopnumber0
paddingBottomnumber0
marginmarginnumber0
marginLeftnumber0
marginRightnumber0
marginTopnumber0
marginBottomnumber0
title参考 title 相关介绍
scale参考 scale 相关介绍

facetCircle 对应的配置都可以使用 API 进行设置,例如:

encode

对于 facetCircle 有自己独特的 encode 通道。

通道描述类型默认值
position按照 position 对应的数据去划分圆形空间中的角度string | (d, idx, arr) => any