基礎餅圖

餅圖主要用於表現不同類別的專案與總和之間的比例關係。圖中每個扇區的弧度表示了該類別的佔比。

簡單示例

餅圖的配置項和折線圖、柱狀圖等直角座標系圖表的配置項有一定區別，它不需要配置座標軸（`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