Mermaid.js 饼图与柱状图实战指南5 行文本语法、选型对照表与 5 个高频避坑点【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid.js 是一个开源 JavaScript 图表库把纯文本描述的文本图表直接渲染成可交互的 SVG。它适合需要把饼图、柱状图这类数据可视化图表嵌入技术文档、Markdown 周报和博客的读者——图表定义与正文同存改数据即改图。本文按先选对图、再写对语法的顺序带你完成从选型到集成的完整任务。场景速览这些任务交给 Mermaid.js使用场景典型任务对应图表类型技术文档在 API 设计文档里展示容量在各模块间的分配比例饼图Markdown 周报按团队列出本周各服务 P95 响应时间柱状图技术博客发布版本前后平均构建耗时对比柱状图代码评审PR 描述里附上资源消耗占比与增长趋势饼图 柱状图 / 组合图先选型饼图、柱状图、组合图怎么选选型先看数据要回答的问题再找图表类型你要回答的问题数据特征选哪种图写法各部分占整体的多少几份数值相加约等于一整块饼图pie谁比谁多、多出多少各类别的具体数量对比柱状图xychart-betabar数量变化之外还有走势一组数量序列叠加一条趋势线组合图同一图内barline简单判断数据加起来是一整块画饼图要逐个比大小画柱状图还想看变化方向就在柱状图上叠一条折线。语法速查饼图 5 行最小示例pie是 Mermaid.js 的饼图语法关键字最小可运行写法只有 5 行pie title 服务流量来源占比 HTTP 请求 : 72.4 WebSocket : 18.1 gRPC 调用 : 9.5语法元素是否必需作用pie必需声明图表类型为饼图title 文本可选图上方标题标签 : 数值必需数据行按书写顺序顺时针排布扇区showData可选在图例后附上原始数值标签含空格时加双引号更稳妥数值支持两位小数且必须大于 0。完整参数与环形图donutHole、高亮扇区等配置项见 pie 语法参考。语法速查xychart-beta 柱状图 5 行示例柱状图用于比较不同对象在同一指标上的具体数量比如各团队本周提交的 Issue 数xychart-beta title 各团队本周提交 Issue 数 x-axis [网关组, 存储组, 终端组, 平台组] y-axis Issue 数 0 -- 80 bar [42, 63, 35, 71]同一图里写多个带名称的bar即得到多序列对比并自动出图例类别名较长时加horizontal关键字坐标轴翻转、柱形横排xychart-beta horizontal title 接口平均耗时 Top5 x-axis ms 0 -- 900 y-axis [user/login, report/export, media/upload, search/fulltext, task/schedule] bar [120, 860, 430, 610, 280]语法元素是否必需作用title 文本可选图标题含空格必须加引号x-axis [a, b, c]可选分类轴类别数组y-axis 文本 0 -- N可选数值轴手动指定下限到上限bar [n, n, n]必需至少一个数据序列一组柱形数值bar 序列名 [...]可选命名序列进入图例horizontal可选坐标轴翻转类别放纵轴两个轴都可以省略库会根据数据自动推算范围。xychart 语法参考里还有宽度、数据标签、配色等配置项。实战一份周报里的饼图 柱状图组合下面是一段可以直接粘进周报的图表文本两个图各回答一个问题饼图看占比结构柱状图看绝对数量——这正是选型的直接落地。pie title 本周工单来源分布 用户反馈 : 128 巡检脚本 : 54 监控告警 : 37 内部转派 : 21xychart-beta title 各团队本周处理工单数 x-axis [网关组, 存储组, 终端组, 平台组] y-axis 工单数 0 -- 60 bar [44, 52, 27, 38]第一张图四个来源相加即总工单数占比关系成立适合饼图第二张图要比较哪组干得多是典型数量对比用柱状图纵轴手动压到 60 以内差距更直观。避坑清单5 个最常踩的坑做饼图分类控制在 7 个以内。超过就换柱状图或把小类合并成其他。做柱状图的y-axis手动写范围0 -- N。N 取略高于最大值的整数别依赖自动计算——自动范围可能把最大值顶到图顶视觉上夸大差异。不做给饼图写 0、负数或超过两位小数。所有值必须严格大于 0否则直接报错。做含空格的文本值一律加双引号例如y-axis Issue 数单词标题可不加。不做硬塞长类别名。x 轴标签互相遮挡时加horizontal翻转坐标轴而不是指望缩小字体。上手路径10 行以内接入你的页面HTML 集成只需要 6 行script srchttps://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js/script scriptmermaid.initialize({ startOnLoad: false });/script div classmermaidpie title 演示 A : 60 B : 40 /div scriptmermaid.run();/script要点引入mermaid.min.js把图表文本写进classmermaid的 div再调用mermaid.run()渲染。数据会更新时重新执行run()即可图表输出为 SVG可直接在 Live Editor 中导出 PNG 嵌入其他文档。收尾核心就三点图表定义即纯文本git diff 能直接看清数据改了什么文本到 SVG 零转换成本饼图与柱状图各 5 行起步同一套语法可横向扩展到流程图、甘特图等 20 余种图表类型。现在就用你手头的一组真实数据按上面的最小示例把第一张饼图跑通。【免费下载链接】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），仅供参考