FVS查詢面板

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 應用場景

FVS 範本中，使用參數元件查詢資料時，需將元件直接新增到畫布使用。

但有些情況下，使用者希望元件查詢面板可以收縮展開使用，而不是直接展示在範本中，尤其是行動端查看範本的場景。

V2.3.0 及之後版本，則可以透過「啟動查詢面板」實現這類場景。效果如下圖所示：

注：查詢面板內元件不受畫布中元件影響，即使元件綁定參數相同，查詢面板內元件也無聯動效果。

2.1 功能入口

查詢面板設定是所有分頁共用的，設定入口在畫佈下方分頁區。點選「查詢面板設定」按鈕，彈出設定框。

在設定框中勾選「啟動查詢面板」，即可新增元件，設定查詢面板樣式。如下圖所示：

啟動查詢面板並新增元件後，範本預覽時，頁面左下角顯示查詢按鈕。若範本有多個分頁時，顯示在分頁切換按鈕左側。

注：若啟動查詢面板，但未新增任何元件，預覽時查詢按鈕不顯示。

2.2 內容

點選「新增元件」，點選下拉選項中的元件類型，將其新增到列表中，新增後即可在右側設定元件內容。

注：查詢面板中的元件不支援設定字元樣式。

列表中支援拖曳調整元件順序，該列表中的順序，即範本預覽時元件的顯示順序。

V4.1.0 版本新增「顯示頁面」，支援配置元件在不同分頁下的顯隱。預設選擇所有分頁。如下圖所示：

注：「顯示頁面」僅控制元件在頁面的可見性，不影響參數作用域。

2.3 樣式

注：查詢面板及元件樣式會受  FVS範本樣式 影響。

2.3.1 啟動自動查詢

樣式設定中，支援設定是否「啟動自動查詢」。

該設定項為 PC端/行動端 共用，且效果一致。

• 勾選後，首次預覽範本或範本重新整理時，查詢面板預設不展開，自動觸發元件查詢並展示範本所有內容。

取消勾選，首次預覽範本或範本重新整理時，查詢面板預設展開，範本內容不展示，需點選查詢面板「查詢」按鈕後展示。

2.3.2 行動端樣式範本

範本切換到「行動端」模式時，查詢面板樣式還支援選擇「樣式範本」，包括預設樣式、頂部式。

詳細內容請參見文檔：[通用]參數面板行動端樣式 。

3.1 準備範本

1）點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板。

2）建立資料庫查詢 ds1 ，輸入 SQL 查詢語句 SELECT * FROM 銷量 where 地區='${area}' 。

給參數 area 設定預設值為「華東」，即預設獲取華東地區的銷量資料。

3.2 新增柱形圖

點選組件區「圖表>柱形圖」，將柱形圖組件新增到頁面，給柱形圖綁定含有 area 參數的資料集中資料。如下圖所示：

3.3 設定查詢面板

1）點選畫佈下方「查詢面板設定」，勾選「啟動查詢面板」。點選「新增元件」新增一個下拉框元件。

2）設定元件名稱為「地區」，綁定參數 area ；

3）設定選項值來源為「資料庫表」，選擇 FRDemo 中銷量表的「地區」欄位，點選「確定」；

4）預設值輸入「華東」，點選「確定」。

3.4 設定行動端查詢面板樣式

1）切換到「行動端」模式，點選「查詢面板設定>樣式」，選擇樣式範本為「頂部式」。

2）取消勾選「編輯元件值後自動查詢」，點選「確定」。

3.5 效果預覽

3.5.1 PC 端

點選右上角「儲存」，點選「預覽」，在範本左下角有一個篩選按鈕，點選展開查詢面板。如下圖所示：

3.5.2 行動端

預覽方式請參考 FVS範本預覽與掛載 ，效果如下圖所示：

點選下載範本：FVS查詢面板範例.fvs