图表

业务场景

通过选择不同的年份、组织、场景实现人力成本实际数与预测数对比的动态查询。

搭建思路

我们希望图表能够跟随筛选条件实时变化：用户在页面上选择年份、组织、场景等条件后，图表自动根据最新条件从数据源重新取数。

由于这些条件是动态的，无法在数据源中写死固定值，因此需要：

• 在页面中放置筛选控件（通常为维度选择器或下拉框），承载用户输入；

• 在数据源的查询配置中，使用表达式直接引用这些控件的值，作为财务模型或分析查询的入参；

• 勾选数据源的【参数变化时自动执行】，使得每次筛选器值变化时自动刷新图表。

配置步骤

1. 在控件栏的自定义组件中拖入多个「维度选择器」到画布中，分别关联 Year、Scenario、Org 等维度，并配置好可选范围与默认值：

1. 在数据源的查询配置中，直接引用筛选控件的值作为查询条件，其中 deep_dimension_VXzz 为 Year 的维度选择器编码：

也可以通过表达式 $components.object_select_NY4A.value 的形式引用控件值，其中 object_select_NY4A 为 Org 维度选择器编码：

表达式相关说明：

以 year{$components.deep_dimension_VXzz.value} 为例，其中：

• $components.deep_dimension_VXzz.value 是获取维度成员值的表达式，用于动态读取 Year 维度选择器当前选中的成员；

• 将该表达式写入财务模型脚本或查询条件中，即可在每次 Year 变更时自动刷新图表。更多表达式用法可参考 表达式 章节。

1. 拖拽图表控件至画布中，选择配置好的财务模型数据源作图，并在数据源上勾选【参数变化时自动执行】。此时图表即可根据筛选器的切换进行动态查询：

业务场景

预算编制场景下，所有用户对当前年份统一进行预算编制，并对当前年份的预算结构总量进行分析，不同部门用户可针对各自部门进行相关数据查看。

搭建思路

在上述场景中，我们希望：

• 默认年份由平台统一控制（如当前预算年度），而不是每次都由用户手动选择；

• 不同用户登录时，默认组织自动带出为各自所在部门。

因此可以通过变量元素配置：

• 一个全局变量 Year（例如默认值为当前预算年度）；

• 一个用户变量 Entity（例如默认值为集团级组织，自定义值设置为用户所属部门）。

图表页面中的维度选择器可将默认值绑定为这些变量，从而实现“按年/按部门打开即有默认筛选”的效果。

配置步骤

1. 在变量元素中添加全局变量 Year，将值设置为预算年度（如 2023 年）；添加用户变量 Entity，默认值设置为集团级组织，自定义值设置为用户所在部门，如 EC01-集团总部：

1. 在 UX 页面「变量」标签页中选择变量元素，引入需要用到的页面变量 Year、Entity：

1. 在图表上方的维度选择器中，将默认值绑定到对应变量：

• Year 维度选择器默认值配置为「UX 变量 Year」；

• Entity 维度选择器默认值配置为「UX 变量 Entity」。

使用效果如下：

注：此处变量值字段类型仅支持维度类型字段。

业务场景

点击不同月份、场景的人力成本对比图表，可以在同一页面的另一张图或明细表中查看对应月份及场景的薪资项明细。

搭建思路

页面上配置两个图表：一个柱状图用于展示按月份/场景的人力成本对比，另一个饼图用于展示薪资项明细。明细图表的数据源查询条件来自对比图表的点击结果。

当用户点击对比图表中的某根柱子时，通过图表特有的 clickItem 变量获取点击的 Period、Scenario 等字段，并在明细图表的数据源查询条件中使用，从而实现两个图表之间的联动。

配置步骤

1. 配置两个图表：一个饼图（薪资项明细图表），一个柱状图（人力成本对比图表）。

2. 在薪资项明细图表的数据源行列中配置表达式，如下图所示：

说明：

