1. 概述
1.1 版本
FineBI 版本 | HTML5行動端展現插件/App 版本 | BI6.0行動端佈局編輯介面H5插件 | 功能變動 |
---|---|---|---|
6.0 | V11.0.68 | V6.0.01.20220701 | - |
6.0.11 | V11.0.82 | V6.0.18 | 1)行動端佈局入口優化; 2)行動端佈局內,組件新增「組件設定」入口,可點選進入組件編輯介面修改組件樣式; 3)行動端佈局實時儲存、實時同步主題變更
|
6.0.16 | V11.0.88 | V6.0.24.20231215 | 1)新增行動端佈局支援調整畫布大小,詳情見 3.1 節 2)支援組件標題、正文組件富正文設定,詳情見3.3.6節 3)行動端正文組件支援上下置中 4)優化預設配置: 圖例位置優化:pc上左、上中,行動端繼承為上;pc下左、下中,行動端繼承為下; 圖表字體預設設定為自適應; 正文組件及指標卡預設不顯示全螢幕按鈕 5)過濾組件樣式優化: 高度預設一個網格,支援手動調節成兩個網格 過濾組件彈出方式優化 |
6.1.2 | V11.0.940 | V6.0.30.20240603 | 行動端佈局增加線上預覽 |
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。
2. 預設行動端佈局
PC 端建立好儀表板後,不調整行動端佈局,掛載到目錄中。預設行動端預覽效果如下圖所示:
預設規則:
1)預設一行一個組件;
2)組件順序按照 PC 端的物理位置展示,從左到右,從上到下;
3)組件高度根據內容自適應調整;
4)過濾組件預設不顯示在儀表板內部,而是在下方過濾組件按鈕中展示。
3. 調整行動端佈局
3.1 進入行動端佈局
為了讓範本在行動端展示時更加美觀且合理,在儀表板編輯介面點選「行動端佈局」進入介面。詳情見本文 1.3 節。
注:「行動端佈局」按鈕僅在儀表板編輯介面存在,儀表板預覽介面沒有該按鈕。
進入行動端佈局設定介面,如下圖所示:
序號 | 功能 | 説明 |
---|---|---|
1 | 重置 | 點選重置回預設行動端儀表板效果 |
2 | 比例縮放 | 點選縮放行動端效果預覽介面; 預設為 100%,可選擇 75%,100%,125%,150%; 每次進入行動端佈局都是 100% ,縮放不影響行動端實際展現效果 |
3 | 行動端畫布 | 為了在 PC 模擬最接近行動端的效果,提供不同手機型號的畫布大小配置,不同畫布名稱對應大小參考下文表格 |
4 | 儀表板/行動端佈局 | 點選切換儀表板PC端/行動端佈局 |
5 | 儀表板預覽 | 預覽行動端的展示效果 |
6 | 行動端佈局設定 | 支援在介面直接調整組件位置、大小(過濾組件不支援調整大小)、調整表格列寬、轉到組件設定樣式 若組件變化,儀表板行動端佈局會自動更新。 注:行動端預覽介面手機螢幕高度為670px。手機和預覽介面螢幕高度一致時,一屏顯示組件數量相同;若高度大於670px時,一屏顯示組件更多;反之,一屏顯示組件更少。 |
7 | 隱藏的組件 | 隱藏的組件會顯示在該區域內 |
8 | 樣式設定 | 樣式設定支援「頁面設定」、「組件設定」。
|
注1:經過行動端佈局調整後,若為儀表板新增組件,則新增的組件自動在行動端佈局中最後一個;新增的過濾組件則會出現在最上方。
注2:在儀表板刪除組件,則刪除的組件在行動端佈局中同步刪除,該組件後面的組件向上行動。
歷史畫布大小(377 *670)
配置名稱 | 畫布大小 |
---|---|
預設 iPhone13/14 (390*844) | 390*753 |
iPhone13/14 Pro Max (430*932) | 430*841 |
HUAWEI Mate 60 (405*896) | 405*805 |
HUAWEI Mate 60 Pro+/Pro (420*907) | 420*816 |
HUAWEI P50/P60 (407*900) | 407*809 |
Xiaomi 13/14 Pro (480*1067) | 480*976 |
OPPO Find X6 Pro/X6(480*1056) | 480*965 |
VIVO X100 Pro /X100 (420*933) | 480*842 |
Samsung Galaxy S23+/S23 (360*780) | 360*689 |
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 行動端支援「網格佈局」和「自我調整佈局」,兩者的差別在於組件內容小於組件高度時,組件是否能自適應調整高度。
詳情請參見:模板設定 。
4. 恢復預設行動端佈局
如果需要恢復預設行動端原始佈局,則點選右上角的「重置」按鈕,行動端佈局即可恢復。如下圖所示: