图表组件
图表组件用于在表单或看板页展示趋势、占比与进度。从组件列表的「图表组件」分组拖入，再维护数据与外观。录入型业务表单不是必须使用图表；更常见于汇报页、看板、问卷结果展示。
在哪里找
组件列表 → 图表组件分组。
组件一览
以当前设计器列表为准。下面每个组件附拖入画布后的样子。
统计图
折线图
体积图
柱状图
条形图
饼图
漏斗图
仪表盘
雷达图
散点图
自定义图表
关系 / 示意类
流程图
时序图
类图
状态图
象限图
思维导图
时间线图
数据包图
看板图
TIP
具体可用项以当前环境为准。数据若多处复用，可先放到全局数据源或全局变量，再在图表中引用。
- 统计图（折线、柱状、饼图、仪表盘、自定义图表等）基于 ECharts，产品侧说明见图表组件；改高级配置可对照 ECharts 官方示例。
- 关系 / 示意类（流程图、时序图、看板图等）基于 Mermaid，产品侧说明见Mermaid 图表组件；写语法可对照 Mermaid 官方文档，也可先在 Mermaid 在线编辑器试写再贴回属性。
怎么用（分步）
以饼图为例
拖入「饼图」→ 选中后打开组件配置 → 「图表数据」中编辑数据（名称与数值）→ 改「图表的名称」，按需调图例 → 预览看占比是否清晰。效果见上文「饼图」。
以柱状图为例
拖入「柱状图」→ 维护类别与系列数值 → 填写图表名称，按需打开标记 → 预览确认对比清晰。效果见上文「柱状图」。
选型建议
| 诉求 | 优先 |
|---|---|
| 趋势变化 | 折线、面积（体积图） |
| 类别对比 | 柱状、条形 |
| 占比 | 饼图 |
| 转化 | 漏斗 |
| 完成率 | 仪表盘 |
| 多维对比 | 雷达、散点 |
| 流程关系 | 流程图、状态图、时序图 |
| 想法整理 | 思维导图、象限图 |
| 里程碑 | 时间线图 |
场景示例
入门：满意度占比（饼图）
背景：问卷回收后，在结果页顶部展示「满意 / 一般 / 不满意」占比。
拖入「饼图」设名称 → 编辑三组数据 → 打开图例 → 预览确认色块对应。
预期：一眼看出哪一类占比最高。
入门：本月报销对比（柱状图）
背景：财务看板要对比各部门本月报销金额。
拖入「柱状图」设名称 → 填部门类别与金额 → 先静态数验收，再绑全局数据源。
预期：柱高能区分部门差异；移动端系列不宜过多。
常用：项目进度看板（仪表盘）
背景：项目周报需要一眼看到整体完成率。
拖入「仪表盘」→ 填数值与 0～100 区间 → 下方可附段落或时间线图。
预期：指针落在正确区间；改数值后预览立即反映。
常用：流程说明用流程图
审批路径用流程图示意「申请人 → 主管 → 财务」；真正填报仍用基础组件。效果见上文「流程图」。
常用：统计栏 + 图表
辅助组件统计栏显示总金额，旁侧柱状图展示分类构成。
注意点
- 图表偏展示，不要替代必填录入字段。
- 移动端减少系列数量与图例文字，避免挤成一团。
- 绑定远程数据时先用测试请求确认结构。
- 颜色对比度要够，打印 / 投影场景慎用过浅色。
相关阅读
相关技术文档
产品插件文档：
- 图表组件（ECharts：统计图、自定义图表）
- Mermaid 图表组件（流程图、时序图、看板图等示意类）
第三方文档（与上面对应）：