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
最佳实践 #
- 分类数量适中:饼图的分类数量最好不超过7个,过多会导致图表难以阅读
- 有意义的标题:使用清晰的标题说明图表内容
- 合理的排序:将分类按数值大小排序,便于比较
- 避免小数数值:使用整数数值,使图表更易理解
- 适当的颜色:使用清晰、对比鲜明的颜色(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