Skip to content

Latest commit

 

History

History
93 lines (72 loc) · 3.71 KB

饼图 - Pie Chart.md

File metadata and controls

93 lines (72 loc) · 3.71 KB

图表属性

  • 名称:饼图
  • 别名:饼状图,英文名 Pie Chart
  • 形状:圆形
  • 图表类别:统计图表
  • 图表功能:比较、占比、成分

基础概念

饼图,是一个划分为几个扇形的圆形统计图表。在饼图中,每个扇形的弧长(以及圆心角和面积)大小,表示该种类占总体的比例,且这些扇形合在一起刚好是一个完全的圆形。

饼图最显著的功能在于表现“占比”。习惯上,人们也用饼图来比较扇形的大小,从而获得对数据的认知。但是,由于人类对“角度”的感知力并不如“长度”,在需要准确的表达数值(尤其是当数值接近、或数值很多)时,饼图常常不能胜任,建议用柱状图代替。

从数据来看,饼图一般需要一个分类数据字段、一个连续数据字段。值得注意的是,分类字段的数据,在图表使用的语境下,应当构成一个整体(例如一班、二班、三班,构成了整个高一年级),而不能是独立、无关的。

适用场景

用于显示组成部分的比例,如市场份额、预算分配等。想要突出表示某个部分在整体中所占比例。

不适用场景

  1. 如果变量之间相互独立,并不构成一个整体,那么不可以使用饼图。
  2. 饼图也不能用来表现趋势。
  3. 由于饼图用面积取代了长度,从而加大了对各个数据进行比较的难度,当各数据彼此之间十分接近,占比会不特别明显,如果用饼图表示,很难分辨大小。因此,当需要对数据进行比较,分清孰大孰小,尤其是当数据接近时,柱状图更加合适。
  4. 此外,当类别过多时,不建议使用饼图,否则阅读会将很差。可行的办法,一是将一些不重要的变量合并为“其他”,避免扇区超过 5 个;二是改用条形图。

图表用法

图表属性

type Pie = {
  type: 'pie';
  data: { category: string; value: number }[];
  innerRadius?: number;
  title?: string;
};

数据要求

  • type:图表的类型,必填,文本类型,值必须为 "pie"。
  • data:图表的数据,必填,数组对象类型;
    • category: 数据分类的名称,必填,文本类型;
    • value:数据的值,必填,数值类型,不可以使用百分比数字;
  • innerRadius:将饼图设置为环图,选填,数值类型,当需要开启为环图时,可设置值为 0.6。
  • title: 图表的标题,选填,文本类型。

使用示例

  1. 我国的餐饮业营收额中,火锅占到 22%,其次是自助餐(12%)、川菜(8%)、小吃快餐(8%)、西餐(6%)、其它(44%)。用饼图可视化。
{
  "type": "pie",
  "data": [
    { "category": "火锅", "value": 22 },
    { "category": "自助餐", "value": 12 },
    { "category": "小吃快餐", "value": 8 },
    { "category": "西餐", "value": 6 },
    { "category": "其它", "value": 44 }
  ],
  "title": "餐饮业营收额占比"
}
  1. 全国人口中居住在城镇的人口占比为 63.89%,居住在乡村的人口占比为 36.11%。用环图可视化。
{
  "type": "pie",
  "data": [
    { "category": "城镇人口", "value": 63.89 },
    { "category": "乡村人口", "value": 36.11 }
  ],
  "innerRadius": 0.6,
  "title": "全国人口居住对比"
}
  1. 用饼图可视化我的数据 [{ "name": "第一产业","industrial": 7200.0 },{ "name": "第二产业", "industrial": 36600.0 },{ "name": "第三产业" ,"industrial": 41000.0 }]。
{
  "type": "pie",
  "data": [
    { "category": "第一产业", "value": 7200.0 },
    { "category": "第二产业", "value": 36600.0 },
    { "category": "第三产业", "value": 41000.0 }
  ]
}