該組件可用作其他組件展示內容的背景,或各種場景的拼裝圖案。本文介紹組件的詳細配置方法。

應用示例

  • 拼裝出純展示圖案。圖案
  • 作為數字或文字的背景。背景

步驟一:添加組件

  1. 創建Web應用。具體操作,請參見創建Web應用
  2. 在Web應用編輯器中,單擊最左側的組件圖標組件
  3. 在畫布左側組件列表上方,輸入橢圓形,找到該組件,然后將組件拖拽到中間畫布。

    有關組件添加的更多信息,請參見添加組件

    橢圓組件

步驟二:配置樣式

  1. 在Web可視化編輯頁面右側樣式中,設置填充顏色和邊框樣式。
    樣式中有多個配置項支持配置數據源,可選設備接口應用推送。其中,填充顏色和邊框顏色僅支持配置接口和應用推送數據源。

    不同配置項支持的數據格式不同,數據源返回數據需與要求的數據格式保持一致。

    配置項數據格式
    填充顏色、邊框顏色RGB顏色的JSON格式。
    {
      "r": 255,
      "g": 255,
      "b": 255
    }

    或者

    {
      "r": 255,
      "g": 255,
      "b": 255,
      "a":0
    }
    說明 其中a表示顏色透明度,取值范圍為0~100。
    邊框粗細整數,取值范圍為0~1000。
    邊框樣式 整數,取值范圍為0~2。

    對應線樣式的映射關系為(同下拉列表順序):

    • 實線:0
    • 虛線:1
    • 點線:2
  2. 調整組件在頁面中的最終位置。有關組件通用樣式配置的更多信息,請參見樣式配置

步驟三:配置交互動作

  1. 選中組件的交互頁簽,配置事件和交互動作。具體操作請參見交互配置
    例如,點擊組件,執行動作打開鏈接,即配置鏈接打開方式,展示鏈接的內容。
  2. 單擊頁面右上方的預覽,預覽和調試組件展示的數據和效果。