基础饼图

饼图主要用于展示多个类目与总体的占比关系，用扇形表示每个类目的占比。

简单示例

饼图的配置与折线图、柱状图有较大不同，不需要配置坐标轴，数据中的名称和值需要在 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 时，系列会平均分配图形。例如，当所有 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'
        }
      ]
    }
  ]
};
运行

如果还希望隐藏标签，可以将 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