如何让饼图切片显示完成百分比及调整极坐标图切片大小？

开发者阿泽

2026-7-5

解决方案

一、饼图直接显示切片百分比

绝大多数主流可视化库都支持为饼图切片配置百分比标签，核心是通过数据格式化逻辑计算并展示占比：

以ECharts为例，在series.label.formatter中自定义计算逻辑，基于单条数据值与总和的比例生成百分比：

formatter: function(params) {
  const total = params.seriesData.reduce((sum, item) => sum + item.value, 0);
  const percent = ((params.value / total) * 100).toFixed(1) + '%';
  return `${params.name}\n${percent}`;
}

若是Highcharts，可直接利用内置的百分比格式化能力：

tooltip: {
  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
  pie: {
    dataLabels: {
      formatter: function() {
        return `${this.point.name}: ${this.percentage.toFixed(1)}%`;
      }
    }
  }
}

二、极坐标图调整切片大小

如果要基于极坐标图实现类似饼图的切片大小差异，核心是通过数据值映射切片的尺寸参数（如半径、弧长）：

以ECharts的极坐标饼图为例，可给单个数据项配置radius数组，自定义该切片的内外半径，以此控制大小：

series: [{
  type: 'pie',
  polarIndex: 0,
  data: [
    { value: 335, name: 'A', radius: ['40%', '70%'] },
    { value: 310, name: 'B', radius: ['30%', '60%'] },
    { value: 234, name: 'C', radius: ['20%', '50%'] }
  ]
}]

其他可视化库的逻辑类似：将数据值与切片的尺寸属性绑定，通过配置项或自定义函数动态生成不同的尺寸参数，实现切片大小的差异化。