环形图

环形图也用于显示值与总数的比例。与饼图不同，图表中间的空白区域可以用来提供一些额外的信息。这使得环形图成为一种常用的图表类型。

基本环形图

在 ECharts 中，饼图的半径也可以是一个包含两个元素的数组。数组中的每个元素都可以是字符串或数值。第一个元素代表内半径，而第二个元素代表外半径。

从这个角度来看，饼图是内半径为 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 pissang jnodorp