Mermaid 饼图 #

饼图(Pie Chart)是一种常用的数据可视化图表,用于展示数据占总体的比例关系。

基本语法 #

1. 基本结构 #

mermaid
pie
  title 图表标题
  "分类1" : 数值1
  "分类2" : 数值2
  "分类3" : 数值3

2. 简单示例 #

mermaid
pie
  title 水果销售比例
  "苹果" : 45
  "香蕉" : 30
  "橙子" : 25

数据表示 #

1. 使用数值 #

mermaid
pie
  title 项目预算分配
  "开发" : 50000
  "设计" : 20000
  "测试" : 15000
  "运维" : 10000
  "其他" : 5000

2. 使用百分比 #

虽然Mermaid饼图使用数值绘制,但可以在分类名称中包含百分比:

mermaid
pie
  title 学生成绩分布
  "优秀 (≥90分)" : 25
  "良好 (80-89分)" : 35
  "中等 (70-79分)" : 20
  "及格 (60-69分)" : 15
  "不及格 (<60分)" : 5

高级功能 #

1. 详细分类描述 #

mermaid
pie
  title 公司员工部门分布
  "技术部" : 45
  "产品部" : 20
  "市场部" : 15
  "销售部" : 10
  "财务部" : 5
  "人力资源部" : 5

2. 大数据量展示 #

mermaid
pie
  title 网站流量来源
  "搜索引擎" : 4500
  "社交媒体" : 2500
  "直接访问" : 1500
  "外部链接" : 1000
  "广告推广" : 500

3. 嵌套饼图 #

Mermaid不直接支持嵌套饼图,但可以使用多个饼图来展示分层数据:

mermaid
pie
  title 主要收入来源
  "产品销售" : 70
  "服务收入" : 30
mermaid
pie
  title 产品销售细分
  "产品A" : 40
  "产品B" : 25
  "产品C" : 15
  "其他产品" : 10

最佳实践 #

  1. 分类数量适中:饼图的分类数量最好不超过7个,过多会导致图表难以阅读
  2. 有意义的标题:使用清晰的标题说明图表内容
  3. 合理的排序:将分类按数值大小排序,便于比较
  4. 避免小数数值:使用整数数值,使图表更易理解
  5. 适当的颜色:使用清晰、对比鲜明的颜色(Mermaid会自动分配颜色)

常见问题 #

问题:分类过多导致图表难以阅读 #

解决方案:将较小的分类合并为"其他"类别,或使用其他图表类型(如柱状图)

问题:数值太小导致扇形不明显 #

解决方案:考虑合并小分类,或在分类名称中注明具体数值

问题:颜色不够鲜明 #

解决方案:Mermaid会自动分配颜色,目前不支持自定义饼图颜色

问题:无法显示百分比 #

解决方案:Mermaid饼图不直接支持显示百分比,但可以在分类名称中手动添加

完整示例 #

下面是一个完整的电商销售数据饼图示例:

mermaid
pie
  title 2023年电商销售数据
  "电子产品" : 3500000
  "服装鞋帽" : 2800000
  "家居用品" : 1800000
  "美妆个护" : 1200000
  "食品饮料" : 900000
  "图书文具" : 600000
  "其他" : 200000

替代图表类型 #

当饼图不适合时,可以考虑使用其他图表类型:

1. 环形图 #

虽然Mermaid没有专门的环形图,但可以通过饼图的方式展示:

mermaid
pie
  title 市场份额
  "公司A" : 40
  "公司B" : 30
  "公司C" : 20
  "其他公司" : 10

2. 柱状图 #

当需要比较具体数值时,柱状图可能更合适:

mermaid
---
title: Mermaid
xAxis: [产品A, 产品B, 产品C, 产品D]
yAxis: 销售额 (万元)
type: bar
data:
  - name: 2023年
    values: [45, 30, 25, 20]
  - name: 2022年
    values: [40, 25, 20, 15]
---

3. 雷达图 #

当需要展示多个维度的数据时,雷达图可能更合适:

mermaid
radar
  title 产品竞争力分析
  
  section 产品A
    质量: 90
    价格: 75
    功能: 85
    服务: 80
    创新: 70
  
  section 产品B
    质量: 80
    价格: 85
    功能: 75
    服务: 90
    创新: 85
最后更新:2026-02-08