山海鲸可视化

数据表格

1. 简介

数据表格组件可以通过表格的形式来展示数据,它会显示由一系列行与列构成的网格。单元格内可以存放数值、计算式、文本或图片。当数据表格大小不足以展示全部数据时,它会自动进行循环滚动展示。

2. 效果展示

数据表格.gif

3. 样式

在样式中可以设置数据表格组件的表头行格式列格式序号列动画等。

接下来,会用以下示例数据对组件样式进行说明:

城市 人均收入
北京 11111
北京 22222
上海 33333
上海 44444
杭州 55555
杭州 66666
南京 77777
南京 88888

3.1 基本设置

配置项 说明
不透明度 1)根据个人喜好或整体和谐度合理地使用透明度,会让大屏布局更美观; 2)这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏
显示滚动条 如果当前表格大小设置导致内容显示不全,可以显示滚动条,然后滚动显示,如果关闭滚动条,则未能显示的内容不能显示出来(开启动画之后会滚动显示出来)。
自动换行 开启后字数超出列宽就会自动换行。

数据表格 透明度变化,如下图所示:
透明度.gif

3.2 表头

配置项 说明
文字颜色 可以对表头中文字的颜色进行设置。
背景颜色 可以对表头的背景颜色进行设置。
文字大小 可以对表头的文字大小进行设置。
行高 可以对表头的行高进行设置。
行间距 可以对表头的行间距进行设置,行间距决定了表头与表体之间的距离。
对齐 分为“左对齐”“居中”“右对齐”,可按需进行选择。
显示分隔线 可以控制是否在表头和表体之间显示分隔线。
分隔线颜色 可以对分隔线的颜色进行设置。

数据表格 表头样式,如下图所示:
image.png

3.3 行格式

行格式样式设置中,文字颜色、背景色、背景图、填充方式设置项分为奇数行和偶数行两种,可分别对奇数行和偶数行的对应设置项进行设置。

配置项 说明
文字颜色 可以对表体奇数行或偶数行文字的颜色进行设置。
背景色 可以对表体奇数行或偶数行的背景颜色进行设置。
背景图 可以通过添加本地图片,对表体奇数行或偶数行的背景图进行设置。
填充方式 可以对背景图奇数行或偶数行的填充方式进行设置,分为“平铺以充满容器”“拉伸以充满容器”两种方式。
鼠标经过背景色 可以对鼠标经过表体某行时,表体中该行所显示的背景色进行设置。
左右边框颜色 可以对表体的左右边框颜色进行设置。
左右边框宽度 可以对表体的左右边框宽度进行设置。
行高 可以对表体的行高进行设置。
行间距 可以对表体的行间距进行设置。

数据表格 行格式,如下图所示:
image.png

3.4 列格式

配置项 说明
文字对齐 可对表体某列中的文字对齐进行设置,分为“左对齐”“居中”“右对齐”,可按需进行选择。
字体 可对表体某列中文字的字体、大小、颜色等进行设置。
每列格式独立设置 这是一个开关选项,开启后就可以对表体中的每列数据单独进行设置。

数据表格 列格式,如下图所示:
image.png

3.5 序号列

开启“序号列”后,会在表体最左侧显示序号列,序号列从表体第一行开始,由小到大向下排序,并在表头额外增添“序号”一列。

配置项 说明
序号列列宽 可以对序号列的列宽进行设置。
名称 可以对序号列的表头内容进行设置,表头默认内容为“序号”。
类型 可以对表体序号列的序号类型进行设置,分为“阿拉伯数字”“罗马数字”以及“留空”
文字对齐 可以对表体序号列的序号对齐方式进行设置,分为“左对齐”“居中”“右对齐”,可按需进行选择。
文字 可对表体序号列文字的字体、大小、颜色等进行设置。
背景色 可以对表体序号列的背景颜色进行设置。
背景图标 可以通过添加本地图片,为表体的序号列设置图标。
图标显示行数 可以设置图标在序号列中显示的行数。
图标宽度 可以设置图标的宽度。
图标高度 可以设置图标的高度。
图标排列方式 可以设置图标的排列方式,分为“在文字下面”“在文字上面”

数据表格 序号列样式,如下图所示:
image.png

3.6 网格线

网格线可以将每个单元格清晰地进行划分,在这里可以设置是否显示数据表格的水平线和垂直线,同时还能对水平线和垂直线的颜色进行设置。

数据表格 网格线样式,如下图所示:image.png

3.7 展示设置

可以设置组件中数据的展示形式,组件的展示形式有 2 种:滚动展示轮播展示。未开启循环播放时,动画只在启动全屏时播放一次,开启循环播放之后才会按照间隔时间循环播放动画。

数据表格 轮播效果,如下图所示:
展示设置.gif

3.8 大小&位置

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

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

位置.png

3.9 边框设置

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

3.10 背景设置

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

数据表格 无背景色样式,如下图所示:
image.png

数据表格 有背景色样式,如下图所示:
image.png

4. 交互

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

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

5. 数据

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

5.1 字段设置

数据表格组件会根据数据源格式,在表格中显示对应的列字段。
image.png

5.2 动态数据项

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

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

5.3 数据联动

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

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

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

5.4 数据筛选

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

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

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

6. 代码

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* 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;

点击“选择资源文件”,添加含示例代码的 JavaScript 文件
image.png

添加完成后会代码会自动执行,此时组件已经能够自动在大屏上向右移动了。
代码.gif

【温馨提示】详细的代码设置请参考二次开发教程

7. 扩展设置

组件的每个样式属性都可以打开一个“扩展设置”菜单,将鼠标移至属性名称的右侧点击后即可看到,菜单共包含三个选项:“条件样式”“调用代码示例”“生成数据字段”
image.png

7.1 条件样式

此功能可以将已经设置好的数据条件应用于组件的样式属性中,便于实现组件在不同条件下的状态。

【温馨提示】详细的条件样式设置请参考数据条件教程

7.2 调用代码示例

此功能用于组件的二次开发,便于编写二次开发相关的JavaScript 代码
image.png

【温馨提示】详细的调用代码示例设置请参考二次开发教程

7.3 生成数据字段

此功能可以给组件的样式属性生成一个“动态数据项”,便于精准控制样式的属性值。
image.png

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

8. 组件状态

组件可以设置多个状态,状态之间可以通过设置状态触发条件来进行切换。

【温馨提示】详细的组件状态设置请参考设置组件的多状态教程

9. 数字孪生大屏应用案例

9.1 全球医疗可视化信息平台数字孪生大屏

image.png

9.2 体育馆赛事可视化数字孪生大屏

image.png

9.3 网络信息链路拓扑监控数字孪生大屏

image.png