步驟一：添加組件

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

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

   

步驟二：配置數據源

1. Web可視化編輯頁面右側樣式中配置圖片數據源。
   • 單擊選擇SVG，上傳本地SVG矢量圖，或從已有的圖片庫中選擇矢量圖。
   • 單擊選擇SVG右側的配置數據源按鈕，選擇數據源類型進行配置，將返回的數據作為圖片URL。

     可選數據類型為設備、接口、應用推送、頁面變量，返回數據的格式必須為字符串。

2. 單擊確定。

組件將基于關聯的數據源實時更新展示圖片。

步驟三：配置樣式

1. 在右側樣式中，選中填充色復選框，修改圖片填充顏色。
   填充顏色支持配置接口數據源，要求返回的數據格式為RGB顏色的JSON格式。

   說明 其中a表示顏色透明度，取值范圍為0~1。

   {
     "r": 255,
     "g": 255,
     "b": 255
   }

   或者

   {
     "r": 255,
     "g": 255,
     "b": 255,
     "a":0
   }

   重要

   • 目前僅支持對矢量圖中的Path填充顏色。如果有其他元素的填充需求，您可自行填充。
   • 如果需支持矢量圖的縮放，請在矢量圖文件中添加ViewBox屬性，并指定原始縮放區域。
2. 可選：如果圖片被拉伸展示，可通過配置W值（寬度）和H值（高度），設置圖片大小。
   有關組件通用樣式配置，請參見樣式配置。

步驟四：配置交互動作

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