山海鲸可视化

列表

1. 简介

列表组件通过布局框架对数据进行封装，我们可以通过添加列表组件，将需要封装的组件放到列表中进行展示。

2. 效果展示

效果展示.gif

3. 样式

在样式中可以设置列表组件的位置和边框背景等。

接下来，会用以下示例数据对组件样式进行说明：
列表组件示例数据

【温馨提示】

在列表中添加的组件一般建议使用文本、指标卡、图片等只关联单条数据的组件，不建议添加类似折线图、柱形图之类的组件；
列表中添加的组件都是自上而下排列的，最下方组件有多少条数据，列表中就会显示多少条数据，比如，最下方组件只包含 2 条数据，而其上方组件包含 3 条数据，则列表中只会显示 2 条数据。

3.1 基本设置

配置项	说明
不透明度	这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。
每页显示条数	设置每页显示的数据条数，最小为“1”，最大为“100”。
最大页数	设置最大页数，最小为“1”，最大为“10”。
滚动方向	设置滚动方向为“垂直方向”或“水平方向”。
元素分布方向	设置元素方向为“垂直方向”或“水平方向”。
显示分割线	设置每页之间是否显示分割线。
分页点颜色	设置分页点颜色。
分页点高亮颜色	设置分页点高亮颜色。
悬浮高亮	设置悬浮高亮颜色。

列表“编辑组件”按钮，如下图所示：
编辑组件.jpg

【温馨提示】当我们将其他组件放入列表组件后，需要点击右上角“编辑组件”才能进行拖动和设置，可以根据需要对列表内的组件进行排版。

列表 透明度变化，如下图所示：
透明度.gif

列表 分割线，如下图所示：
分割线.jpg

列表 分页点，如下图所示：
分页点.jpg

3.2 展示设置

可以设置组件中数据的展示形式，组件的展示形式为轮播展示。未开启循环播放时，动画只在启动全屏时播放一次，开启循环播放之后才会按照间隔时间循环播放动画。
效果展示.gif

3.3 大小＆位置

通常我们可以通过直接点击和拖动组件来设置大小和位置，在这里也可以通过直接输入X 坐标、Y 坐标、宽和高来设置。

配置项	说明
组件大小	组件的 X、Y 轴坐标，X 坐标为组件左上角距离页面左边界的像素距离，Y 坐标为组件左上角距离页面上边界的像素距离。
组件位置	即组件的宽度和高度，单位为px。
组件旋转	三维空间旋转可以输入任意数值，数值对应角度向 X 轴/Y 轴旋转。

位置.png

3.4 边框设置

在此处可以对组件边框的边框颜色、宽度、图形边框圆角半径等样式进行配置。
边框.jpg

3.5 背景设置

组件默认没有背景颜色，如果需要设置背景颜色，可以在此处进行设置，也可以将背景设置为一张图片或视频，可以选择填充方式和模糊程度。
背景.jpg

4. 交互

交互功能为组件赋予了在一定条件下与大屏操作进行交互的能力。

【温馨提示】详细的交互设置请参考设置交互教程。

5. 数据

对数据进行配置可以让组件根据相应的数据显示对应的图形，目前，山海鲸可视化软件支持导入文件数据、连接数据库、连接 API、连接山海鲸数据管家等多种数据连接方式。

5.1 字段设置

列表组件中设置字段勾选数据，需要先生成数据字段。下面以示例数据为例进行说明，我们在列表中放入了单行文本、多行文本和图片 3 种组件，如下图所示：

5.1.1 单行文本

单行文本 生成数据字段，如下图所示：

单行文本 字段设置，如下图所示：

5.1.2 多行文本

多行文本 生成数据字段，如下图所示：

多行文本 字段设置，如下图所示：

5.1.3 图片

图片 生成数据字段，如下图所示：

图片 字段设置，如下图所示：

5.2 动态数据项

使用动态数据，可以更灵活地对组件中的每一个样式属性做设置。

【温馨提示】详细的动态数据项设置请参考设置动态数据项教程。

5.3 数据联动

假设有 2 个表单分别为表单 A、表单 B，将 A 表单里某个字段的值作为查询条件，关联引用出 B 表单的数据，并填写到指定的字段中，就是数据联动。

联动项	说明
联动其他组件	开启数据联动后，单击一个图表中的任一数据点，其他使用相同数据集的图表也会随其联动变化。
受其他组件联动	开启数据联动后，图表中的数据会随发起联动的组件的变化而变化。

【温馨提示】详细的数据联动设置请参考设置数据联动教程。

5.4 数据筛选

将满足条件的数据通过筛选过滤出来。

筛选条件	说明
不筛选	不进行数据筛选。
筛选数据源指定行	可选择筛选数据源某一行数据。
选择数据条件	可自行选择数据筛选的条件。

【温馨提示】详细的数据筛选设置请参考设置数据筛选教程。

6. 代码

通过添加JavaScript 文件，可以满足对组件进行二次开发的需求。

例如，我们希望组件能够自动在大屏上向右移动，只需添加相应的JavaScript 文件即可实现。以下为本教程中使用的示例代码：

/**
 * Extension.prototype.element;
 * Extension.prototype.enabled;
 * Extension.findExtensionsOfClass(className)
 * Element.prototype.setOption()
 * Element.prototype.getOption()
 * Element.prototype.getFullData()
 * Element.prototype.name
 */
class Button{
  update(){
    const position = this.element.getOption(
      ["position"]
    );
    // 当前元素在X轴上移动一定的距离
    this.element.setOption(
      ["position"],
      [(position[0] + 1 )%100,position[1]]
    );
  }
}
export default Button;