更新时间:2022-04-26 GMT+08:00
分享

天气

天气组件用于展示相应城市24小时天气预报及未来一周的天气预报。

图1 天气组件效果图

在设计页面左侧从“全部组件 > 文本”中拖出天气组件至设计页面右侧空白处。在页面中选中该组件,单击组件上方图标,配置组件属性,公共属性参数说明请参考组件公共属性说明

表1 天气组件高级设置参数说明

区域

参数名

说明

统一配置

是否显示未来天气预测

是否展示未来一周的天气预报。

背景颜色

天气预报的背景颜色。

今日温度

是否显示

是否显示今日温度。

文字大小

今日温度的字体大小。

文字颜色

今日温度的字体颜色。

天气图标

是否显示

是否显示天气图标。

图标大小

天气图标的大小。

图标颜色

天气图标的颜色。

城市名字

是否显示

是否显示城市名字

文字大小

城市名字的字体大小。

文字颜色

城市名字的字体颜色。

今日天气

是否显示

是否显示今日天气

文字大小

今日天气的字体大小。

文字颜色

今日天气的字体颜色。

当前星期

是否显示

是否显示当前星期

文字大小

今日星期的字体大小。

文字颜色

今日星期的字体颜色。

当前日期

是否显示

是否显示当前日期

文字大小

今日日期的字体大小。

文字颜色

今日日期的字体颜色。

当前时间

是否显示

是否显示当前时间。

文字大小

当前时间的字体大小。

文字颜色

当前时间的字体颜色。

今日其他指标

是否显示

是否显示今日其他天气指标

文字大小

今日其他天气指标的大小。

文字颜色

今日其他天气指标的颜色。

未来天气图标

是否显示

是否显示未来天气图标

图标大小

未来天气图标的大小。

图标颜色

未来天气图标的颜色。

未来最高温度

显示

是否显示未来几天的最高温度

文字大小

未来几天最高温度的字体大小。

文字颜色

未来几天最高温度的字体颜色。

未来最低温度

是否显示

是否显示未来几天的最低温度

文字大小

未来几天最低温度的字体大小。

文字颜色

未来几天最低温度的字体颜色。

未来星期展示

是否显示

是否显示未来几天星期

文字大小

未来几天星期的字体大小。

文字颜色

未来几天星期的字体颜色。

未来日期展示

是否显示

是否显示未来几天的日期

文字大小

未来几天的日期的字体大小。

文字颜色

未来几天的日期的字体颜色。

