Markdown 饼图绘制详解

??作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注?、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

一、前言

Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。

本章，我们将主要介绍「饼图」。

饼图（Pie chart）是将一个圆形，分成面积相同或不同的若干区域，用来表示不同内容占比的图形。

二、语法详解

饼图的定义包含「标题」、「内容名称」和「内容权重」三项，其中「内容权重」会在渲染时，自动转换为百分比并显示在饼图上。

在Mermaid里，画饼图真的很简单。

• 从pie关键字开始
• 后跟title关键字定义标题（可选）
• 后跟dataSet
  • 在 "" 内定义每一个部分的标签名称。
  • 后跟 : 作为分隔符
  • 后跟 positive numeric value（支持最多两位小数）

[pie] [title] [titlevalue] (OPTIONAL) "[datakey1]" : [dataValue1] "[datakey2]" : [dataValue2] "[datakey3]" : [dataValue3]...

间单实例

```mermaid
pie title 宠物的选择
    "狗" : 386
    "猫" : 85
    "兔子" : 15 
```

使用场景及实例

```mermaid
pie title 城市生存训练能力占比
	"独立自理" : 15
	"情商" : 20
	"人际交往" : 15
	"地理常识" : 10
	"财商" : 10
	"安全防护" : 20
	"感恩之心" : 10
```

饼图的特点和用途

• 数据比例展示： 饼图直观地展示了各个部分在整体中的比例，使观众能够快速了解不同类别的相对大小。
• 简洁易懂： 饼图的简单结构使其易于理解，是一种简洁直观的数据呈现方式，适用于广泛的受众。
• 单一数据集： 饼图适合展示单一数据集的相对比例，不宜用于多个数据集的对比。

三、总结

• Mermaid 为 Markdown 扩展了使用普通文本生成饼图的语法及渲染支持；
• Mermaid 可以用文本描述饼图中的「标题」、「内容名称」、「内容权重」三个部分。
• Mermaid 的饼图渲染后内容项颜色对应于内容项在声明时的次序。

文章写作不易，您的支持是我最大的动力，请👉关注?、点赞👍、收藏📂、评论💬。

---

无论是哪个阶段，坚持努力都是成功的关键。不要停下脚步，继续前行，即使前路崎岖，也请保持乐观和勇气。相信自己的能力，你所追求的目标定会在不久的将来实现。加油！