企业官网建设流程全解析

3分钟上手 Mermaid.js 饼图与柱状图：一张对比表帮你选型

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

周报要交，图还没画：一张各产品线销售额的占比图，再加一张近 6 个月的销售对比。用设计工具导出要折腾半天，用 Mermaid.js 饼图画占比、用 xychart-beta 柱状图做对比，两段文本代码就能把整份周报的数据可视化写完。

📊 先跑通，再深入

先别背语法，把一个最小 HTML 存成pie.html，浏览器打开就能看到图。它做了两件事：引入 Mermaid 库，然后调用mermaid.initialize({...})启动渲染：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> <script> mermaid.initialize({ theme: 'default' }); </script> </head> <body> <pre class="mermaid"> pie showData title 各产品线销售额占比 "云服务" : 42 "硬件" : 31 "软件" : 19 "服务" : 8 </pre> </body> </html>

页面里会出现一个 4 块扇区的饼图：扇区角度按数值比例分配，title是图表标题，showData让图例后面显示具体数值。如果你不想搭 HTML，也可以直接用官方演示页里的同款代码。

饼图语法骨架：pie + showData + title

一个饼图的全部骨架如下，4 行就能出图：

各部分的可写性很明确：

• pie是唯一必填的起始关键字；
• showData可选，加上后图例会显示数值；
• title可选，用于图表标题；
• "标签" : 数值是数据行，至少 1 行，数值必须是大于 0 的正数，最多支持 2 位小数；
• 扇区会按标签出现的顺序顺时针排列，排在前面的数据想让它先画，就写在前面。

标签重叠或被边缘裁掉时，你可以用textPosition这一个参数调整标签的径向位置：0.0 是圆心，1.0 是外圈边缘，默认 0.75。把标签往圆心或外圈挪一格，拥挤就解决了：

想换配色，用主题变量即可：pie1到pie12控制扇区填充色，pieOuterStrokeWidth控制外描边粗细（默认 2px）。写法是在图表前加一个config块：

两个贴近业务的例子。第一个是市场份额：类别天然加总到 100%，加showData让读者能直接核对数字：

第二个是预算分配：数据是绝对金额，重点是比例而非数值，去掉showData图面更干净：

柱状图语法骨架：x-axis、y-axis 与 bar

xychart-beta 柱状图的骨架是 5 行。其中硬性要求其实只有两条：图表名（xychart-beta）和至少一个数据系列，其余都可选：

• x-axis放分类数组，含空格的分类要加引号；
• y-axis写数值量程，格式是"标题" 最小值 --> 最大值；只写标题不写量程也可以，范围会按数据自动生成，但手动给出量程能避免柱子顶天立地；
• bar后面跟数值数组，数据项个数要和 x 轴分类对齐；
• title多词时用引号包起来。

注意y-axis的量程要和数据匹配：上面 6 个值最大 10.5，量程写到12刚好留一点余量；写成0 --> 99999会让所有柱子缩成一小截。

水平柱状图写法：xychart-beta horizontal

加一个horizontal关键字，x 轴和 y 轴的角色对调：x 轴变数值量程，y 轴变分类。适合分类名较长、竖着放会被压缩的场景：

多系列对比柱状图写法

写多条bar数据就能做多系列对比。给每条系列加一个名字（bar "系列名" [...]），图例会自动出现，读者知道每种颜色对应哪一年：

bar + line 组合图表写法

同一张图里混写bar和line，就是组合图。典型用法：柱子放绝对量（销售额），折线放派生指标（利润），一眼看出两者的差距变化：

用 config 块定制柱状图尺寸

样式自定义走config块即可：width/height控制画布大小（默认 700×500），showDataLabel让每根柱子顶部显示数值，titleFontSize调标题字号。配色则放在同一块的themeVariables.xyChart下，plotColorPalette用逗号分隔的颜色串按顺序分配给各系列：

选饼图还是柱状图：4个维度对比表

一句话口诀：占比看饼，比大小看柱，看趋势柱上加线。

🛠 高频踩坑与排查

现象：饼图渲染报错，图出不来。原因：数据里混进了 0 或负数，饼图只接受大于 0 的正数。 解法：把异常类别并入"其他"，或改画柱状图（bar 支持负值）。

现象：纠结数值加起来必须等于 100 才敢画饼图。原因：担心比例不对。实际上扇区角度由各项在总和中的占比自动算出，总和不必是 100。 解法：直接填绝对值，showData显示原始数值，占比交给读者看扇区。

现象：扇区标签互相重叠、或被裁到图外。原因：标签默认落在径向 0.75 的位置，类别多且扇区薄时容易挤。 解法：调textPosition，往 0.0 方向收拢到圆心附近，或推到 1.0 贴近外圈，再缩短标签文字。

现象：同一段 xychart-beta 代码，文档里能渲染，CDN 页面却报解析错误。原因：CDN 锁定的 mermaid 版本过旧，不支持 XY 图表或新语法；另外官方文档中xychart与xychart-beta两种拼写并存，beta 是早期引入时的历史命名。 解法：升级 CDN 版本到支持该语法的版本；排查时先核对页面里 script 标签的版本号。

资料索引

• 入门指南（引入方式与 initialize 用法）：docs/intro/getting-started.md
• 饼图语法参考：docs/syntax/pie.md
• XY 图表语法参考：docs/syntax/xyChart.md
• 完整配置项：docs/config/configuration.md
• 主题变量说明：docs/config/theming.md
• 饼图演示页：demos/pie.html
• 柱状图演示页：demos/xychart.html
• 社区贡献指南：CONTRIBUTING.md

打开你的 Markdown 编辑器或 HTML 文件，把开头那段饼图代码贴进去，现在就把你的周报饼图画出来。

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid