4 行文本出饼图，6 行出柱状图：Mermaid.js 轻量级数据可视化实战

4 行文本出饼图6 行出柱状图Mermaid.js 轻量级数据可视化实战【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid.js 是文本即图表的轻量级图表库写几行文字就渲染出图表。本文用饼图和柱状图做例子教你把占比与趋势直接画进 Markdown 或 HTML 页面读完就能把代码粘进自己的文档。项目一图流文本进图表出轻量一行 CDN 引入不用搭构建工具。文本即图表图表就是纯文本能进版本库、能 diff改一个数字图就变。易嵌入Markdown、HTML、文档平台通吃贴在博客和文档里不突兀。 饼图4 行文本画出一张占比图汇报里要展示预算怎么分、渠道各占几成时饼图最直观。Mermaid 里能跑通的最小饼图只有几行pie开头后面每行标签 : 数值就是一个扇区。官方饼图语法在 docs/syntax/pie.md。可选开关速查开关作用说明showData图例后显示数值加在第一行即可title图表标题可选textPosition标签位置0圆心 → 1边缘默认 0.75donutHole挖成环形图0~0.90 为实心饼legendPosition图例位置top / bottom / left / right / centerhighlightSlice高亮某个扇区也可悬停触发textPosition这些属于配置项写在代码顶部的 config 块里。比如把标签往内挪、再给外圈加个描边效果上textPosition: 0.5把标签从靠近边缘拉到扇区中间小扇区不再被切字颜色、描边这类细节归themeVariables管更多变量可查 docs/config/theming.md。来个实战月报里要贴项目预算占比——想自己拨着玩交互页面在 demos/pie.html。 柱状图xychart-beta 坐标轴玩法饼图讲不了趋势柱状图xychart 模块就该出场了周报里贴月度销售、复盘时两年数据并排比都是它的活。最小可运行版本坐标轴规则很直白x-axis给类别数组或数值区间y-axis写最小值 -- 最大值数据在bar数组里照抄。官方语法见 docs/syntax/xyChart.md。想同图对比两组数据加一行line就是组合图给系列起名字图例自动出现类别名太长、竖条挤不下时在第一行后加一个horizontal整图就横过来。多系列对比的实战场景——复盘时把两年季度并排交互演示同样在 demos/xychart.html 能试。⚖️ 饼图 vs 柱状图一张表选对图表拿不准用哪个时先看这张表判断维度饼图柱状图核心目的看占整体多少比具体数值大小类别数量6 个以内舒服几十个也无妨精确比较难角度靠眼估直观时间趋势不合适合适负值不允许只能为正支持多个数据系列只能一组多系列再带上三条让图表可读性过关的习惯简洁一张图只讲一个重点别颜色和装饰叠着上。标注齐全标题、轴标签、系列名写清楚读者不翻正文也能读懂。比例诚实y 轴尽量从 0 起截断就注明饼图占比加起来应是 100%。 5 分钟接入一行脚本 一个 pre落到 HTML 页面只有三步引脚本、初始化、把代码写进pre classmermaidscript srchttps://cdn.jsdelivr.net/npm/mermaid10/dist/mermaid.min.js/script script mermaid.initialize({ startOnLoad: true, theme: default }); /script pre classmermaid pie showData title 预算分配 人力 : 45 硬件 : 25 其他 : 30 /pre在原生支持 mermaid 的平台GitHub README、Notion、Typora 等则连脚本都不用引把同样的代码放进 mermaid 围栏里直接渲染。现在就把 demos/pie.html 打开改着玩一遍然后把开头那 4 行饼图代码粘进你的下一篇文档——图表本可以这么便宜。【免费下载链接】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），仅供参考