山海鲸可视化

天气

1. 简介

天气组件可以提供 24 小时天气预报、七天预报、查询服务、实时天气和预警信息。

2. 效果展示

背景.jpg

3. 样式

在样式中可以设置时间组件的字体、大小位置、和边框背景等。

3.1 基本设置

配置项	说明
不透明度	1）根据个人喜好或整体和谐度合理地使用透明度，会让大屏布局更美观；	2）这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。
城市	可以输入国内各个城市，会提供该城市的天气信息。
天气显示天数	根据需求，可以选择“显示所选日期”、“显示未来 3 天”、“显示未来 5 天”或“显示未来 7 天”的天气信息。
天气日期选择	根据需求，可以选择从“今天”到“第七天”中任意一天的天气信息。
天气时间选择	根据需求，可选择“日间天气”或“夜间天气”。
图标文字对齐方式	默认对齐方式为居中，可根据需求设置向左、居中或向右。
图标文字排列方式	默认排列方式为横向，可根据需求设置横向或纵向。
显示日期	默认为关闭状态，可根据需求开启。
日期格式	日期格式默认为“MM-DD”，也可以根据需求自定义格式样式。
定时刷新天气	默认为关闭状态，可根据需求开启。

时间 透明度变化，如下图所示：
透明度.gif

3.2 显示图标

设置图标宽度、图标高度、图标背景色、图标垂直位置和图标水平位置。
显示图标.jpg

3.3 显示温度

设置显示温度的字体、文字垂直位置和文字水平位置。
显示温度.jpg

3.4 显示文字

设置显示文字的字体、文字垂直位置和文字水平位置。
显示文字.jpg

3.5 大小＆位置

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

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

位置.png

3.6 边框设置

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

3.7 背景设置

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

时间 无背景色样式，如下图所示：
背景.jpg

时间 有背景色样式，如下图所示：
背景2.jpg

4. 交互

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

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

5. 数据

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

5.1 动态数据项

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

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

5.2 数据联动

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

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

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

5.3 数据筛选

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

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

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

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;