移動端布">
3.1 進入移動端布局
為了讓模板在移動端展示時更加美觀且合理,在儀表板編輯頁面上方點擊「更多>移動端布局」按鈕,即可進入移動端布局設置。詳情見本文 1.3 節。
注:移動端布局按鈕僅在儀表板編輯界面存在,儀表板預覽界面沒有該按鈕。
進入移動端布局設置界面,如下圖所示:
序號
功能
說明
1
重置
點擊重置回默認的移動端儀表板效果
2
比例縮放
點擊縮放移動端效果預覽界面;
默認為 100%,可選擇 75%,100%,125%,150%;
每次進入移動端布局都是 100% ,縮放不影響移動端實際展現效果
3
返回儀表板
點擊返回儀表板編輯界面
4
保存
點擊保存移動端布局的效果
5
移動端效果預覽
預覽移動端的展示效果;
支持在界面直接調整組件位置、大小(過濾組件不支持調整大小)、調整表格列寬
注:移動端預覽界面手機屏幕高度為670px。手機和預覽界面屏幕高度一致時,一屏顯示組件數量相同;若高度大于670px時,一屏顯示組件更多;反之移動端web頁面橫向看,一屏顯示組件更少。
6
隱藏的組件
隱藏的組件會顯示在該區域內
7
樣式設置
樣式設置支持「頁面設置」、「組件設置」。
注1:經過移動端布局調整后,若為儀表板新增組件,則新增的組件自動在移動端布局中最后一個;新增的過濾組件則會出現在最上方。
注2:在儀表板刪除組件,則刪除的組件在移動端布局中同步刪除,該組件后面的組件向上移動。
3.2 隱藏組件
儀表板中一些用于優化圖表效果的組件,無需在移動端展示。此時可以在移動端布局中隱藏這些組件。
在移動端布局界面,點擊組件左上角「隱藏」按鈕,組件移動到「隱藏的組件」中。
隱藏的組件將不在移動端顯示。隱藏該組件后,之后的組件依次向上移動。如下圖所示:
已隱藏的組件,點擊組件右上角的「展示」按鈕,組件自動移動到左邊移動端布局面板中,恢復顯示的組件將自動排在最后一位顯示。
注:恢復顯示的過濾組件在最上方顯示,Tab 組件內的過濾組件顯示在 tab 頁最上方,過濾組件顯示設置參考文檔 3.4.3 節。
3.3 調整組件3.3.1 調整組件大小
工程,支持調整組件的大小,如下圖所示:
注:過濾組件僅支持調整組件寬度,但不支持調整高度。如何在儀表板直接顯示過濾組件參見,文檔 3.4.3 節。
3.3.2 調整組件位置
移動端布局支持調整組件位置移動端web頁面橫向看,并支持一行多個組件,如下圖所示:
3.3.3 調整表格列寬
當表格在移動端預覽中,數據列展示不全,可手動調整列寬。如下圖所示:
注:也可在「樣式設置>組件設置」中,設置表格自適應效果。見本文 3.5 節。
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)表格自適應
在移動端布局中選擇組件「樣式設置」選擇「自適應模式」,默認為「標準自適應」。
若自適應不滿足需求,可直接拖動列寬調整,詳情見本文第3.3.3節。
3.6 BI布局設置
BI 移動端支持「網格布局」和「自適應布局」,兩者的區別在于組件內容小于組件高度時,組件是否能自適應調整高度。
詳情請參見:。