数据源配置

  1. 选中该组件,在组件上方单击,配置组件数据源。
  2. 配置数据系列的数据,单击“保存”。

    系统预置了“天气数据桥接器”,数据源类型选择“桥接器预置”时,可在“桥接器实例”中选择到该桥接器。这里以静态数据类型数据源为例进行举例说明。系统预置的静态数据如下:

    {
      "result": [
        {
          "dataValue": {
            "dataNow": {
              "temp": "26",
              "cityName": "北京市",
              "fxDate": "05/15",
              "fxWeek": "星期六",
              "text": "晴",
              "icon": "100",
              "fxTime": "18:10   pm",
              "humidity": "31",
              "pressure": "1004",
              "windSpeed": "13",
              "aqi": 128
            },
            "dataForecast": [
              {
                "fxDate": "05/15",
                "fxWeek": "星期六",
                "tempMax": "26",
                "tempMin": "15",
                "iconDay": "101",
                "textDay": "多云"
              },
              {
                "fxDate": "05/16",
                "fxWeek": "星期日",
                "tempMax": "26",
                "tempMin": "16",
                "iconDay": "101",
                "textDay": "多云"
              },
              {
                "fxDate": "05/17",
                "fxWeek": "星期一",
                "tempMax": "28",
                "tempMin": "19",
                "iconDay": "101",
                "textDay": "多云"
              },
              {
                "fxDate": "05/18",
                "fxWeek": "星期二",
                "tempMax": "30",
                "tempMin": "16",
                "iconDay": "104",
                "textDay": "阴"
              },
              {
                "fxDate": "05/19",
                "fxWeek": "星期三",
                "tempMax": "23",
                "tempMin": "14",
                "iconDay": "103",
                "textDay": "晴间多云"
              },
              {
                "fxDate": "05/20",
                "fxWeek": "星期四",
                "tempMax": "26",
                "tempMin": "13",
                "iconDay": "300",
                "textDay": "阵雨"
              },
              {
                "fxDate": "05/21",
                "fxWeek": "星期五",
                "tempMax": "20",
                "tempMin": "11",
                "iconDay": "307",
                "textDay": "大雨"
              }
            ]
          }
        }
      ]
    }

    上述数据中“dataNow”对应今日天气,“dataForecast”对应未来几天天气预报。自定义桥接器时返回的数据字段请和上述数据保持一致。

    系统预置了一套漂亮的天气图标,用于在天气组件上使用图标展示天气状况。并用字段“icon”表示今日天气图标,“iconDay”表示未来日期的天气图标,例如取值为“100”,表示晴天,界面会展示天气图标;取值为“307”,表示大雨,界面会展示天气图标。取值和天气的对应关系请参见表2

    表2 图标字段“icon”、“iconDay”的取值和天气对照表

    icon/iconDay 取值

    天气状况(中文)

    天气状况(英文)

    100

    Sunny

    101

    多云

    Cloudy

    102

    少云

    Few Clouds

    103

    晴间多云

    Partly Cloudy

    104

    Overcast

    150

    Clear

    153

    晴间多云

    Partly Cloudy

    154

    Overcast

    300

    阵雨

    Shower Rain

    301

    强阵雨

    Heavy Shower Rain

    302

    雷阵雨

    Thundershower

    303

    强雷阵雨

    Heavy Thunderstorm

    304

    雷阵雨伴有冰雹

    Thundershower with hail

    305

    小雨

    Light Rain

    306

    中雨

    Moderate Rain

    307

    大雨

    Heavy Rain

    308

    极端降雨

    Extreme Rain

    309

    毛毛雨/细雨

    Drizzle Rain

    310

    暴雨

    Storm

    311

    大暴雨

    Heavy Storm

    312

    特大暴雨

    Severe Storm

    313

    冻雨

    Freezing Rain

    314

    小到中雨

    Light to moderate rain

    315

    中到大雨

    Moderate to heavy rain

    316

    大到暴雨

    Heavy rain to storm

    317

    暴雨到大暴雨

    Storm to heavy storm

    318

    大暴雨到特大暴雨

    Heavy to severe storm

    399

    Rain

    350

    阵雨

    Shower Rain

    351

    强阵雨

    Heavy Shower Rain

    400

    小雪

    Light Snow

    401

    中雪

    Moderate Snow

    402

    大雪

    Heavy Snow

    403

    暴雪

    Snowstorm

    404

    雨夹雪

    Sleet

    405

    雨雪天气

    Rain And Snow

    406

    阵雨夹雪

    Shower Snow

    407

    阵雪

    Snow Flurry

    408

    小到中雪

    Light to moderate snow

    409

    中到大雪

    Moderate to heavy snow

    410

    大到暴雪

    Heavy snow to snowstorm

    499

    Snow

    456

    阵雨夹雪

    Shower Snow

    457

    阵雪

    Snow Flurry

    500

    薄雾

    Mist

    501

    Foggy

    502

    Haze

    503

    扬沙

    Sand

    504

    浮尘

    Dust

    507

    沙尘暴

    Duststorm

    508

    强沙尘暴

    Sandstorm

    509

    浓雾

    Dense fog

    510

    强浓雾

    Strong fog

    511

    中度霾

    Moderate haze

    512

    重度霾

    Heavy haze

    513

    严重霾

    Severe haze

    514

    大雾

    Heavy fog

    515

    特强浓雾

    Extra heavy fog

    900

    Hot

    901

    Cold

    999

    未知

    Unknown

分享:

    相关文档

    相关产品

close