Web可视化开发过程中,可使用的基础组件包括文字、图片、卡片、表格、时钟、iframe、地图、和几种图形组件。

下表介绍基础组件列表、各基础组件的使用场景和特有配置说明。组件的通用样式配置、数据源配置和交互配置,请参见组件配置相关文档。

组件 说明
文字 用于展示文字内容。

文字组件支持配置样式、数据源和交互动作。

文字内容可通过静态输入,或单击配置数据,配置为动态获取的文字内容。

说明
  • 如果既输入了静态内容,又配置了动态数据,取动态数据。
  • 文字字体说明:组件会调用本地电脑系统中已安装的字体进行展示。如果电脑中没有安装配置的字体。比如苹方,但是打开页面的Windows电脑上没有安装苹方字体,则会展示为其它已安装的字体。
图片 主要用于在页面中展示图片资源,比如某些元素的背景、一些代表性的标志等。

图片组件支持配置样式和交互动作。

说明
  • 支持上传本地图片,或者从您已有的图片库中选择图片。
  • 图片会被拉伸展示。请通过配置W值(宽度)和H值(高度),设置图片大小。
矩形 基本形状可以用于各种图形拼装,如拼装出展示图案,或作为数字或文字的背景等。

图形组件支持配置展示样式和交互动作。

椭圆形
三角形
星形
多边形(边数为3~10)
箭形
指示灯 可以用于显示设备状态、告警等。需配置指示灯数据来源,然后根据不同的数值,配置不同的显示颜色或图片。
说明 支持数据源设置为布尔型或枚举型的设备属性。

指示灯组件支持配置样式、数据源和交互动作。

卡片 可以用于展示设备属性数据。

卡片组件支持配置样式、数据源和交互动作。

数据源只能配置为设备的某个属性。

表格 用于以表格形式展示数据。数据源可以设置为静态数据或调用接口获取动态数据。

表格组件支持配置样式、数据源和交互动作。

说明
  • 配置样式时,如果勾选是否显示分页,需设置每页行数,取值范围:1~50。设置分页显示后,可切换页面查看表格中的数据。

    如果没有开启分页显示,但表格中数据过多,超出了表格的高度,可以通过鼠标滚动查看所有数据。表格滚动时,表头将固定在表格顶部。

  • 需先配置数据源后,才能在样式配置下,配置系列名称。组件会解析数据的列数,展示对应的配置面板。
  • 数据源选择为静态数据时,输入数据需遵循以下格式:
    [
      ["a", "b", "c"],
      ["d", "e", "f"]
    ]

    要求:

    • 输入的静态数据中,每一行对应表格中的一行;每一列对应表格中的一列。
    • 每行的数据个数必须相同。如果某个单元格没有数据,也需保留引号,否则表格将无法正确显示。
时钟 在应用页面显示当前时间。

时钟组件支持配置样式和交互动作。

特有配置:

  • 展示格式:选择时钟组件展示的时间格式。可选:
    • 日期时间:显示为日期和具体时间,精确到秒。格式为:yyyy-mm-dd hh:mm:ss
    • 时间:仅显示时间,格式为:hh:mm:ss
    • 日期:仅显示日期,格式为:yyyy-mm-dd
  • 背景颜色:时钟组件默认带背景。如果想要去掉背景,可将背景颜色不透明度滑块滑至最左侧,即不透明度为0。
  • 边框:时钟组件默认带边框。如果想要去掉边框,将边框粗细设置为0。
iframe iframe组件是网页设计中的一个常见元素,主要用于将站点外的内容纳入到页面中。

iframe组件支持配置样式和交互动作。

单击样式配置中,关联链接对应的配置按钮,配置要关联的URL地址。URL地址可配置为静态值或变量。

说明 由于安全限制原因,编辑器和预览页面均为HTTPS协议访问页面,无法展示HTTP链接的iframe。如果需要展示HTTP链接的iframe,请在应用发布后,绑定您自己的域名,方能显示。
地图 地图组件是物联网领域常见的组件,用于在地图上标示设备。

地图组件支持配置样式和交互动作。

地图组件需使用物联网平台数据分析模块的空间数据可视化服务,因此配置该组件时,需进入空间数据可视化控制台中,创建场景。创建场景具体操作说明,请参见场景创建

地图组件的交互事件有两种:

  • 点击设备属性URL:点击地图上的设备属性URL触发交互动作。如果要使用该事件功能,需在该地图场景对应的目标产品的产品详情页,进行如下配置:
    • 添加一个产品标签studioType:url
    • 在产品的功能定义中,增加一个属性,标识符为WEB_URL,用于填写设备外联页面(如设备详情页、视频设备播放页等)的URL。设备上线后,上报WEB_URL字段内容,如https://www.taobao.com。
  • 点击设备气泡:点击地图上表示设备的气泡触发交互动作。

地图组件配置完后,画布上仅展示地图,若需要体验交互动作,请单击页面上方预览,在预览页面测试交互动作。

组件配置文档

样式配置说明文档:样式配置

数据源配置说明文档:

交互动作配置说明文档:交互配置