反馈已提交

网络繁忙

移动端布局

  • 文档创建者:doreen0813
  • 编辑次数:31次
  • 最近更新:April陶 于 2021-09-03
  • 1. 概述

    1.1 版本

    FineBI版本
    JAR包版本App版本HTML5 移动端展现插件功能变动
    5.12019-01-15V10.2V10.2支持移动端布局
    5.12020-08-03V10.4.84V10.4.84

    支持移动端组件自定义位置和高度

    支持一行并列展示多个组件

    --V10.4.975V10.4.975

    优化图表数据点提示较长时的显示效果

    5.1.14-V10.4.986V10.4.986过滤组件支持直接显示在移动端仪表板内部
    5.1.16-V10.4.990V10.4.990
    • 移动端布局新增:页面的移动端属性设置、组件的移动端属性设置功能

    • 保存移动端布局结果后停留在当前页,手动点击返回桌面端布局

    • 新的布局框形式、尺寸更接近真实手机

    1.2 应用场景

    移动办公时,用户往往通过移动设备访问 FineBI 仪表板,实时快速查看工程进度等。

    设计人员往往对 PC 端与移动端共用一张 FineBI 仪表板,仅改变仪表板布局样式,以节约设计成本和维护时间。

    1.3 功能简介

    FineBI 支持 iOS 或 Android 系统的手机、Pad 端查看仪表板,让用户可以方便地用手指触摸浏览系统中的仪表板。

    FineBI 在仪表板界面提供了移动端布局功能,方便用户设计移动端仪表板展示的组件及展示顺序。如下图所示:

    2021-09-01_10-55-52.png

    注:移动端在V10.4.986版本及之后,过滤组件支持移动端布局,但不能调整组件大小。

    1.4 环境准备

    存在「BI移动端布局H5」插件。BI 自带该插件,一般情况无需安装。

    2. 默认移动端布局

    PC 端创建好仪表板后,不调整移动端布局,挂载到目录中。默认的移动端预览效果如下图所示:

    1625542565337811.gif

    默认规则:

    1)默认一行一个组件

    2)组件顺序按照 PC 端的物理位置展示,从左到右,从上到下

    3)组件高度根据内容自适应调整

    4)过滤组件默认不显示在仪表板内部,而是在下方过滤组件按钮中展示

    3. 调整移动端布局

    3.1 进入移动端布局

    为了让模板在移动端展示时更加美观且合理,在仪表板编辑页面上方点击「更多>移动端布局」按钮,即可进入移动端布局设置,如下图所示:

    注:此处移动端布局按钮仅在仪表板编辑界面存在,仪表板预览界面没有该按钮。

    2021-09-01_10-53-01.png

    进入移动端布局设置界面,如下图所示:

    2021-09-01_10-55-52.png

    移动端布局支持的设置项。具体如下:

    1)隐藏组件

    2)调整组件上下排序、调整组件大小(过滤组件不支持调整大小)

    3)设置移动端组件、页面样式

    注1:经过移动端布局调整后,若为仪表板新增组件,则新增的组件自动在移动端布局中最后一个;新增的过滤组件则会出现在最上方。

    注2:在仪表板删除组件,则删除的组件在移动端布局中同步删除,该组件后面的组件向上移动。

    3.2 隐藏组件

    仪表板中一些用于优化图表效果的组件,无需在移动端展示。此时可以在移动端布局中隐藏这些组件。

    在移动端布局界面,点击组件左上角「隐藏」按钮,组件移动到「隐藏的组件」中。隐藏的组件将不在移动端显示。隐藏该组件后,之后的组件依次向上移动。如下图所示:

    2021-09-01_13-43-44.gif

    已隐藏的组件,点击组件右上角的「展示」按钮,组件自动移动到左边移动端布局面板中。如下图所示:

    注:恢复显示的组件将自动排在最后一位显示,恢复显示的过滤组件在最上方显示,过滤组件显示设置参考文档 3.4.3 节。

    2021-09-01_13-46-27.gif

    3.3 调整组件

    3.3.1  调整组件大小

    JAR 包在 2020-08-03 及之后的 FineBI 工程,支持调整组件的大小,如下图所示:

    注:过滤组件不支持调整大小,仅支持调整位置。

    2021-09-01_13-56-15.gif

    3.3.2  调整组件位置

    移动端布局支持组件位置上下调整,如下图所示:

    2021-09-01_14-03-29.gif

    JAR 包在 2020-08-03 及之后的 FineBI 工程,支持支持一行多个组件,组件位置自动吸附调整,如下图所示:

    2021-09-01_14-00-16.gif

    3.4 页面设置

    3.3.1 设置组件间隙

    点击「样式设置」,组件间隙设置「10」,在左侧可以看见实现效果。如下图所示:

    2021-09-01_14-06-05.png

    3.4.2 设置仪表板背景

    在「组件设置>页面设置」下选择背景,点击「颜色」,设置黑色背景。效果如下图所示:

    2021-09-01_14-27-26.png

    3.4.3 显示过滤组件

    关闭「显示全部过滤组件在参数板中」即可展示所有过滤组件。过滤组件位置在最上方。如下图所示:

    2021-09-01_14-31-29.png

    3.5 组件设置

    3.5.1 隐藏全屏按钮

    用户有时候不想要所有组件都有能点击后全屏展示。可以选择该组件,关闭「显示全屏按钮」。完成移动端布局点击「保存」。如下图所示:

    详情参见文档:全屏按钮设置

    2021-09-01_15-28-31.png

    3.5.2 组件自适应

    对于一些组件,例如文本组件、KPI指标卡组件、表格组件,都可以通过设置自适应来调整移动端显示样式,保证内容显示完整。

    1)KPI 指标卡自适应

    在移动端布局中选择组件「样式设置」选择「自适应模式」,如下图所示:

    有四种自适应方式:标准适应、整体适应、宽度适应和高度适应,默认为标准适应。

    注:自定义图表的文本类型组件自适应设置同指标卡相同。

    2021-09-02_18-14-57.png

    2)文本组件自适应

    在移动端布局中选择组件「样式设置」选择「自适应模式」,如下图所示:

    文本组件宽度适应:当文本内容在移动端不发生自动换行时,保留字号大小设置;当文本内容在移动端自动换行(并非手动按回车键换行)时,文本内容在移动端宽度适应。

    2021-09-03_9-49-22.png

    3)表格自适应

    在移动端布局中选择组件「样式设置」选择「自适应模式」,默认为「标准自适应」。

    • 标准适应:移动端表格默认显示规则,列宽最大为组件可视宽度的 1/2,最小为组件可视宽度的 1/6 。

    • 宽度适应:列宽继承 PC 端等比自适应效果,表格宽度撑满组件宽度(不会出现横向滚动条),移动端一屏内可显示所有列。

    2021-09-03_10-12-16.gif

    3.6 BI布局设置

    BI 移动端支持「网格布局」和「自适应布局」,两者的区别在于组件内容小于组件高度时,组件是否能自适应调整高度。

    详情请参见:BI 布局设置

    2020-07-31_9-56-39.png

    4. 恢复默认移动端布局

    如需恢复默认移动端原始布局,则点击右上角的「重置」按钮,移动端布局即可恢复。如下图所示:

    2021-09-01_16-29-00.png

    5. 注意事项

    5.1 组件背景不生效

    如果组件设置了图片背景,如下图所示:
    Snag_52adb6d.png

    未设置移动端布局时,背景图片可正常显示。如果在移动端布局里也设置了背景,仪表板的背景设置会失效。

    附件列表


    主题: 移动端
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