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

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

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

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

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

说明
  • 如果既输入了静态内容，又配置了动态数据，取动态数据。
  • 文字字体说明：组件会调用本地电脑系统中已安装的字体进行展示。如果电脑中没有安装配置的字体。例如苹方，但是打开页面的Windows电脑上没有安装苹方字体，则会展示为其它已安装的字体。
直线 直线组件是基本线条的一种，支持拖拽端点调整直线长度及角度，可以满足各种连接场景。

直线组件多个属性可绑定数据源使用，不同属性支持的数据格式也有所不同。​

  • 颜色可以绑定接口数据源进行使用，支持的数据格式为rgb颜色的json。格式如下： 
    {
  "r": 255,
  "g": 255,
  "b": 255
}
  • 宽度可以绑定设备和接口数据源进行使用，支持的数据格式为整形（1～100）。
  • 线样式可以绑定设备和接口数据源进行使用，支持的数据格式为整形（0～2），其中映射关系为（同下拉列表顺序）：
    • 实线：0
    • 虚线：1
    • 点线：2
  • 端点可以绑定设备和接口数据源进行使用，支持的数据格式为整形（0～1），其中映射关系为（同下拉列表顺序）：
    • 方形端点：0
    • 圆形端点：1
  • 起点/终点样式可以绑定设备和接口数据源进行使用，支持的数据格式为整形（0～6），其中映射关系为（同下拉列表顺序）：
  • 无样式：0
  • 空心圆形：1
  • 实心圆形：2
  • 空心方形：3
  • 实心方形：4
  • 空心箭头：5
  • 实心箭头：6
图片 主要用于在页面中展示图片资源，例如某些元素的背景、一些代表性的标志等。

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

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

图形组件支持配置展示样式和交互动作。
椭圆形
三角形
星形
多边形（边数为3~10）
箭形
指示灯 可以用于显示设备状态、告警等。需配置指示灯数据来源，然后根据不同的数值，配置不同的显示颜色或图片。
说明 支持数据源设置为布尔型（bool）、枚举型（enum）和整数型（int）的设备属性。

指示灯组件支持配置样式、数据源和交互动作。
卡片 可以用于展示设备属性数据。

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

数据源只能配置为设备的某个属性。
表格 用于以表格形式展示数据。数据源可以设置为静态数据或调用接口获取动态数据。

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

说明
  • 配置样式时，如果勾选是否显示分页，需设置每页行数，取值范围：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地址可配置为静态值或变量。URL地址支持URL参数及动态参数配置。

参数值来源可选：

  • 变量：选择在当前应用中，已创建的变量作为参数值来源。创建变量，请参见变量管理。
  • 组件值：选择当前应用中，已配置的表单组件作为参数值来源。
  • URL参数：以最终发布页面上的某个参数作为该接口的请求参数值。常用于嵌入页面时，由宿主页提供动态参数，如将传入的产品型号作为当前接口的请求参数。
  • 登录账号：在开启应用账号鉴权的情况下。配置自定义接口和服务开发工作台接口时，可以选择登录的账号信息做为请求参数，以完成一些界面或功能的定制需求。
说明 由于安全限制原因，编辑器和预览页面均为HTTPS协议访问页面，无法展示HTTP链接的iframe。如果需要展示HTTP链接的iframe，请在应用发布后，绑定您自己的域名，方能显示。
地图 地图组件是物联网领域常见的组件，用于在地图上标示设备。

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

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

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

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

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

组件配置文档

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

数据源配置说明文档：

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