1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0 | V1.0.0 | V1.x 版本文檔請參考：FVS圖片組件歷史版本 |
| 11.0.22 | V2.7.1 | 圖片支援設定飽和度、亮度、對比度。詳情參見 4.2 節 |
1.2 功能簡介
圖片組件，顧名思義，可展示各類內建圖片素材、自訂圖片或線上圖片。
圖片類型支援三種：我的資源、自訂上傳、線上圖片。
圖片支援的格式包括六種：jpg、jpeg、png、apng、gif 和 webp 格式。
注：本文僅為大家介紹圖片組件特有功能，其他屬性不贅述。
組件交互請參見：FVS組件交互屬性 。圖片組件僅支援點選事件。
組件動畫請參見：FVS組件動畫 。
組件屬性請參見：FVS組件樣式屬性 。
2. 新增組件
建立一張「視覺化看板」：
在頁面中新增一個「圖片組件」，預設顯示「請在右側配置欄新增圖片」。如下圖所示：
3. 圖片類型
3.1 我的資源
FVS 內建了一系列靜態和動態素材圖片，包括圖示、背景、裝飾線條、裝飾圖形、邊框等。
選中圖片組件，點選「內容」，圖片類型選擇「我的資源」，點選「選擇」。選擇需要的圖片後點選「完成」即可。如下圖所示：
3.2 自訂上傳
使用者可將自己本地準備好的素材圖片上傳至範本中，並使用它。
3.2.1 上傳圖片
選擇「自訂上傳」方式後，點選「選擇」，點選「+上傳圖片」，即可選擇本地圖片檔案聯集傳，支援多選圖片批量上傳。
支援上傳的圖片檔案包括 jpg、jpeg、png、apng、gif 和 webp 格式。
注：請勿手動修改圖片檔案的後綴名來滿足格式要求，這可能會導致資源上傳失敗。
3.2.2 刪除圖片
在圖片列表中，滑鼠懸浮到對應圖片上，圖片右上角出現刪除按鈕。
點選「刪除」按鈕，跳出提示框「刪除素材會影響到所有使用該素材的組件，是否確認刪除？」，點選「確認刪除」，即可刪除該自訂素材。
若某個圖片組件使用了被刪除的圖片素材，那麼預覽時該組件內容為空。
3.3 線上圖片
FVS圖片組件支援呼叫線上圖片。請確定伺服器可存取填寫的圖片地址。
選中圖片組件，點選「內容」，圖片類型選擇「線上圖片」，填寫圖片地址，即可呼叫該圖片素材。如下圖所示：
圖片地址不支援相對地址，僅支援絕對地址，形如http://localhost:8075/webroot/help/picture/background/sale.gif。
4. 設定圖片屬性
選擇圖片後，支援設定圖片屬性「填充方式」和「色相」。
4.1 填充方式
圖片資源可選擇三種填充方式：
| 填充方式 | 說明 |
|---|---|
| 適應 | 圖片寬高比不變，等比拉大/縮減圖片，確定寬/高充滿組件即可 |
| 填充 | 圖片寬高比不變，圖片大小不變，從左上角開始依次用圖片填充組件，直到填滿 |
| 拉伸 | 圖片寬度拉伸至組件寬度，圖片高度拉伸至組件高度 |
4.2 色相及更多設定
在圖片原本效果的基礎上，可調整色相、飽和度、亮度及對比度。
| 設定項 | 說明 |
|---|---|
| 色相 | 指顏色的基本屬性，範圍為 0~360 在圖片原本顏色的基礎上，疊加色相值，以改變圖片顏色 |
| 飽和度 | 指顏色的純度或強度，範圍為 -100~100 |
| 亮度 | 指影像的明暗程度，範圍為 -100~100 |
| 對比度 | 指影像中最亮和最暗部分之間的差異，範圍為 -100~100 |
5. 範本下載
點選下載範本：FVS圖片組件範例.fvs
