甜甜圈圖

甜甜圈圖也用於顯示值與總數的比例。與圓餅圖不同，圖表中間的空白可以用來提供一些額外資訊。這使得甜甜圈圖成為常用的圖表類型。

基本甜甜圈圖

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

從這個角度來看，圓餅圖是內半徑等於 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 上編輯此頁面

plainheart plainheartpissang pissangjnodorp jnodorp