行動端佈局

1.1 版本

1.2 應用場景

行動辦公時，使用者往往透過行動裝置訪問 FineBI 儀表板，實時快速查看工程進度等。

設計人員往往對 PC 端與行動端共用一張 FineBI 儀表板，僅改變儀表板佈局樣式，以節約設計成本和維護時間。

1.3 功能簡介

FineBI 支援 iOS 或 Android 系統的手機、Pad 端查看儀表板，讓使用者可以方便地用手指觸摸瀏覽系統中的儀表板。

FineBI 在儀表板介面提供了行動端佈局功能，方便使用者設計行動端儀表板展示的組件及展示順序。

在儀表板編輯介面點選「行動端佈局」進入介面。如下圖所示：

1.4 環境準備

需要存在「BI6.0行動端佈局編輯介面H5」插件。BI 自帶該插件，一般情況無需安裝。

1.5 行動端佈局效果查看

• APP 查看參考：App端訪問FineBI，下載 APP 並連結到 BI 後，在「目錄」中即可查看範本。

• H5 查看參考：HTML5端訪問FineBI。

PC 端建立好儀表板後，不調整行動端佈局，掛載到目錄中。預設行動端預覽效果如下圖所示：

預設規則：

1）預設一行一個組件；

2）組件順序按照 PC 端的物理位置展示，從左到右，從上到下；

3）組件高度根據內容自適應調整；

4）過濾組件預設不顯示在儀表板內部，而是在下方過濾組件按鈕中展示。

3.1 進入行動端佈局

為了讓範本在行動端展示時更加美觀且合理，在儀表板編輯介面點選「行動端佈局」進入介面。詳情見本文 1.3 節。

注：「行動端佈局」按鈕僅在儀表板編輯介面存在，儀表板預覽介面沒有該按鈕。

進入行動端佈局設定介面，如下圖所示：

注1：經過行動端佈局調整後，若為儀表板新增組件，則新增的組件自動在行動端佈局中最後一個；新增的過濾組件則會出現在最上方。

注2：在儀表板刪除組件，則刪除的組件在行動端佈局中同步刪除，該組件後面的組件向上行動。

歷史畫布大小（377 *670）

3.2 隱藏組件

儀表板中一些用於優化圖表效果的組件，無需在行動端展示。此時可以在行動端佈局中隱藏這些組件。

在行動端佈局介面，點選組件左上角「隱藏」按鈕，組件行動到「隱藏的組件」中。

隱藏的組件將不在行動端顯示。隱藏該組件後，之後的組件依次向上行動。如下圖所示：

已隱藏的組件，點選組件右上角的「展示」按鈕，組件自動行動到左邊行動端佈局面板中，恢復顯示的組件將自動排在最後一位顯示。

注：恢復顯示的過濾組件在最上方顯示，Tab 組件內的過濾組件顯示在 tab 頁最上方，過濾組件顯示設定參考文檔 3.4.3 節。

3.3 調整組件

3.3.1  調整組件大小

FineBI 工程在儀表板「行動端佈局」內，支援在行動端預覽區域調整組件的大小，如下圖所示：

注：過濾組件僅支援調整組件寬度，但不支援調整高度。如何在儀表板直接顯示過濾組件參見，文檔 3.4.3 節。

3.3.2  調整組件位置

行動端佈局支援調整組件位置，並支援一行多個組件，如下圖所示：

3.3.3 調整表格列寬

當表格在行動端預覽中，資料列展示不全，可手動調整列寬。如下圖所示：

注：也可在「樣式設定>組件設定」中，設定表格自適應效果。見本文 3.5 節。

3.3.4 調整組件

FineBI6.0.11 版本之後如果使用者希望自訂某個組件。

1）在儀表板「行動端佈局」點選組件的設定按鈕，進入該組件編輯介面；

2）修改組件樣式等，滿足其行動端佈局效果。

3.3.5 組件組合

點選組件即可設定組合，詳情參見文檔：組件組合

