mermaid 饼图图表

饼图（或圆图）是一种圆形的统计图形，它被分成多个切片来说明数字比例。在饼图中，每个切片的弧长（以及因此它的中心角和面积）与其表示的数量成正比。虽然它的命名是因为它类似于一个已被切片的馅饼，但它的呈现方式却有所不同。已知最早的饼图通常归功于 William Playfair 1801 年的 Statistical Breviary - 维基百科
Mermaid 可以渲染饼图。
代码示例:

pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15

效果:

pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15

语法

在 Mermaid 中绘制饼图非常简单。

• 使用 pie 关键字开始绘制饼图。
  • 使用 showData 选项在图例文本之后渲染实际的数据值（可选）。
• 使用 title 关键字添加标题，后面跟一个字符串值来给饼图命名（可选）。
• 使用 dataSet 输入数据。饼图的切片将按顺时针方向，按照标签的顺序排列。
  • 标签放在双引号内表示饼图的一个部分。
  • 用冒号（:）分隔标签和数据值。
  • 后面跟一个正的数字值（支持小数点后两位）。

语法格式：

[pie] 
[showData] (可选) 
[title] [title值] (可选) 
"[数据项1]" : [数据值1] 
"[数据项2]" : [数据值2] 
"[数据项3]" : [数据值3] 

示例代码：

%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5

效果:

%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% pie showData title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

配置

饼图的配置参数：

参数	描述	默认值
textPosition	饼图切片标签的轴位置，从 0.0（中心）到 1.0（圆的外边缘）	0.75