基础饼图

饼图主要用于展示几个类别在整体中所占的比例。弧度表示每个类别的比例。

简单示例

饼图的配置与折线图和柱状图不完全相同。无需配置坐标轴。需要在 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 个 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 pissang