使用者可根據儀表板內容自由組合，實現區塊化樣式佈局。

3.3.6 自訂富正文

行動端組件標題/正文組件支援單獨配置行動端樣式。

注：不會影響PC效果。

• 文字組件

• 組件標題

3.4 頁面樣式設定

在「樣式設定」tab 下，可以對儀表板「頁面設定」樣式、對「組件設定」樣式進行設定。

3.4.1 設定組件間隙

點選「樣式設定」，組件間隙設定「10」，在左側可以看見實現效果。如下圖所示：

注：Tab 組件內組件也支援調整組件間隙。

3.4.2 設定儀表板背景

背景可設定「顏色」、「圖片」兩種形式。範例在「樣式設定>頁面設定」下選擇背景，點選「顏色」，設定藍色背景。效果如下圖所示：

3.4.3 顯示過濾組件

預設過濾組件顯示在參數板中，效果如第 2 節所示。關閉「顯示全部過濾組件在參數板中」即在儀表板中展示過濾組件。過濾組件位於最上方。如下圖所示：

注：Tab 組件內過濾組件顯示在對應 tab 頁內。

3.4.4 圖表字體自適應

行動端支援自適應圖表字體，點選「樣式設定>圖表字體>自適應」。開啟後，調整圖表組件大小時，會自動調整圖表組件內字體大小。如下圖所示：

3.5 組件樣式設定

3.5.1 隱藏全螢幕按鈕

使用者有時候不想要所有組件都有能點選後全螢幕展示。可以選擇該組件，關閉「顯示全螢幕按鈕」。如下圖所示：

詳情參見文檔：全螢幕按鈕設定 。

3.5.2 組件自適應

對於一些組件，例如正文組件、KPI指標卡組件、表格組件，都可以透過設定自適應來調整行動端顯示樣式，保證內容顯示完整。

1）KPI 指標卡自適應

在行動端佈局中選擇組件「樣式設定」選擇「自適應顯示」，如下圖所示：

有四種自適應方式：標準適應、整體適應、寬度適應和高度適應，預設為整體適應。

注：自訂圖表的正文型別組件自適應設定同指標卡相同。

2）文字組件自適應

在行動端佈局中選擇組件「樣式設定」選擇「自適應顯示」，如下圖所示：

文字組件寬度適應：當正文內容在行動端不發生自動換行時，保留字號大小設定；當正文內容在行動端自動換行（並非手動按回車鍵換行）時，正文內容在行動端寬度適應。

3）表格自適應

在行動端佈局中選擇組件「樣式設定」選擇「自適應顯示」，預設為「標準自適應」。

• 標準適應：行動端表格預設顯示規則，列寬最大為組件可視寬度的 1/2，最小為組件可視寬度的 1/6 。

• 寬度適應：列寬繼承 PC 端等比自適應效果，表格寬度撐滿組件寬度（不會出現橫向捲軸），行動端一屏內可顯示所有列。

若自適應不滿足需求，可直接拖動列寬調整，詳情見本文第3.3.3節。

3.5.3 自訂組件樣式

FineBI6.0.11 版本之後如果使用者希望自訂某個組件樣式。

1）在儀表板「行動端佈局」點選組件的設定按鈕，進入該組件編輯介面；

2）修改組件樣式等，滿足其行動端佈局效果。

3）切換到「儀表板」內，查看到組件的預覽效果已經自動更新。如下圖所示：

3.6 行動端預覽

使用者可以直接在 PC 端上預覽到行動端儀表板展示效果 。

在行動端佈局介面，點選右上角「預覽」，即可預覽行動端展示效果 。如下圖所示：

3.7 BI佈局設定

BI 行動端支援「網格佈局」和「自我調整佈局」，兩者的差別在於組件內容小於組件高度時，組件是否能自適應調整高度。

詳情請參見：模板設定 。

如果需要恢復預設行動端原始佈局，則點選右上角的「重置」按鈕，行動端佈局即可恢復。如下圖所示：