環形圖

環形圖也用於顯示部分資料與總資料的佔比。與餅圖不同的是，環形圖中間的空白區域可以用來顯示額外資訊。這使得環形圖成為一種常用的圖表型別。

基礎環形圖

在 ECharts 中，餅圖的半徑（radius）也可以是一個包含兩個元素的陣列。陣列中的每個元素都可以是字串或數值。第一個元素代表內半徑，第二個元素代表外半徑。

從這個角度看，餅圖是環形圖的一個子集，其內半徑為 0。

option = {
  title: {
    text: 'A Case of Doughnut Chart',
    left: 'center',
    top: 'center'
  },
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: 'A'
        },
        {
          value: 234,
          name: 'B'
        },
        {
          value: 1548,
          name: 'C'
        }
      ],
      radius: ['40%', '70%']
    }
  ]
};
線上示例

如果我們把一個半徑設為百分比字串，而另一個設為數值，在某些解析度下，內半徑可能會比外半徑大。ECharts 會自動選擇較小的元素作為內半徑。但是，這仍可能導致意料之外的結果。

在環形圖中心顯示高亮扇區的文字

前面的例子展示瞭如何在環形圖中心顯示固定的文字。接下來的例子將展示如何顯示由滑鼠高亮的扇區所對應的文字。總的思路是，將 `label` 固定在圖表中心，並在預設狀態下隱藏 `label`。

option = {
  legend: {
    orient: 'vertical',
    x: 'left',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' },
        { value: 135, name: 'D' },
        { value: 1548, name: 'E' }
      ]
    }
  ]
};
線上示例

在這個例子中，`avoidLabelOverlap` 用於控制 ECharts 是否調整標籤位置以避免重疊。`avoidLabelOverlap` 的預設值是 `true`。我們希望標籤固定在中心，所以需要將其設定為 `false`。

因此，環形圖的中心將顯示高亮扇區的 `name`。

貢獻者 在 GitHub 上編輯此頁

plainheartpissangjnodorp