饼图与环形图最佳实践:占比呈现、标签布局与误区

何时使用饼图/环形图、如何正确标注百分比与避免视觉误导

优兔GOGO
2025年10月25日
开发教程
数据可视化饼图图表设计

🎯 何时用饼图?

  • 强调“整体-部分”关系,类别不宜过多(≤6更佳)。
  • 较大差异时直观;差异接近时建议改用条形图。

🧩 标签与排序

  • 建议按数值降序排序,便于比较。
  • 标签溢出时使用外置引导线或图例。
  • 环形图可在中心展示总数/标题。

⚠️ 误区

  • 3D/过度倾斜会误导面积感知。
  • 同色系过多导致不可读,建议合理配色与对比度。
const option = {
  series: [{
    type: 'pie', radius: ['50%', '70%'],
    label: { formatter: '{b}: {d}%'},
    data: [
      { name: 'A', value: 123 },
      { name: 'B', value: 98  },
      { name: 'C', value: 45  }
    ]
  }]
};

🔗 相关工具

在线制作饼图/环形图并导出图片?试试 在线制作标准饼图,支持百分比标签与主题样式。