Pie

4 min read

定义

通过扇形区块的颜色和弧长(角度、面积)来展现数据的分类和占比情况。

何时使用

饼图通过扇形区块的面积,弧度和颜色等视觉标记,展现数据的分类和占比情况。它的特点是展现部分与部分之间,以及部分与整体的关系。部分相加之和等于整体的 100%,用整圆表示。

视觉通道

弧长

分析目的

比较、组成、占比

数据准备

1 个「无序名词」字段

1 个「数值」字段

Design Guide

用法建议

💡 分类数不超过 9 个

design

💡 将多个极小值合并展示

design

💡 排列顺序

design

💡 如果每个数值的差异不大,那么不建议使用饼图

design

💡 何时将标签放在内部/外部

design

💡 所有的项目相加之和为 100%

design

元素

design
  • 图形(Element):饼图由扇形组成,环图由滑块组成。
  • 图形标签(Label):显示各个区块的占比(%),名称(华东、华南、华北)和实际数值(123.45)。
  • 复合指标:在环图中心位置处显示,或以指标卡形式显示在图表上部分,。
  • 图形辅助组件(Info Component):图例,tooltip 或者指标卡等的组件支持。

Quick start

import { Pie } from '@antv/g2plot';

const data = [
  { type: '分类一', value: 27 },
  { type: '分类二', value: 25 },
  { type: '分类三', value: 18 },
  { type: '分类四', value: 15 },
  { type: '分类五', value: 10 },
  { type: '其他', value: 5 },
];

const piePlot = new Pie('container', {
  data,
  angleField: 'value',
  colorField: 'type',
});

piePlot.render();
📊 See more examples.

🎨 For an overview of the pie plot options see the API reference.

Pie plot features

Donut (Ring) pie

With G2Plot, you can set the innerRadius to create concentric ring.

Fan chart

By setting startAngle and endAngle, we can turn a pie plot into a fan chart.