# 饼图

基本的饼图：

series.${item}.type: 'pie'

饼图常见效果：

显示文字的格式化
圆环
南丁格尔图
选中效果

饼图特点：

饼图可以很好地帮助用户快速了解不同分类的数据的占比情况

# 1. 简单的饼图

实现：

option = {
  series: [
    {
      type: 'pie',
      encode: { value: 'money' }
    },
  ]
}

示例：

<!--24-pie-basic.html-->
<div id="box_24-pie-basic" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_24-pie-basic')).setOption({
    dataset: {
      dimensions: ['eCommerce', 'money'],
      source: [
        { eCommerce: '淘宝', money: 11231 },
        { eCommerce: '京东', money: 22673 },
        { eCommerce: '唯品会', money: 6123 },
        { eCommerce: '一号店', money: 8989 },
        { eCommerce: '聚美优品', money: 6788 },
      ],
    },
    series: [
      {
        name: '各电商平台消费统计',
        type: 'pie',
        encode: { value: 'money' }
      },
    ]
  });
</script>

# 2. 常见效果

# 2.1. label

说明：

设置每个扇形显示的文本

配置：

option = {
  label: {
    // {a}：系列名。（不可用）
    // {b}：数据名。（不可用）
    // {c}：数据值。（不可用）
    // {d}：百分比。
    // {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
    // {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。
    formatter: '{@eCommerce} ￥{@money} \n{d}%',
    
    formatter(params) {
      const { percent, data: { eCommerce, money } } = params;
      return `${eCommerce} ${percent}%`;
    },
    color: 'auto',
  }
}

示例：

<!--25-pie-label.html-->
<div id="box_25-pie-label" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_25-pie-label')).setOption({
    dataset: {
      dimensions: ['eCommerce', 'money'],
      source: [
        { eCommerce: '淘宝', money: 11231 },
        { eCommerce: '京东', money: 22673 },
        { eCommerce: '唯品会', money: 6123 },
        { eCommerce: '一号店', money: 8989 },
        { eCommerce: '聚美优品', money: 6788 },
      ],
    },
    series: [
      {
        name: '各电商平台消费统计',
        type: 'pie',
        encode: { value: 'money' },
        label: {
          formatter: '{@eCommerce} ￥{@money} \n{d}%',
          // formatter(params) {
          //   const { percent, data: { eCommerce, money } } = params;
          //   return `${eCommerce} ${percent}%`;
          // },
          color: 'auto',
        }
      },
    ]
  });
</script>

# 2.2. 圆环

说明：

series-pie.radius 饼图的半径

配置：

option = {
  series: [
    {
      type: 'pie',
      /*
        number：直接指定外半径值。
        string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
        Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
       */
      radius: ['50%', '75%'],
    },
  ]
}

示例：

<!--26-pie-ring.html-->
<div id="box_26-pie-ring" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_26-pie-ring')).setOption({
    dataset: {
      dimensions: ['eCommerce', 'money'],
      source: [
        { eCommerce: '淘宝', money: 11231 },
        { eCommerce: '京东', money: 22673 },
        { eCommerce: '唯品会', money: 6123 },
        { eCommerce: '一号店', money: 8989 },
        { eCommerce: '聚美优品', money: 6788 },
      ],
    },
    series: [
      {
        name: '各电商平台消费统计',
        type: 'pie',
        encode: { value: 'money' },
        label: { formatter: '{@eCommerce} ￥{@money} \n{d}%', color: 'auto' },
        radius: ['50%', '75%'],
      },
    ]
  });
</script>

# 2.3. 南丁格尔图

说明：

通过半径区分数据大小

配置：

option = {
  series: [
    {
      type: 'pie',
      /*
      'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
      'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
       */
      roseType: 'radius',
    },
  ]
}

示例：

<!--27-pie-roseType.html-->
<div id="box_27-pie-roseType" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_27-pie-roseType')).setOption({
    dataset: {
      dimensions: ['eCommerce', 'money'],
      source: [
        { eCommerce: '淘宝', money: 11231 },
        { eCommerce: '京东', money: 22673 },
        { eCommerce: '唯品会', money: 6123 },
        { eCommerce: '一号店', money: 8989 },
        { eCommerce: '聚美优品', money: 6788 },
      ],
    },
    series: [
      {
        name: '各电商平台消费统计',
        type: 'pie',
        encode: { value: 'money' },
        label: { formatter: '{@eCommerce} ￥{@money} \n{d}%', color: 'auto' },
        roseType: 'radius',
      },
    ]
  });
</script>

# 2.4. 选中效果

说明：

选中模式的配置，选择的扇形会往外偏移一段距离
series-pie.selectedMode 单选、多选
series-pie.selectedOffset 偏移量

配置：

option = {
  series: [
    {
      type: 'pie',
      
      // 可选'single'，'multiple'，'series' 分别表示单选，多选以及选择整个系列。
      selectedMode: 'single',
      
      // 选中扇区的偏移距离
      selectedOffset: 20,
    },
  ]
}

示例：

<!--28-pie-selected.html-->
<div id="box_28-pie-selected" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_28-pie-selected')).setOption({
    dataset: {
      dimensions: ['eCommerce', 'money'],
      source: [
        { eCommerce: '淘宝', money: 11231 },
        { eCommerce: '京东', money: 22673 },
        { eCommerce: '唯品会', money: 6123 },
        { eCommerce: '一号店', money: 8989 },
        { eCommerce: '聚美优品', money: 6788 },
      ],
    },
    series: [
      {
        name: '各电商平台消费统计',
        type: 'pie',
        encode: { value: 'money' },
        label: { formatter: '{@eCommerce} ￥{@money} \n{d}%', color: 'auto' },
        selectedMode: 'single',
        selectedOffset: 20,
      },
    ]
  });
</script>

本章目录