Mermaid.js 饼图与柱状图教程：3 行文本画出可维护的图表，附选型对比表
【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid
周报里要插一张占比图，你从 Excel 导出 PNG、传到图床、再处理一次链接 404，而数字下周就变了。这篇文章带你用 Mermaid.js 饼图与柱状图的能力，在 Markdown 里直接写 3 行文本就渲染出图，数据更新只需改几处数字。
Mermaid.js 是什么：写在文档里的图表
Mermaid.js 是一个开源的图表库，把纯文本解析成 SVG 图形。你写下pie或bar这类关键字，它替你算好扇形角度、柱高和坐标轴。它适合嵌进文档的理由有 4 条：
- 📝 图表即文本：改数据就是改几行字，可直接进版本控制
- 🔗 GitHub、GitLab 等平台的 Markdown 原生支持，不依赖额外服务
- 🧩 覆盖流程图、时序图、甘特图等 20 多种图表类型，饼图与柱状图只是其中 2 种
- 📜 基于 MIT 许可证，可免费用于商业项目
三步画出第一张饼图
第 1 步，在 Markdown 文件里写入：
第 2 步，用官方 Live Editor 实时预览，饼图示例页在 demos/pie.html，改一处数字即可看到扇形同步变化。
第 3 步，满意后在编辑页 Actions 区导出 PNG 或 SVG 使用。完整语法见 docs/syntax/pie.md。
下图是官方 Live Editor 的界面，左侧写文本，右侧出图：
场景一：解释"占比构成"
预算、资源、时间分配，只要回答"整体里各占多少"，用饼图最直白。语法就 3 个元素：pie关键字开头、"标签" : 数值定义扇区、可选title写标题。加上showData后，图例会直接带出具体数值，不再只是颜色块。
类别建议控制在 6 个以内，扇区太多会互相挤压。想改变标签位置或挖出环形，在文件头部加一段 frontmatter 配置，textPosition取值 0.0（圆心）到 1.0（外缘），donutHole是 0 到 0.9 的挖孔比例：
渲染后扇区按书写顺序顺时针排列，环形中央还能放总标题，视觉上更接近仪表盘。
场景二：比较"谁多谁少"
跨类别比数值大小，用柱状图（xychart模块中的bar图）。最小结构是x-axis给类别、y-axis给数值范围、bar给数据数组：
几个省事的细节：
- 多条
bar、line会按声明顺序读取x-axis的每个类别，自动分组并列 y-axis的范围可省略，只写y-axis "标题"也能自动按数据生成- 标签较长时换成
xychart horizontal，柱子横排更可读 - 折线与柱形可叠加，适合"量与比率"同屏对比，官方语法全文见 docs/syntax/xyChart.md
饼图 vs 柱状图：一张表做判断
| 你的数据在回答什么 | 建议 |
|---|---|
| 整体中各占多少比例，且类别 ≤ 6 个 | 饼图 |
| 比较 2 个以上类别的具体数值大小 | 柱状图 |
| 数值随时间变化 | 折线图（line） |
| 两组数值叠加对比（如本期 vs 上期） | 多系列柱状图或柱 + 线组合 |
| 需要展示负值 | 柱状图，坐标轴范围可从负数开始 |
5 个容易踩的坑
- ⚠️ 饼图数值必须是大于 0 的数，最多保留 2 位小数，负数会直接报错
- ⚠️ 含空格的标题、坐标轴名、类别名要用引号包住，单单词可以省略
- ⚠️ 老教程里的
xychart-beta关键字现在仍可用，新代码建议直接写xychart - ⚠️ 折线可给数据点单独加文字标签，但柱形上加了会被忽略
- ✅ 改完数据觉得图不合适，直接在 Live Editor 导出 PNG/SVG，比手工修图快得多
动手试一下
饼图和柱状图合起来，刚好覆盖"占比"与"对比"两类最常用的数据展示。把这份文档丢给你的同事，让他照着"三步画出第一张饼图"改一组自己的数字，5 分钟后你大概率会收到一张新图。
【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
