Mermaid.js 饼图语法与数据指南

饼图是圆形的统计图形，通过将数据划分为扇区来显示数值比例。在 Mermaid.js 中，您可以自动生成简洁、响应式的数据分解图，而无需处理复杂的图表库或矢量设计工具。渲染引擎会动态处理所有颜色分配和百分比计算。

基本语法结构

每个饼图都以 pie 声明开始。您可以选择性地包含一个标题，然后是数据条目，其中类别标签用引号括起来，并与正数值配对。

pie
title 样本饼图
"类别 A" : 45
"类别 B" : 30
"类别 C" : 25

Edit Mermaid in VPasCode

在 VPasCode 中编辑 Mermaid

语法参考

下表分解了在 Mermaid.js 中构建饼图地图所使用的核心结构选项。

组件	描述	语法示例
声明	初始化饼图渲染引擎。	`pie`
显示数据标志	一个可选的修饰符，紧跟在 `pie`之后，用于在显示计算出的百分比的同时也显示实际数值。	`pie showData`
标题	一个可选的标题，清晰地打印在图表布局中心上方。	`title 第三季度收入来源`
数据条目标签	类别名称，必须始终用双引号括起来。	`"自然搜索"`
数据分隔符	冒号字符用于分隔标签字符串及其数学值。	`:`
数据值	一个正数。支持绝对计数或直接的小数权重，最多保留两位小数。	`54.25`

现实世界模板：网站流量来源

此模板展示了经典的市场营销与分析仪表板分解。它使用了 showData 参数，以在图例中直接显示原始流量指标，同时图表展示布局比例。

Mermaid

在 VPasCode 中编辑 Mermaid

Mermaid Edit Mermaid in VPasCode

pie showData title 核心流量渠道
"有机搜索" : 3540
"直接流量" : 2410
"社交媒体" : 1850
"引用站点" : 920
"邮件活动" : 680

Edit Mermaid in VPasCode

在 VPasCode 中编辑 Mermaid

语法提示： 默认情况下，Mermaid 仅在每个图表部分上方显示相对计算出的百分比（例如，35%）。在 showData 关键字后立即添加 pie 会将标签更改为同时显示图表上的百分比和图例列表中的确切原始值。

高级概念：指令与格式化

对于高密度文档页面，您可以在代码片段顶部应用内联配置指令，以自定义样式行为、更改文本位置偏移量，或修改结构线条样式。

Mermaid

在 VPasCode 中编辑 Mermaid

Mermaid Edit Mermaid in VPasCode

---
config:
  pie:
    textPosition: 0.6
  themeVariables:
    pieOuterStrokeWidth: "3px"
---
pie title 运营预算分配
"产品开发" : 40.5
"市场营销与增长" : 25.25
"客户运营" : 20.0
"行政开支" : 14.25

Edit Mermaid in VPasCode

在 VPasCode 中编辑 Mermaid

常见语法陷阱

尽管饼图在 Mermaid 中具有最简单的语法之一，但一些格式错误会导致布局解析失败。请避免以下常见错误：

负数： 渲染引擎仅接受正数。传递负数或零将导致数学处理边界被破坏。
引号要求： 数据类别标签必须始终使用双引号。单引号或缺少引号会导致构建失败。
小数精度限制： 虽然 Mermaid 能够流畅处理精确的浮点小数，但它原生仅跟踪最多两位小数的参数。提前对数值进行四舍五入可保持严格的一致性。
切片密度： 为了清晰的视觉传达，最佳实践是将图表的切片数量限制在6到8个。如果您的数据集包含更多元素，请将较小的节点合并到“其他”类别下，以保持设计的可读性。