环形图

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

基础环形图

在 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