山海鲸可视化

仪表盘

1. 简介

仪表盘是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。

2. 效果展示

仪表盘.gif

3. 样式

在样式中可以设置仪表盘组件的位置、颜色、字段样式、百分比数值和表盘刻度等。

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

水位	水压
36	100

3.1 基本设置

配置项	说明
不透明度	1）根据个人喜好或整体和谐度合理地使用透明度，会让大屏布局更美观；	2）这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。
抽样率	1）对数据进行抽样展示。如有 100 条数据，抽样率为 100%，此时会显示 100 条数据，如抽样率为 50％，则只显示 50 条数据；	2）这个设置项主要是在数据量过多、组件显示效果不佳时，可以借助这个选项来减少数据量，但是与此同时部分数据也会不显示，所以要谨慎使用。
最大刻度	最大刻度指仪表盘显示最大刻度值，一般常见设置为“100”，也可根据需要展示数值大小自定义设置。
最小刻度	最小刻度指仪表盘显示最小刻度值，一般常见设置为“0”，也可根据需要自定义设置，如“0.5、-0.25”等。

仪表盘透明度.gif

3.2 数据颜色

数据颜色为仪表盘显示颜色，可设置多个颜色用以帮助展示数据，普通样式仪表盘最多可展示两个颜色，若想表盘展示多个颜色可在图形形状中设置表盘样式为多色。

这是一个只设置一个填充颜色的仪表盘组件：

设置仪表盘颜色为两个填充颜色，如下图所示：

3.3 图形形状

图形形状描述的是组件中数据的条形形状，在仪表盘组件中设置图形形状主要指对仪表盘指针设置和表盘样式的设置。

配置项	说明
指针设置	可设置指针半径和指针宽度。
表盘样式	可设置表盘样式为默认、多色或分片。

仪表盘 默认样式，如下图所示：

仪表盘 多色样式，如下图所示：

仪表盘 分片样式，如下图所示：

3.4 数值字段

数值字段指仪表盘内部数据展示样式，可设置数据格式和显示样式。

仪表盘 默认数值字段样式，如下图所示：

仪表盘 设置数值字段样式样式，如下图所示：

3.5 百分比数值

百分比数值是仪表盘内数值字段的一种展示样式，开启后会显示数值字段为百分数形式，若需要展示数据为百分数形式可开启。与数值字段一样可设置数据格式和显示样式。

【温馨提示】百分比数值和数值字段在使用时根据需要设置一个即可。

3.6 名称字段

指仪表盘内名称字段样式，可根据需要设置名称字段显示样式。

3.7 表盘刻度

表盘刻度指仪表盘刻度值，可设置是否显示刻度线和显示仪表盘刻度值为刻度百分比形式。

3.8 内边距

内边距可以设置组件中心距离上下左右边框各自的位置，单位为px。
边距.png

3.9 大小＆位置

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

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

位置.png

3.10 边框设置

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

3.11 背景设置

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

仪表盘 无背景色样式，如下图所示：

仪表盘 有背景色样式，如下图所示：

4. 交互

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

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

5. 数据

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

5.1 字段设置

仪表盘只支持一个数据字段的展示。

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;

点击“选择资源文件”，添加含示例代码的 JavaScript 文件。

添加完成后会代码会自动执行，此时组件已经能够自动在大屏上向右移动了。
仪表盘二次开发.gif

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

7. 扩展设置

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

7.1 条件样式

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

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

7.2 调用代码示例

此功能用于组件的二次开发，便于编写二次开发相关的JavaScript 代码。

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

7.3 生成数据字段

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

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

8. 组件状态

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

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

仪表盘