支持移动端组件自定义位置和高度
支持一行并列展示多个组件
优化图表数据点提示较长时的显示效果
移动端布局新增:页面的移动端属性设置、组件的移动端属性设置功能
保存移动端布局结果后停留在当前页,手动点击返回桌面端布局
新的布局框形式、尺寸更接近真实手机
支持比例缩放移动端布局页面大小
优化隐藏的组件显示效果
支持在移动端布局中,手动调整表格列宽
支持 Tab 组件内的组件调整大小位置
移动办公时,用户往往通过移动设备访问 FineBI 仪表板,实时快速查看工程进度等。
设计人员往往对 PC 端与移动端共用一张 FineBI 仪表板,仅改变仪表板布局样式,以节约设计成本和维护时间。
FineBI 支持 iOS 或 Android 系统的手机、Pad 端查看仪表板,让用户可以方便地用手指触摸浏览系统中的仪表板。
FineBI 在仪表板界面提供了移动端布局功能,方便用户设计移动端仪表板展示的组件及展示顺序。在仪表板编辑界面点击「更多>移动端布局」进入界面。
需要存在「BI移动端布局H5」插件。BI 自带该插件,一般情况无需安装。
APP 查看参考:App 访问 BI工程 ,下载 APP 并链接到 BI 后,在「目录>仪表板」中即可查看模板。
H5 查看参考:HTML5 访问仪表板 / BI工程 。
PC 端创建好仪表板后,不调整移动端布局,挂载到目录中。默认的移动端预览效果如下图所示:
默认规则:
1)默认一行一个组件
2)组件顺序按照 PC 端的物理位置展示,从左到右,从上到下
3)组件高度根据内容自适应调整
4)过滤组件默认不显示在仪表板内部,而是在下方过滤组件按钮中展示
为了让模板在移动端展示时更加美观且合理,在仪表板编辑页面上方点击「更多>移动端布局」按钮,即可进入移动端布局设置,如下图所示:
注:移动端布局按钮仅在仪表板编辑界面存在,仪表板预览界面没有该按钮。
进入移动端布局设置界面,如下图所示:
点击缩放移动端效果预览界面;
默认为 100%,可选择 75%,100%,125%,150%;
每次进入移动端布局都是 100% ,缩放不影响移动端实际展现效果
预览移动端的展示效果;
支持在界面直接调整组件位置、大小(过滤组件不支持调整大小)、调整表格列宽
注:移动端预览界面手机屏幕高度为670px。手机和预览界面屏幕高度一致时,一屏显示组件数量相同;若高度大于670px时,一屏显示组件更多;反之,一屏显示组件更少。
样式设置支持「页面设置」、「组件设置」。
页面设置:对仪表板进行设置。可设置移动端组件间隙、仪表板背景、是否显示全部过滤组件在参数面板;
组件设置:对单个组件进行设置。可设置是否显示全屏按钮、组件自适应显示效果
注1:经过移动端布局调整后,若为仪表板新增组件,则新增的组件自动在移动端布局中最后一个;新增的过滤组件则会出现在最上方。
注2:在仪表板删除组件,则删除的组件在移动端布局中同步删除,该组件后面的组件向上移动。
仪表板中一些用于优化图表效果的组件,无需在移动端展示。此时可以在移动端布局中隐藏这些组件。
在移动端布局界面,点击组件左上角「隐藏」按钮,组件移动到「隐藏的组件」中。
隐藏的组件将不在移动端显示。隐藏该组件后,之后的组件依次向上移动。如下图所示:
已隐藏的组件,点击组件右上角的「展示」按钮,组件自动移动到左边移动端布局面板中,恢复显示的组件将自动排在最后一位显示。
注:恢复显示的过滤组件在最上方显示,Tab 组件内的过滤组件显示在 tab 页最上方,过滤组件显示设置参考文档 3.4.3 节。
JAR 包在 2020-08-03 及之后的 FineBI 工程,支持调整组件的大小,如下图所示:
移动端在 10.4.998 之后的版本,过滤组件仅支持调整组件宽度,但不支持调整高度。
注:如何在仪表板直接显示过滤组件参见,文档 3.4.3 节。
移动端布局支持调整组件位置,并支持一行多个组件,如下图所示:
当表格在移动端预览中,数据列展示不全,可手动调整列宽。
注:也可在「样式设置>组件设置」中,设置表格自适应效果。见本文 3.5 节。
用户还可以对 Tab 组件内,tab 页下组件进行位置和大小的调整。点击对应 tab 页,即可调整页面内组件。
注:过滤组件不可调整高度。
在「样式设置」tab 下,可以对仪表板「页面设置」样式、对「组件设置」样式。
点击「样式设置」,组件间隙设置「10」,在左侧可以看见实现效果。如下图所示:
背景可设置「颜色」、「图片」两种形式。示例在「组件设置>页面设置」下选择背景,点击「颜色」,设置蓝色背景。效果如下图所示:
默认过滤组件显示在参数板中,效果如第 2 节所示。关闭「显示全部过滤组件在参数板中」即在仪表板中展示过滤组件。过滤组件位于最上方。如下图所示:
注:Tab 组件内过滤组件显示在对应 tab 页内。
用户有时候不想要所有组件都有能点击后全屏展示。可以选择该组件,关闭「显示全屏按钮」。完成移动端布局点击「保存」。如下图所示:
详情参见文档:全屏按钮设置
对于一些组件,例如文本组件、KPI指标卡组件、表格组件,都可以通过设置自适应来调整移动端显示样式,保证内容显示完整。
1)KPI 指标卡自适应
在移动端布局中选择组件「样式设置」选择「自适应模式」,如下图所示:
有四种自适应方式:标准适应、整体适应、宽度适应和高度适应,默认为标准适应。
注:自定义图表的文本类型组件自适应设置同指标卡相同。
2)文本组件自适应
文本组件宽度适应:当文本内容在移动端不发生自动换行时,保留字号大小设置;当文本内容在移动端自动换行(并非手动按回车键换行)时,文本内容在移动端宽度适应。
3)表格自适应
在移动端布局中选择组件「样式设置」选择「自适应模式」,默认为「标准自适应」。
标准适应:移动端表格默认显示规则,列宽最大为组件可视宽度的 1/2,最小为组件可视宽度的 1/6 。
宽度适应:列宽继承 PC 端等比自适应效果,表格宽度撑满组件宽度(不会出现横向滚动条),移动端一屏内可显示所有列。
若自适应不满足需求,可直接拖动列宽调整,详情见本文第3.3.3节。
BI 移动端支持「网格布局」和「自适应布局」,两者的区别在于组件内容小于组件高度时,组件是否能自适应调整高度。
详情请参见:BI 布局设置
如需恢复默认移动端原始布局,则点击右上角的「重置」按钮,移动端布局即可恢复。如下图所示:
如果仪表板设置了「仪表板样式>仪表板>背景」,如下图所示:
未设置移动端布局时,背景图片可正常显示。如果在移动端布局里也设置了背景,仪表板的背景设置会失效。