图表可视化（2个指令）
图表可视化指令
用于在文章中插入 Mermaid 流程图和 ECharts 数据可视化图表。
Mermaid 图表（mermaid）
使用 Mermaid 语法绘制流程图、时序图、甘特图等。图表在客户端按需渲染为 SVG。
:::mermaid
flowchart TD
A[用户访问] --> B{是否登录}
B -->|是| C[进入首页]
B -->|否| D[跳转登录页]
C --> E[浏览文章]
D --> F[输入账号密码]
F --> G[验证成功]
G --> C
:::- 支持 Mermaid 所有图表类型：
flowchart、sequenceDiagram、gantt、classDiagram、stateDiagram、erDiagram等 - 无图表页面不加载 Mermaid 库（按需加载）
ECharts 图表（echart）
使用 ECharts 配置插入交互式数据可视化图表。内容需为合法 JSON，作为 ECharts 的 setOption 配置。
:::echart
{
"title": { "text": "月度访问量", "left": "center" },
"tooltip": { "trigger": "axis" },
"xAxis": {
"type": "category",
"data": ["1月", "2月", "3月", "4月", "5月", "6月"]
},
"yAxis": { "type": "value" },
"series": [{
"data": [820, 932, 901, 934, 1290, 1330],
"type": "line",
"smooth": true,
"areaStyle": {}
}]
}
:::
:::echart
{
"title": { "text": "用户来源分布", "left": "center" },
"tooltip": { "trigger": "item" },
"series": [{
"type": "pie",
"radius": "50%",
"data": [
{ "value": 1048, "name": "搜索引擎" },
{ "value": 735, "name": "直接访问" },
{ "value": 580, "name": "邮件营销" },
{ "value": 484, "name": "联盟广告" },
{ "value": 300, "name": "视频广告" }
]
}]
}
:::- 内容需为合法 JSON，作为 ECharts 的
setOption配置 - 支持
height属性自定义高度，如:::echart{height="300px"}，默认400px - 支持 ECharts 所有图表类型：
line、bar、pie、scatter、radar、heatmap等 - 图表自动响应容器大小变化（ResizeObserver）
- 无图表页面不加载 ECharts 库（按需加载）