• Period 字段切换成表达式，以获取人力成本对比图表点击抛出来的数据，写法为：$components.chart_BISI.clickItem?.["period"] || 'TotalPeriod'，Scenario 字段同理；

• 其中 chart_BISI 为人力成本对比柱状图的编码，period 为需要获取的维度成员数据；

• clickItem 为图表特有的变量，用于获取图表点击事件触发后的数据；

• TotalPeriod 为无点击事件时的默认值，确保页面初始加载时也有合理展示。

注意：明细图表的数据源需勾选【参数变化时自动执行】，否则在点击对比图表后明细图表不会自动重新查询。

业务场景

点击不同的销售实体的销售收入图表，可以按不同的工厂查看不同产品销售明细；同时页面顶部还有多个筛选器控制整体视图，希望所有条件最终都集中体现在筛选区域上。

搭建思路

除了通过筛选器进行筛选外，很多页面希望“点哪看哪”：当点击某个图形（如某根柱子）时，页面其他区域根据点击内容被筛选。

若直接在多个数据源中同时使用图表的 clickItem 作为条件，容易出现：

1. 目标图表或清单表已通过筛选器联动，叠加图表联动后条件不一致，造成歧义；

2. 图表的默认值难以统一管理（无点击时取哪个条件）；

3. 页面上难以一眼看出当前生效的筛选条件。

因此，推荐做法是：将所有需要用到的筛选条件统一放在顶部筛选区域，图表点击只负责修改筛选控件的值，再由筛选控件驱动其他图表和清单表联动。

配置步骤

1. 配置两个图表：一个饼图（明细图表）、一个柱状图（销售收入图表），同时配置一个「工厂」控件（POV）作为明细图表数据源的查询条件，配置方式同前文筛选器场景；

2. 在销售收入图表的「点击数值单元格」事件中，配置【控件值修改】动作，如下图所示：

事件动作说明：

• 点击数值单元格：即点击图表中的图形触发的事件；

• 控件值修改：通过该动作可以修改筛选控件的 value；

• 目标控件：选择需要修改的控件，为了实现图表联动，这里需选择明细图表的数据源所依赖的 POV 控件（如「工厂」）；

• 赋值为：切换成表达式，以获取销售收入图表点击事件抛出的数据，写法为：$components.chart_zGir.clickItem.Entity_s：

  • 其中 Entity_s 为具体需要获取的维度成员数据；

  • clickItem 为图表特有的变量，用于获取图表点击事件触发后的数据。

同样需要注意，明细图表的数据源需勾选【参数变化时自动执行】，否则修改 POV 后图表不会自动查数。

业务场景

按费用性质划分，对同种费用性质不同部门的信息化支出进行对比分析，需要在财务模型脚本中同时表达「部门范围」和「费用性质」两个条件。

搭建思路

在财务模型中，取数脚本是一段由多个函数组合而成的表达式，例如：

• Base(...)：指定某个维度成员或成员集合作为基础筛选范围；

• Attr(ud5,'1')：按维度属性（如费用性质 ud5）做筛选；

• AndFilter(A, B)：将多个条件合并为一个复合筛选条件。

通过将这些函数与 UX 中的控件值组合，就可以实现「根据页面选择的费用性质动态拼接脚本」，而不用在模型里写死具体值。

配置步骤

1. 在画布中拖拽一个“费用性质”选择框，信息化支出数据源为财务模型，Entity、Account 放在行列上，其他维度放背景，假设 Entity 的 ud5 属性代表费用性质。

2. 在数据源的取数脚本中，根据需要拼接表达式，例如：

   • 若 ud5 所需过滤的值为固定值 1，则表达式为：

     `AndFilter(Base(${$components.deep_dimension_7r3R.value},0), Attr(ud5,'1'))`
     

   • 若 ud5 所过滤的值来自页面控件，则表达式为：

     `AndFilter(Base(${$components.deep_dimension_7r3R.value},0), Attr(ud5,'${$components.input_FWTf.value}'))`
     

   其中 $... 为 JS 表达式，`...${...}...` 为 JavaScript 模板字符串语法，用于在财务模型脚本字符串中“注入”当前控件的值。

