环形图

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

基本环形图

在 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 pissang