图表组件
1. 简介
1.1 功能简介
自定义详情页 中的图表组件，支持引用应用内任意表单作为数据源，可多维度直观动态呈现当前业务对象的汇总、占比、趋势、分布等关键指标，补充上下文信息。成员可在数据详情页一站式查看业务明细和统计分析结果、完成业务操作，无需反复切换页面，让数据查阅和业务办理更轻松高效。
本文将详细介绍各个图表的功能及设置方式，帮助大家选择合适的图表，并完成配置。
1.2 应用场景
当前支持的图表类型包括：指标卡、柱状图、条形图、折线图、面积图、饼图。
可广泛适用于各类业务场景。例如：
业务场景 | 描述 |
客户管理 | 查看客户详情时，展示客户近一年的订单金额趋势，或各产品线的采购占比，辅助销售判断客户潜力和偏好。 |
项目管理 | 查看项目详情时，展示该项目下所有任务的完成状态分布，或每日工时投入变化，帮助项目经理监控进度风险。 |
设备管理 | 查看设备台账详情时，展示该设备近一年的故障次数趋势与维修耗时变化，或各故障类型的分布占比，辅助设备管理员判断设备健康状态，预警潜在停机风险。 |
1.3 预期效果
以项目管理为例，查看不同项目时，可同步查看对应项目的预算消耗、任务逾期、工时等统计内容。如下所示：
.gif)
2. 添加方式
在详情页设计页面内点击添加组件，切换到「图表」标签下即可选择图表，或直接在组件列表中向下滚动找到「图表」类型组件。如下图所示：
3. 通用配置
所有图表组件均包含以下基础配置项。无论使用哪种图表，首先需要先完成以下配置：
3.1 数据源
支持设置以下 2 类数据来源：
- 关联表数据：即当前数据，在指定关联表中所关联的数据。
- 应用内表单数据：即指定表单中的全部数据。
3.2 数据过滤
在数据来源的基础上，可以添加过滤条件来限定图表所计算和展示的数据范围，只对关心的数据进行统计。
点击「添加过滤条件」，按需设置过滤条件即可。如下图所示：
3.3 数据权限
数据权限，决定的是成员能够在图表中看到多少数据的统计结果。支持以下 2 种权限：
权限类型 | 说明 |
继承成员对表单的权限 | 成员只能看到自己在数据源表单中有查看权限的那部分数据的统计结果。 |
表单中的全部数据（默认选项） | 成员可以看到数据源表单中全部数据的统计结果，不受其在表单中的查看权限限制。适用于希望所有人都能看到全局汇总数据的场景。 |
3.4 通用样式设置（选做）
选中图表，在右侧「样式」标签下可以设置如下样式：
- 组件样式：支持 2 种样式：
- 卡片：组件底部带有独立的卡片容器，可突出显示组件，并支持自定义卡片背景。
- 无框：无卡片等额外容器，组件内容融入页面，实现无缝嵌入效果。
- 背景：支持纯色或图片背景。
4. 各类图表配置介绍
4.1 指标卡
「指标卡」以卡片形式直观展示关键业务指标的统计值。
- 优点：直观展示最终数据结果，一眼看清现状；支持条件格式预警。
- 示例：分别用指标卡展示项目下的已逾期任务数量、各种状态下的任务数量等。
4.1.1 维度与指标
完成【2. 通用设置】后，可按需添加维度和指标字段。具体如下表所示：
设置项 | 说明 |
维度字段 | 决定是否要分组统计数据，可添加 0～1 个维度：
|
指标字段 | 决定卡片上要显示的具体数字，支持添加 1 个指标（如”任务数量“）。 |
4.1.2 条件格式
条件格式，可让指标卡中的数值在不同条件下显示为不同颜色，常用于预警或区分状态。
点击「设置」，可添加多个条件，以「逾期任务超过 5 个时显示红色」为例，如下图所示：
4.1.3 显示样式
完成以上配置后，可以按需设置指标图的显示样式。包括：
- 数据显示：若指标卡添加了维度，可设置仅显示该维度中前 N 个类别的数据
- 数值颜色：自定义指标卡的默认数值颜色；若当前满足条件格式，则优先按条件格式规则生效。
- 字体大小：支持小、中、大 3 种尺寸。
4.2 柱状图
「柱形图」通过柱子的高度，对比不同类别之间的数值大小。
- 优点：极易识别最大值、最小值和排名。
- 示例：展示和比较商品在不同渠道和颜色的销量。
4.2.1 维度与指标
完成【2. 通用设置】后，可按需添加维度和指标字段。具体如下表所示：
设置项 | 说明 |
维度字段 | 决定横轴（X 轴）的分类类别，有多少个柱子，可添加 1～2 个维度： 1 个：横轴显示该维度的所有枚举值 2 个：第 1 个维度作为横轴大类，第 2 个维度对大类进一步细分 |
指标字段 | 决定柱子的高度，反映具体的业务量。 1 个维度时，可添加 1 个或多个指标（多指标时柱子并排显示） 2 个维度时，仅可添加 1 个指标 |
4.2.2 柱状图类型
根据分析目的不同，柱状图提供以下 3 种展示类型，且不同类型对维度和指标的数量要求不同：：
柱形图类型 | 说明 | 基本要求 | |
维度 | 指标 | ||
普通柱状图 | 每个指标独立显示为一组柱子 | 1 个 | ≥1 个 |
2 个 | 1 个 | ||
堆积柱状图 | 同类别的多个指标堆叠在同一根柱子中，用于展示总量和构成 | 1 个 | ≥2 个 |
百分比堆积柱状图 | 堆积柱状图类似，但不关注具体数值大小，只关注内部占比。 | 1 个 | ≥2 个 |
4.2.3 显示样式
完成以上配置后，可以按需设置柱状图的显示样式：
序号 | 设置项 | 说明 |
1 | 坐标X轴 | 显示标签文字：勾选后，会在横轴上显示维度中各个类别的名称。 |
2 | 坐标Y轴 | 标题：自定义 Y 轴名称（如“销量/台”）。 数值范围：可设置最小值和最大值，固定坐标范围。 显示标签文字：控制是否显示刻度数值。 |
3 | 数据显示 | 若维度下的类别较多，可限制仅显示前 N 个类别下的数据（如：显示销售额最高的前 10 个部门）。仅 1 个维度时可见可用该设置项。 |
4 | 数据标签 | 勾选后，在柱子顶部显示具体数值。 |
5 | 显示图例 | 用于区分不同颜色所代表的含义。 |
4.3 条形图
「条形图」可认为是横向的柱形图，用若干个细长的横条来表示各种指标，横条的长度即指标的数值大小。
- 优点：通过条形的长度来表示数据，数值更直观易懂
- 示例：横向展示和统计商品在不同渠道和颜色的销量。
4.3.1 维度与指标
完成【2. 通用设置】后，可按需添加维度和指标字段。具体如下表所示：
设置项 | 说明 |
维度字段 | 决定纵轴（Y 轴）的分类类别，确定有多少根条形，可添加 1～2 个维度： 1 个：纵轴显示该维度的所有枚举值 2 个：第 1 个维度作为纵轴大类，第 2 个维度对大类进一步细分 |
指标字段 | 决定条形有多长，反映具体的业务量。 1 个维度时，可添加 1 个或多个指标 2 个维度时，仅可添加 1 个指标 |
4.3.2 条形图类型
根据分析目的不同，条形图提供以下 3 种展示类型，且不同类型对维度和指标的数量要求不同：：
柱形图类型 | 说明 | 基本要求 | |
维度 | 指标 | ||
普通条形图 | 每个指标独立显示为一组条形 | 2 个 | 1 个 |
1 个 | ≥1 个 | ||
堆积条形图 | 将同类别的多个指标堆叠在同一根条形中，既能展示总量，又能体现各部分的构成比例 | 1 个 | ≥2 个 |
百分比堆积条形图 | 与堆积条形图类似，但不关注具体数值大小，仅用于展示各部分在整体中的占比关系 | 1 个 | ≥2 个 |
4.3.3 显示样式
完成以上配置后，可以按需设置条形图的显示样式：
序号 | 设置项 | 说明 |
1 | 坐标Y轴 | 标题：自定义 Y 轴名称（如“销量/台”）。 数值范围：可设置最小值和最大值，固定坐标范围。 显示标签文字：控制是否显示刻度数值。 |
2 | 数据显示 | 若维度下的类别较多，可限制仅显示前 N 个类别下的数据（如：显示销售额最高的前 10 个部门）。仅 1 个维度时可见可用该设置项。 |
3 | 数据标签 | 勾选后，在条形右侧显示具体数值。 |
4 | 显示图例 | 用于区分不同颜色所代表的含义。 |
4.4 折线图
「折线图」通过连线的方式，将数据点按顺序连接成线，展示数据随时间或其他有序维度变化的趋势。
- 优点：
- 趋势清晰：能直观反映数据的波动、走向，适合观察趋势和周期性规律。
- 多线对比：支持多指标叠加对比，方便对比不同指标的走势差异。
- 示例：对比查看某类产品 3 个系列的商品销售额变化趋势。
4.4.1 维度与指标
完成【2. 通用设置】后，可按需添加维度和指标字段：
设置项 | 说明 |
维度字段 | 决定横轴（X 轴）上的数据点序列，即折线上有多少个数据点，可添加 1～2 个维度 |
指标字段 | 决定数据点在纵轴（Y 轴）上的高度。 1 个维度时，可添加 1 个或多个指标 2 个维度时：仅可添加 1 个指标 |
4.4.2 显示样式
完成以上配置后，可以按需设置折线图的显示样式：
序号 | 设置项 | 说明 |
1 | 线条样式 | 线型：支持「普通」和「曲线」 2 种。 标记点：勾选后，在每个数据点显示圆点标记，方便定位。 |
2 | 坐标X轴 | 显示标签文字：控制是否显示维度名称（如日期、月份）。 |
3 | 坐标Y轴 | 标题：自定义 Y 轴名称（如“销量额/万”）。 数值范围：可设置最小值和最大值，固定坐标范围。 显示标签文字：控制是否显示刻度数值。 |
4 | 数据显示 | 若维度下的类别较多，可限制仅显示前 N 个类别下的数据（如：最近 12 个月）。仅 1 个维度时可见可用该设置项。 |
5 | 数据标签 | 勾选后，在数据点旁显示具体数值。 |
6 | 显示图例 | 当存在多条折线时，显示图例以区分不同颜色代表的指标或维度值。 |
4.5 面积图
「面积图」是在折线图的基础上，填充折线与横轴之间的区域，强调数量的累积感或总体规模。
- 优点： 在展示趋势的同时突出总量感和体量差异，适合需要同时关注「走向」和「规模」的场景
- 示例：统计项目内近六周的预估花费工时和实际工时。
4.5.1 维度与指标
完成【2. 通用设置】后，可按需添加维度和指标字段：
设置项 | 说明 |
维度字段 | 决定横轴（X 轴）上的数据点序列，即有多少个数据点，可添加 1～2 个维度 |
指标字段 | 决定数据点的纵向高度及填充区域的量级。 1 个维度时，可添加 1 个或多个指标 2 个维度时：仅可添加 1 个指标 |
4.5.2 显示样式
完成以上配置后，可以按需设置面积图的显示样式：
序号 | 设置项 | 说明 |
1 | 线型 | 支持「普通」和「曲线」 2 种。
|
2 | 坐标X轴 | 显示标签文字：控制是否显示维度名称（如日期、月份）。 |
3 | 坐标Y轴 | 标题：自定义 Y 轴名称（如“销量/台”）。 数值范围：可设置最小值和最大值，固定坐标范围。 显示标签文字：控制是否显示刻度数值。 |
4 | 数据显示 | 若维度下的类别较多，可限制仅显示前 N 个类别下的数据（如：最近 6 周）。仅 1 个维度时可见可用该设置项。 |
5 | 数据标签 | 勾选后，在数据点旁显示具体数值。 |
6 | 显示图例 | 当存在多条线时，显示图例以区分不同颜色代表的指标或维度值。 |
4.6 饼图
「饼图」通过扇形的面积和圆心角大小，直观展示各分类数据占总体的比例关系。
- 优点： 一眼看出各部分的占比分布和主导成分；视觉冲击力强，适合快速了解构成情况。
- 示例： 展示任务按优先级的分布占比。
4.6.1 维度
完成【2. 通用设置】后，可按需添加维度和指标字段。具体如下表所示：
设置项 | 说明 |
维度字段 | 决定饼图被划分为多少个扇区，每个枚举值对应一个扇区，可添加 1 个维度 |
指标字段 | 决定每个扇区的面积大小（即该类别在总体中所占的比重），可添加 1 个指标 |
4.6.2 饼图类型
饼图提供以下 3 种展示类型：
- 实心
- 粗圆环
- 细圆环
4.6.3 显示样式
完成以上配置后，可以按需设置饼图的显示样式：
设置项 | 说明 |
数据显示 | 若维度类别较多，可限制仅显示前 N 个类别的数据（如 Top 5）。 |
数据标签 | 可选择显示以下内容：
|
显示图例 | 说明各类颜色的含义。 |
5. 图表操作
5.1 切换图表
设计图表时，如需切换成其他类型图表，可选中图表，在右上角进行切换。
系统会根据当前添加的维度和指标数量，过滤出支持切换的类型，不可切换的图表将自动灰化。如下图所示：
5.2 刷新和放大图表
在自定义详情页中查看图表的时候，可将鼠标悬停至图表上方，点击右上角出现的「刷新」按钮加载最新数据，或点击「放大」查看图表。如下图所示：
400-111-0890
在线咨询