3. 拖拽图表控件至画布，配置柱状图，轴选择 Entity，值选择 data，必要时可勾选坐标轴转置。

   

注意：数据源需勾选【参数变化时自动执行】，使用时切换费用性质控件值时，图表才会跟随联动。

业务场景

通过不同的视角查看下半年资金计划，支持多视角查看。

搭建思路

根据业务场景，我们希望根据用户在多选筛选器中选择的多个成员动态查询图表，需要将这些成员作为参数传给财务模型。由于多选控件的值在 UX 中通常是一个数组，需要先在表达式中将其转换为财务模型脚本要求的格式。

配置步骤

1. 在控件栏的自定义组件中拖入一个“维度选择器”到画布中，关联 Dataview 维度，开启【允许多选】配置，并配置好可选范围、默认值：

1. 在数据源的查询配置中直接引用动态的控件值，选择 FX 表达式：

   Copy

   $components.deep_dimension_kybq.value?.join(';')
   

表达式相关说明：

• 其中 deep_dimension_kybq 为 Dataview 维度选择器编码；

• 维度筛选器为多选时，控件值为数组格式，因此需要通过 join(';') 将数组转换成由分号拼接的字符串，以符合财务模型脚本的传参规范。

1. 拖拽图表控件至画布中，选择配置好的财务模型数据源作图，此时即可按照多视角对下半年资金计划进行查看。

取数范围

通过取数范围的配置可以调用财务模型的取数接口拿到相应的数据，支持UI与脚本模式

• 所谓脚本模式即调取财务模型取数接口时需传给财务模型的一段特定格式的脚本，财务模型通过解析该脚本中的维度筛选出数据返回给UX；

• 可配置固定值或表达式；

数据处理与转换

• 可以在此处配置按维度成员进行排序；

• 透视列：财务模型原生取到的为含data列的格式，通常需要进行透视处理。选择要透视的列以及需要用到的成员，会进行行转列的透视操作，便于后续的作图；

• 维度显示格式：可配置显示名称/描述；

• 合并字段：通常用于展示有效组合，将对值与描述均以”-“拼接。

结构

• 在结构中会显示财务模型传参的数据结构，包括行列维度、财务模型存数的字段data；

其他配置

• 参数变化时自动执行：勾选后系统会实时监听脚本模式中参数的变化，然后自动查询无需额外配置查数动作，建议勾选；例如，配置筛选器动态查询图表时，若勾选参数变化时自动执行，切换筛选器时，图表会自动查询切换后的数据；若不勾选，切换筛选器，图表不会根据切换后的数据进行查询展示。

• 任一参数为空值时不执行：勾选后，查询数据源数据时只要有一个参数为空（null/undefined/空字符），则不调用查数接口。解决接口入参必填时，多个参数从无到有变化，导致调用多次，并且出现接口抛错，建议勾选。

瀑布图应用场景

经营性净现金流间接法：从净利润出发，通过调整不涉及现金的收入、费用以及营业外收支等项目，同时剔除投资活动和筹资活动对现金流量的影响，从而计算出经营活动产生的现金流量。此种场景，可通过瀑布图展示。

1、添加财务模型数据源，Year、Entity、Period、View等可取界面维度筛选器控件的值，FX表达式：$components.XXX.value，数据处理与转换-按指定列Account维度成员排序，勾选“参数变化时自动执行”和“任一参数为空值时不执行”

2、拖拽图表控件至画布，选择关联已有数据源，【确定】

3、图表类型选择“瀑布图”，选择轴Account，值data，可根据数据项配置颜色。

4、样式配置中根据实际情况配置对应样式属性，如标题、X轴旋转角度、Y轴单位计算格式等。选择瀑布图小计项：经营性实得现金流。

返回数据结构如下(_start、_end列忽略)：

使用视图效果如下：