数据配置

数据配置面板支持接入各种业务数据，包括静态数据、api数据资源、sql数据资源、关联数据资源。通过数据匹配，将业务数据接入并适配到组件，同时设置受控模式、自动刷新实现对数据的加载性能优化和实时数据更新。

数据来源

静态数据

• 编辑数据: 点击可对组件内置的静态数据进行修改，提供 表格4.2+ 和 JSON 形式。

  • 添加行: 点击按钮在表格最下方新增一条数据。

  • 添加列: 点击按钮在表格最右侧新增一列数据。

  • 删除数据: 点击对应行按钮删除当前行数据。

  • JSON编辑: 点击，切换至JSON编辑状态。通过增加、删除或修改JSON格式的数据完成数据源的编辑。

• 字段类型: 点击列名后的字段类型标识可修改当前列的字段类型或删除当前列。

  • 字符型： 标识符为A。

  • 数值型： 标识符为#。

• 还原默认数据: 点击①处将数据还原成默认数据。

• 搜索数据中的字段: 当列表中字段过多时，可通过搜索框搜索列表中的字段。

• 刷新字段列表： 对列表中字段进行搜索完成后，列表仅展示部分字段，若想查看所有字段，可点击②处，刷新列表中字段，

数据资源

• 选择数据资源： 切换到 数据资源 标签，点击可从数据管理或API中选择相应的数据资源作为组件的数据支撑。

• 还原默认数据： 点击①处刷新数据资源。

• 搜索数据中的字段： 当列表中字段过多时，可通过搜索框搜索列表中的字段。

• 刷新字段列表： 点击②处刷新字段列表

• 字段类型

  • 字符型： 标识符为A。

  • 数值型： 标识符为#。

排序

组件绑定数据资源后，可对拖动到数据匹配区域的字段进行排序，以便更好地展示数据趋势或进行比较。

• 以 柱状图 组件为例，绑定系统内置的数据资源 超市-订单[示例]。数据匹配区域中横轴添加字段子类别,纵轴添加字段数量。

• 点击字段后在弹出下拉框中选择排序方式。

  • 升序: 字段类型为数值时，值从小到大排列。字段类型为时间时，按时间从早到晚排列。

  • 降序: 字段类型为数值时，值从大到小排列。字段类型为时间时，按时间从晚到早排列。

提示：

升序、降序支持多个字段排序

删除和清空

• 删除: 点击字段后在弹出下拉框中删除当前字段。

• 清空: 点击数据配置面板中对应区域按钮，清空当前区域所有字段。

数据模版

数据模板一般用于文字组件的数据面板中。数据模版中可输入 HTML 标签、获取对应字段的值、获取变量池中变量值。

• 点击弹出数据模版输入框，在代码编辑区可以写代码处理数据。

• 模板中可以使用 {0}、{1} 字符，{0}代表配置的第一个的数据内容，{1}代表配置的第二个的数据内容。

• 模板中使用普通字符，直接输入需要展示的字符即可。

• 模板中可以使用 html 标签，例如：

   <span style="color:red">显示文本</span>

• 模板中可以使用变量池中变量 {var_变量名}

数据过滤 2024.5+

用于简单处理已返回的数据，渲染图表时使用已处理过的数据。

• 点击添加数据过滤器，在代码编辑区可以写js代码处理数据。

// data 代表已返回的数据，HETU 表示内置的函数，可以获取变量值
function (data, HETU) {
  // 返回值为data
  return data;
}

数据映射 3.2+

数据映射是将数据映射为视觉元素，专注于增强图形和数据之间的关联性，将样式配置和数据映射能力相融合。

例如：在图表中用图形的尺寸来表示数据的大小、用不同的颜色或形状来表示数据的分类。

属性面板中的视觉映射更侧重于配置固定数据映射到视觉元素的属性，而数据面板中的映射更侧重于根据数据的类型或大小将数据映射到视觉元素中。

• 新增： 将数据列表中的字段拖拽到相应的视觉元素中，使数据映射到视觉元素中。

• 调整顺序： 可通过拖拽映射列表前面的图标调整映射器的排列顺序。

• 删除： 点击字段后按钮在弹出面板中进行删除当前数据映射字段。

• 映射配置： 点击字段后按钮弹出数据映射配置面板。

  • 启用/停用： 点击启用或停用当前映射器。

颜色

颜色映射用于设置图表中各种颜色和字段数据之间的映射配置效果。

• 颜色模板： 单击颜色显示条，打开多色颜色模板。单击模板内颜色条，即可快速切换配置映射颜色。扩展颜色模板

• 更改颜色： 当用户不满足于模板中提供的颜色时，可点击颜色块改变图形颜色，同时也可以通过修改颜色块侧边的颜色值修改图元颜色。

• 锁定： 当用户对选定的颜色或形状进行锁定后，重新在颜色/形状模板中选择模板后，被选定的颜色/形状不被改变。

• 反序： 点击图标，即可倒序排列映射列表。

• 数量： 可以自定义设置列表中映射项的数量。

名词分类

将字段中相同的名词划分为一类，一类名词设置一种颜色。

提示：

名词分类只支持字符类型字段。

• 例外值： 当数据中存在例外值时，单独设置其颜色/形状。

• 自动映射： 按照字段中的文字的顺序自动映射到颜色。可通过数量调整映射项的数量，未配置颜色的数据将使用例外值的配置。

• 自定义映射： 开启自定义映射开关，左侧为颜色值，右侧默认显示字段内名词，可以自定义修改名词和颜色的映射匹配。

数值连续

