以下是一个完整的HTML页面，包含多种Mermaid统计图表示例（柱状图、饼图、折线图和流程图）： ```html
Mermaid 统计图表示例
1. 柱状图 (Bar Chart)
bar
title 2023年季度销售额(万元)
x-axis 第一季度, 第二季度, 第三季度, 第四季度
y-axis 0, 100, 200, 300, 400
bar 产品A: 120, 230, 350, 290
bar 产品B: 80, 150, 210, 180
bar 产品C: 60, 110, 90, 120
bar
title 2023年季度销售额(万元)
x-axis 第一季度, 第二季度, 第三季度, 第四季度
y-axis 0, 100, 200, 300, 400
bar 产品A: 120, 230, 350, 290
bar 产品B: 80, 150, 210, 180
bar 产品C: 60, 110, 90, 120
2. 饼图 (Pie Chart)
pie
title 2023年市场份额占比
"企业A": 45
"企业B": 30
"企业C": 15
"其他": 10
pie
title 2023年市场份额占比
"企业A": 45
"企业B": 30
"企业C": 15
"其他": 10
3. 折线图 (Line Chart)
line
title 近6个月用户增长趋势
x-axis 1月, 2月, 3月, 4月, 5月, 6月
y-axis 0, 500, 1000, 1500, 2000
line 注册用户: 800, 950, 1100, 1350, 1600, 1850
line 活跃用户: 600, 750, 850, 950, 1100, 1250
line
title 近6个月用户增长趋势
x-axis 1月, 2月, 3月, 4月, 5月, 6月
y-axis 0, 500, 1000, 1500, 2000
line 注册用户: 800, 950, 1100, 1350, 1600, 1850
line 活跃用户: 600, 750, 850, 950, 1100, 1250
4. 流程图 (Flowchart)
flowchart TD
A[开始] --> B{数据是否有效?}
B -->|是| C[数据处理]
B -->|否| D[数据清洗]
C --> E[生成报告]
D --> E
E --> F[结束]
flowchart TD
A[开始] --> B{数据是否有效?}
B -->|是| C[数据处理]
B -->|否| D[数据清洗]
C --> E[生成报告]
D --> E
E --> F[结束]
`标签内
3. 可以通过修改`mermaid.initialize()`配置来自定义样式
4. Mermaid图表支持响应式设计，会自动适应容器大小
这个示例包含了常见的统计图表类型，您可以根据实际需求修改数据和图表配置。
评论区: