天气组件
文档基于天气组件v1.1.4版本
组件说明
天气组件通过接收api接口数据可以通过选项卡等其他组件配合进行实时的天气信息更新。
效果案例
*天气组件 效果案例
一、样式
在样式中可以设置组件的基本属性、全局、天气信息和图标列表。
1、基本属性
位置尺寸
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
基本柱状图组件尺寸不影响组件内容显示、组件动画。
*组件位置尺寸说明
默认隐藏
勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。
2、全局
当前天气
目前已预置国内主要城市实时天气数据，支持国内天气数据直接添加。
（国外天气数据目前不支持，选择国外地理位置不会产生效果）
当前天气样式说明
图标
支持对天气组件的图标样式进行修改。
配置项 | 说明 |
位置 | 支持设置图标位置在组件左侧或者正上方。 |
颜色 | 支持对图标颜色与透明度进行修改。 |
尺寸 | 支持对图标大小做直接修改，大小为px。 |
右边距 | 支持对图标右侧到文字的距离做直接修改，单位为px。 |
天气信息
天气信息默认排列顺序为天气状态（weather）、温度（temperature）、风（wind）。
配置项 | 说明 |
排列方式 | 支持设置横向排列与纵向排列两种样式。 |
反向排列 | 若勾选反向排列则排列顺序为风（wind）、温度（temperature）、天气状态（weather）。 |
*天气组件纵向排列样式说明
3、天气信息
天气名称
支持对天气名称样式进行修改，对应字段为temperature。
配置项 | 说明 |
文本样式 | 支持对文本字体、大小、颜色、透明度、粗体、斜体、字距和行距做编辑。 |
偏移 | 支持对文本做X轴、Y轴方向上的偏移，单位为px。 |
*天气名称样式说明
温度
支持对温度样式进行修改，对应字段为weather。
配置项 | 说明 |
连接符 | 支持自定义连接符文本，默认为“~”。 |
文字 | 支持对文本字体、大小、颜色、透明度、粗体、斜体、字距和行距做编辑。支持对文本做X轴、Y轴方向上的偏移，单位为px。 |
后缀 | 可自定义后缀内容，默认为“℃”，支持对文本字体、大小、颜色、透明度、粗体、斜体、字距和行距做编辑。 |
*温度样式说明
风向
支持对风向样式进行修改，对应字段为wind。
配置项 | 说明 |
文本样式 | 支持对文本字体、大小、颜色、透明度、粗体、斜体、字距和行距做编辑。 |
偏移 | 支持对文本做X轴、Y轴方向上的偏移，单位为px。 |
*风向样式说明
4、图标列表
支持上传图片自定义天气图标，其中组件已预置常见14种天气图标。
可点击
添加图标系列。
配置项 | 说明 |
字段名 | 图标对应的字段名称，当数据中的weather字段对应上字段名后，显示对应图标。 |
图片 | 上传图片作为天气图标。 |
*数据系列配置项说明
二、数据
组件数据格式
字段 | 说明 |
weather | 天气信息，根据文本内容展示对应图片 |
temperature | 气温数据，有最大值与最小值 |
wind | 风力等级与风向 |
*组件数据格式说明
JSON数据案例
[
{
"weather": "晴",
"temperature": {
"min": 17,
"max": 28
},
"wind": {
"direction": "东南风",
"level": "3"
}
}
]数据配置项说明
配置项 | 说明 |
数据源 | 数据源类型、数据源选择等 |
数据过滤器 | 勾选启用数据过滤器，单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见数据过滤器使用说明 |
数据响应结果 | 展示数据请求的响应结果 |
自动更新 | 选中后可以设置数据请求时间间隔 |
数据对接详情
数据对接详情请见以下文档👇
三、交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时，则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项：
配置项 | 说明 |
渐隐渐显 | 启用是 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间，单位为ms |
延时 | 载入动画延时长，单位为ms |
自定义事件
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
四、视频教程实例
知识点 通过API数据回调利用天气组件 动态切换天气情况
欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0