例如：配置的颜色为['#333', '#78ab23', 'blue']。意思就是以这三个点作为基准，形成一种『渐变』的色带，数据映射到这个色带上。也就是说，与min相等的值会映射到'#333'，与 max 相等的值会映射到 'blue'。对于 min 和 max 中间的其他点，以所给定的 '#333', '#78ab23', 'blue' 这三个颜色作为基准点进行分段线性插值，得到映射结果。

• 自动映射： 自动读取字段中的最大值和最小值。

• 自定义映射： 开启自定义映射开关，用户可修改读取的最大值及最小值。

平均分区

将min与max平均分为 N 段，根据配置的颜色将数据分为 N 段。

• 自动映射： 自动读取字段中的最大值和最小值，将数值平均值自动映射到颜色。可通过修改数量来控制映射项的数量。可显示出控制器查看效果。

• 自定义映射： 开启开关，用户可修改读取的最大值及最小值。

  • 分段： 自定义数据分区段数。

  • <min： 勾选<min 后，增加小于最小值的数据到颜色的映射。

  • >max： 勾选>max 后，增加大于最大值的数据到颜色的映射。

自定义分区

自定义数据范围及其颜色。

• 添加： 点击添加映射数量。

• 连续分区 开启此按钮后可定义连续的分区。

• 不连续分区： 开启此按钮后可自定义不连续的分区。

尺寸

尺寸映射器用于调整图元尺寸，通过使用范围决定图元尺寸范围，可自定义数值和尺寸的映射关系。

左侧为图形的最大、最小值，右侧为字段数据的最大、最小值。

尺寸映射是将字段的最大值映射到图形的最大尺寸上，将字段的最小值映射到图形的最小尺寸上，中间值根据比例显示。

提示：

尺寸映射只支持度量字段。

• 自动映射： 尺寸映射器自动读取字段中的最大值和最小值，根据数据的大小改变图元的尺寸。

• 自定义映射： 开启开关，用户可修改读取的最大值及最小值。

形状

形状映射器用于映射组件中字段和图形之间的映射关系。

• 形状模板 点击形状显示条，打开多形状模板。单击模板内形状条，即可快速切换配置映射形状。支持内置图标和自定义图标。2024.5+

• 更改形状 当用户不满足于模板中分配的形状顺序时，可单击当前形状图标改变图形形状。

• 自动映射 映射器将字段中的数据自动分类并将其映射到形状模板中。

• 自定义映射 开启此按钮后，用户可自定义数据与形状之间的映射关系。

系列及控制器配置

系列

系列与属性中的系列相对应。若未设置，则表明映射器控制所有系列。

提示：

系列号从 0 开始

控制器配置

配置控制器将数据映射与属性中的视觉映射相对应，在视觉映射中会产生一个专门的数据类型面板，调整数据映射中的控制器样式。

条件映射 3.2+

用于根据某种逻辑条件判断，符合条件时将执行条件下配置的样式。

提示：

对于图表组件来讲，条件映射配置在数据面板配置，条件映射和属性系列向对应。

除图表外的其他组件，条件映射配置在属性面板内配置。

• 添加条件映射: 点击添加条件映射。

• 重命名条件映射: 点击条件映射名可进行重命名，默认值为 未命名条件。

• 启用/停用条件映射: 点击可启用/停用条件映射，激活状态代表启用该条件映射。

• 编辑条件映射: 点击按钮可在条件映射面板中编辑当前条件映射。

• 删除条件映射: 点击按钮可删除当前条件映射。

• 添加条件: 点击条件映射面板中在下拉框中选择具体条件进行添加。

• 重命名条件: 点击条件名可进行重命名，默认值为条件类型，例 TOP条、奇数条、偶数条、指定条。

• 启用/停用条件: 点击可启用/停用条件，激活状态代表启用该条件。

• 删除条件: 点击按钮可删除当前条件。

TOP 条

改变数据的前 N 条的样式，以 柱状图 为例:

1. TOP 条输入框中输入修改的条数

2. 修改 普通状态 -> 图形样式 -> 颜色 为红色

奇数条

改变数据中奇数条的样式。

偶数条

改变数据中偶数条的样式。

指定条

改变数据中指定条数的样式，以 柱状图 为例:

提示：

在指定条输入框中输入时，可将多个作为数据条的索引用英文逗号隔开。

1. 指定条输入框中输入修改的数据索引

2. 修改 普通状态 -> 图形样式 -> 颜色 为绿色

自定义规则

可自定义添加代码，该方法返回true 时执行配置的样式。

// data 代表数据资源，index 表示数据的索引
function (data, index) {
  // 返回值为布尔值
  return data.x > 50;
}

规则树

规则树采用两层嵌套的并且和或者链接各个条件，以便组合成各种复杂的逻辑判断（使用合取范式或者析取范式可以组合成任意条件）。常用于指定满足特定要求的图表的条件样式，替代以往的组件系列功能。条件样式提供比系列相同的样式选项，以 柱状图 组件为例：

1.筛选条件中的第一个输入框为数据字段；

2.筛选条件中的第二个输入框为连接符；

3.筛选条件中的第三个输入框为值；

4.新增条件时可选择 并且 或 或者 作为联结词。若要删除某一个条件可点击按钮 1 处若要将整个规则树从条件映射中删除，可点击按钮 2 处。

智能转换 3.2+

以数据为基准，智能分析出该数据可支持的图表。点击在弹出框中选择图表需要转换的图表。

数据控制

• 受控模式: 点击启用或停用受控模式。开启后，在预览和发布默认不加载数据，通过交互配置中数据响应或节点编程中请求数据接口才会触发数据加载。

• 自动刷新: 点击启用或停用自动刷新。开启自动刷新并配置刷新频率后，每间隔 N 秒将重新加载数据，渲染组件。

• 数据量: 在配置组件请求的数据量。

提示

受控模式、自动刷新、数据量仅在组件选择数据资源后可使用