饼图与环图 Pie

效果

在线预览

在线模拟尺寸:

基本饼图

{
  data: [
    { name: '直接访问', value: 335 },
    { name: '邮件营销', value: 310 },
    { name: '联盟广告', value: 234 },
    { name: '搜索引擎', value: 580 }
  ],
  series: [{
    type: 'pie',
    colorField: 'name',
    angleField: 'value'
  }]
}

环形图

设置 pieInnerRadius 大于 0 即为环形图。

series: [{
  type: 'pie',
  colorField: 'name',
  angleField: 'value',
  pieInnerRadius: 50    // 内半径(px)
}]

环形图中心文字

series: [{
  type: 'pie',
  colorField: 'name',
  angleField: 'value',
  pieInnerRadius: 60,
  pieCenterText: '总计',
  pieCenterSubText: '1459'
}]

进度环

数据只有一条且 pieInnerRadius > 0 时自动切换为进度环模式。

{
  data: [{ progress: 75 }],
  series: [{
    type: 'pie',
    angleField: 'progress',
    pieInnerRadius: 40,
    color: '#3b82f6',
    pieRoundCap: true     // 端点圆角
  }]
}

玫瑰图

series: [{
  type: 'pie',
  colorField: 'name',
  angleField: 'value',
  pieRoseType: 'radius'   // 'radius'(半径按值) 或 'area'(面积按值)
}]

扇区间隙与圆角

series: [{
  type: 'pie',
  colorField: 'name',
  angleField: 'value',
  pieInnerRadius: 40,
  pieGap: 3,            // 扇区间隙角度
  pieRoundCap: true     // 端头圆角（需 innerRadius > 0 且 pieGap > 0）
}]

嵌套环图

多个 pie 系列，通过 pieOuterRadius 和 pieInnerRadius 控制各层半径。

series: [
  { type: 'pie', colorField: 'name', angleField: 'value', pieInnerRadius: 60, pieOuterRadius: 80 },
  { type: 'pie', colorField: 'name', angleField: 'count', pieInnerRadius: 85, pieOuterRadius: 110 }
]

系列配置项

属性	类型	默认值	说明
type	string	-	固定 'pie'
colorField	string	-	分类字段（也可用 xField）
angleField	string	-	数值字段（也可用 yField）
color	string	自动	指定颜色（进度环时）
pieInnerRadius	number	0	内半径，>0 为环形图
pieRadiusScale	number	0.9	外半径占比 0.4~1
pieOuterRadius	number	0	外半径像素值（优先于 pieRadiusScale）
pieCenterText	string	''	中心主文字
pieCenterSubText	string	''	中心副标题
pieGap	number	0	扇区间隙角度
pieRoundCap	boolean	false	端头圆角
pieRoseType	string	''	玫瑰图模式 'radius' / 'area'
label	ChartLabelOptions	-	标签配置