基础饼图

饼图主要用于表现不同类别的项目与总和之间的比例关系。图中每个扇区的弧度表示了该类别的占比。

简单示例

饼图的配置项和折线图、柱状图等直角坐标系图表的配置项有一定区别，它不需要配置坐标轴（`axis`）。数据项的名称（`name`）和值（`value`）都定义在 `series` 中。让我们从一个最基础的饼图开始。

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'Direct Visit'
        },
        {
          value: 234,
          name: 'Union Ad'
        },
        {
          value: 1548,
          name: 'Search Engine'
        }
      ]
    }
  ]
};
在线示例

需要注意的是，这里的 `value` 值不需要是百分比。ECharts 会根据所有数据的 `value` 值，自动计算出各项在饼图中的百分比和弧度。

自定义饼图

饼图的半径

饼图的半径可以通过 series.radius 来设置。`series.radius` 的值可以是百分比（如 '60%'），也可以是绝对像素值（如 '200'）。当值为百分比时，是相对于容器（`div`）的较短边的一半而言的。

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'Direct Visit'
        },
        {
          value: 234,
          name: 'Union Ad'
        },
        {
          value: 1548,
          name: 'Search Engine'
        }
      ],
      radius: '50%'
    }
  ]
};
在线示例

当数据和为 0 时隐藏扇区

默认情况下，如果所有数据的和为 0，扇区会均等分布。例如，当 4 个系列（series）的值都为 0 时，如果你不希望显示任何扇区，可以将 series.stillShowZeroSum 设为 false。

option = {
  series: [
    {
      type: 'pie',
      stillShowZeroSum: false,
      data: [
        {
          value: 0,
          name: 'Direct Visit'
        },
        {
          value: 0,
          name: 'Union Ad'
        },
        {
          value: 0,
          name: 'Search Engine'
        }
      ]
    }
  ]
};
在线示例

如果你也希望隐藏标签，请将 series.label.show 也设为 false。

option = {
    series: [{
        type: 'pie',
        stillShowZeroSum: false,
        label: {
            show: false
        }
        data: [{
            value: 0,
            name: 'Direct Visit'
        }, {
            value: 0,
            name: 'Union Ad'
        }, {
            value: 0,
            name: 'Search Engine'
        }]
    }]
};
在线示例

贡献者 在 GitHub 上编辑此页

pissang