基礎餅圖

餅圖主要用於顯示與總體相比，幾個類別的比例。 弧度代表每個類別的比例。

簡單範例

餅圖的配置與折線圖和長條圖不完全相同。 無需配置軸。 數據的名稱和值需要在系列中定義。 讓我們從一個基礎餅圖開始

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