甜甜圈图

甜甜圈图也用于显示值与总量的比例。与饼图不同，图表中间的空白可用于提供一些额外的信息。这使得甜甜圈图成为常用的图表类型。

基础甜甜圈图

在 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