基础饼图

饼图主要用于展示不同分类在总体中所占的比例。弧度的大小代表了每个分类所占的比例。

简单示例

饼图的配置与折线图和柱状图不尽相同。它不需要配置坐标轴（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 会根据所有数据的总和，自动计算并按比例分配它们在饼图中所对应的弧度。

定制饼图

饼图半径

饼图的半径可以通过 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，系列（series）会平均分配形状。例如，如果你希望在所有 4 个系列的数据值都为 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'
        }
      ]
    }
  ]
};
在线示例

如果你也希望隐藏标签（label），请同时将 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 pissang