1. 概述
適用場景:安裝了「FVS大屏編輯模式」插件的使用者,可參考本文了解 FVS 範本的相關功能。
注:不支援行動端。
1.1 版本
報表伺服器版本 | JAR包 | 插件版本 | 功能變更 |
---|---|---|---|
11.0 | 2021-11-15 | V1.0.0 | - |
11.0 | 2021-11-15 | V1.1.0 | 1)新增「點選事件-彈出框」,僅支援三維城市組件 2)優化「點選事件」設定方式,新增「事件物件」選擇項 |
11.0.2 | - | V1.2.0 | 「點選事件-彈出框」適配所有支援點選事件的組件 |
11.0.6 | - | V1.5.0 |
|
11.0.16 | - | V1.16.0 | 交互事件觸發邏輯優化,詳情參見第 2 章第 3)點 |
1.2 功能簡介
本章將簡單介紹 FVS 大屏範本中組件交互的相關知識。
2. 功能介紹
1)選中頁面上的組件,點選配置欄的「交互」按鈕,可設定組件的相關交互屬性:點選事件、輪播設定、監視重新整理。組件型別不同支援的事件也有所不同。
2)V1.1.0 版本的插件,優化了點選事件的操作方式。
若組件型別為「場景地圖、三維城市、組合圖、鑽取區域地圖、鑽取點地圖、自訂鑽取地圖」等存在多層資料的組件。使用者需要先選擇事件物件,再選擇事件型別。
比如使用者只給場景地圖的「點」設定了點選事件,沒有給「柱子」設定點選事件,那麼只有點選地圖「點」的時候才會觸發事件。
3)交互點選事件邏輯說明:
交互事件名稱不能為空;且當前組件的交互事件列表新增同名校驗,若重名則提示「事件名稱已存在,不可重名」且無法儲存。
V1.16.0 及之後版本,所有事件均支援新增多個同型別事件;V1.16.0 版本之前,僅「組件聯動、JavaScript 、三維組件動畫」三種事件支援新增多個同型別事件。
若新增有多個事件時,支援同時觸發不同型別的事件,但「網頁連結、彈出框、分頁跳轉」三種事件型別需選擇觸發,其餘事件無需選擇直接觸發。如下圖所示:
4)元件組件根據元件型別,可在「互動」面板中新增「初始化後事件、載入結束事件或點選事件」,事件設定方式均為 JavaScript 代碼設定。
3. 支援範圍
不同型別的組件,支援配置的交互屬性不完全相同。
3.1 表格組件和元件組件
點選事件 | 初始化後事件 | 編輯結束事件 | 組件 |
---|---|---|---|
支援 | 支援 | 不支援 | 無線電鈕組元件、複選按鈕組元件 |
不支援 | 支援 | 支援 | 正文框元件、日期時間元件、下拉框元件、下拉複選框元件 |
不支援 | 支援 | 不支援 | 表格組件 |
3.2 其他組件
點選事件 | 輪播設定 | 監視重新整理 | 組件 |
---|---|---|---|
支援 | 支援 | 支援 | 場景地圖 |
支援 | 支援 但輪播無法關閉 | 支援 | 電子智慧樹圖、模型智慧樹圖 |
支援 | 不支援 | 支援 | 三維城市、標題組件 柱形圖、堆積柱形圖組件、百分比堆積柱形圖、自訂柱形圖、特殊圖形柱形圖 條形圖、堆積條形圖、百分比堆積條形圖、自訂條形圖 餅圖、等弧度玫瑰圖、不等弧度玫瑰圖、多層餅圖 折線圖、堆積折線圖、自訂折線圖 面積圖、堆積面積圖、百分比堆積面積圖、自訂面積圖 雷達圖、堆積雷達圖 360度多指標儀表盤、180度多指標儀表盤 百分比圓環儀表盤、百分比刻度槽型儀表盤、試管型儀表盤 區域地圖、點地圖、流向地圖、組合地圖、熱力地圖 鑽取區域地圖、鑽取點地圖、自訂鑽取地圖 三維柱形地球、三維點地球 散點圖、氣泡圖 矩形樹圖、詞雲圖、力學氣泡圖、漏斗圖 柱形圖-折線圖、柱形圖-面積圖、堆積柱形圖-折線圖、自訂組合圖 甘特圖、縱向框架圖、橫向框架圖、發散框架圖、箱形圖 |
支援 | 不支援 | 不支援 | 圖片組件 |
不支援 | 支援 輪播無法關閉 | 支援 | 輪播餅圖、輪播夜光儀表盤、水球圖、像素點圖 輪播閃爍指標卡、輪播電子指標卡、輪播目錄齒輪圖 輪播三維組合地圖、輪播GIS點地圖 |
不支援 | 部分支援 僅支援輪播 不支援輪播事件 | 支援 | 輪播條形圖 |
不支援 | 支援 | 不支援 | 輪播器組件 |
不支援 | 不支援 | 支援 | 弧形柱形圖、粒子計數器、三維流向地球 富正文組件、網頁框組件 |
不支援 | 不支援 | 不支援 | 時間齒輪、本地視頻組件、本地監視組件 |
4. 交互範例
FVS大屏範本支援的所有交互屬性如下表所示:
互動屬性 | 簡介 | 範例 | |
---|---|---|---|
點選事件 | 組件聯動 | 新增組件聯動後,可將參數傳遞給範本組件,實現更多資料展示效果。 | |
彈出框 | 新增彈出框後,可觸發對應元素的彈出框內容,實現豐富的個性化內容。 | ||
網頁連結 | 新增網頁連結後,可將參數傳遞給網頁連結,顯示不同的網頁內容。 | FVS點選跳轉網頁連結 | |
JavaScript | 實驗室功能 新增JavaScript腳本後可執行所設定的JavaScript腳本,實現豐富的個性化效果。 | FVS大屏支援的JS API場景 | |
三維模型動畫 | 新增三維城市動畫後可觸發對應三維城市組件的動畫效果。 | ||
分頁跳轉 | 新增分頁跳轉後可跳轉到目標頁面。 | ||
輪播設定 | 組件聯動 | 開啟自動輪播後,可新增組件聯動,按照輪播效果將參數傳遞給範本組件,實現更多資料展示效果。 | - |
三維模型動畫 | 開啟自動輪播後,可新增三維城市動畫,觸發對應三維城市組件的動畫效果。 | - | |
JavaScript | 實驗室功能 開啟自動輪播後,可新增JavaScript腳本,執行所設定的JavaScript腳本,實現豐富的個性化效果。 | FVS大屏支援的JS API場景 | |
監視重新整理 | - | 可根據設定的時間定期重新整理。 | - |
初始化後事件(V1.5.0 新增) | 可設定表格/元件初始化後 JavaScript 事件 | FVS大屏支援的JS API場景 | |
加載結束事件(V1.5.0 新增) | 可設定元件載入結束時的 JavaScript 事件 | FVS大屏支援的JS API場景 |