历史版本30 :仪表板样式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

仪表板样式在线视频学习请查看:仪表板样式 

1.1 版本


FineBI 版本JAR 包版本功能变动
  5.12020-01-15
-
5.1.6-
自定义样式可存为预设样式,供同一用户在其他仪表板使用
5.1.14-「图表配色」支持自定义
5.1.16-
  • 仪表板样式改版,修改为「预设」和「自定义」两个tab页。

  • 新增更多预设样式和自定义功能,满足更多的用户需求。

  • 预设样式中调整顺序,把「经典白」和「经典黑」放置在最前方

注:低版本的 IE 浏览器(一般 IE10 以下),部分组件背景样式和组件标题背景样式效果可能会受影响。


1.2 应用场景

用户制作完仪表板内组件,进行仪表板美化操作。可以更改,自定义仪表板样式,自定义样式保存后,用户能够运用于其他的仪表板制作。

1.3 功能介绍

仪表板样式提供了从全局角度调整画布的功能,可设置整张仪表板的背景、标题、组件、图表/表格风格和配色、过滤组件主题等。并可将调整后的仪表板样式效果保存。方便用户运用于其他的仪表板制作。

1.3.1 仪表板样式入口

在仪表板编辑界面点击「仪表板样式」,则跳出仪表板样式编辑界面,如下图所示:

2021-09-06_16-10-48.png

1.3.2 仪表板样式界面说明

「仪表板样式」界面功能详细说明,如下图所示:

  • 支持直接选择「预设样式」的仪表板;

  • 支持设置「自定义」样式的仪表板;

  • 当前用户支持在其他仪表板使用该仪表板的自定义样式,点击「存为自定义样式」实现。

2021-09-06_16-14-52.png

设置好的仪表板样式有三类,自定义样式、全局样式和预设样式,如下图所示:

三类仪表板样式说明如下表所示:

仪表板样式展示顺序设置好的仪表板样式
样式说明
1自定义样式

仅当前用户可添加,删除,重命名自定义样式。一个用户最多添加 3 个自定义样式

注:若需要修改自定义样式可点击目标仪表板样式,设置自定义样式后「存为预设样式」,删除原先的仪表板样式。

2全局样式仅管理员可添加,删除,修改,重命名全局样式。管理员最多添加 5 个全局样式。
仪表板默认样式为管理员设置的全局样式。详情参见:BI全局样式
3预设样式有 14 种系统自带的预设样式,不可删除、修改、重命名。

1.4 生效范围

  • 用户存为自定义样式的样式生效范围:当前用户制作的所有仪表板,都可以选择之前保存的自定义样式。

  • 用户未保存的自定义样式生效范围:当前仪表板。

  • 仪表板样式生效优先级排列为:组件样式>仪表板样式>BI 全局样式。

注:用户默认的仪表板样式仅可由管理员更改,步骤请参见:BI全局样式

2. 更改仪表板样式编辑

打开「仪表板样式」点击仪表板预设样式,达到预期效果之后点击「确定」即可更改样式。如下图所示:

2021-09-06_16-33-11.png

若预设样式不满意,可以自定义样式。

3. 设置自定义样式编辑

在组件编辑点击界面「仪表板样式」,点击「自定义」,进入自定义样式编辑界面,如下图所示:

2021-09-06_16-42-01.png

注:编辑后,自动在仪表板展示预览效果,点击「确定」才会生效自定义效果。若不存为自定义样式,则该样式仅在此仪表板生效。

自定义仪表板样式设置项,如下表所示:

样式 可设置项目  
基础样式选择预设样式,在该样式基础上进行自定义
存为预设样式点击存为预设样式,在「预设」tab页中显示。可以运用于其他仪表板中
仪表板仪表板背景、组件间隙
组件

标题背景、标题文字、组件背景、组件边框

图表图表的整体配色、图表中的文本格式
表格表格风格、主题色和文字格式
过滤组件标题背景、标题文字格式、组件背景、组件边框、主题色

3.1 设置基础样式

选择自定义样式的基础样式为「冷静蓝灰」。在此基础上修改。如下图所示:

2021-09-06_18-27-48.png

3.2 设置仪表板

1)点击「仪表板」设置样式。可设置仪表板的「背景」和「组件间隙」。

背景颜色设置「蓝灰色」,组件间隙设置「12」,效果如下图所示:

注:若组件设置了 组件悬浮 ,那么尽管在仪表板样式处设置组件之间有间隙,但组件仍然可以重叠展示。

2021-09-06_17-36-41.png

2)仪表板设置说明如下表所示:

设置仪表板
说明
背景

仪表板背景可设置为「颜色」或者「图片」。

  • 颜色:点击可设置背景颜色。选择自定义颜色、透明、自动。

  • 图片:点击可上传图片,作为仪表板背景。上传的背景图片的大小和像素没有要求。

组件间隙

设置组件间隙大小,设置为 0 则无间隙。

3.2 设置组件样式

3.2.1 设置组件标题样式

标题可统一设置仪表板中组件标题的「背景」和「文字」。(包括过滤组件)

1)标题背景设置为「标题样式>科幻标题装饰」,效果如下图所示:

2021-09-06_18-38-12.png

2)标题文字设置。「自定义」,字号设置「14」,字体颜色设置「蓝色」。如下图所示:

2021-09-06_18-42-56.png

3)标题设置说明如下表所示:

标题设置
说明
背景

标题背景可设置为「颜色」或者「标题样式」。

  • 颜色:点击可设置背景颜色。选择自定义颜色、透明、自动。

  • 标题样式:支持自定义图片和各种风格的样式。自定义图片可上传图片作为标题背景,背景图片的大小和像素没有要求。

文字

标题文字可设置「自动」或者「自定义」。

详细说明可参见:组件标题-编辑标题

3.2.2 组件背景样式

组件中可统一设置仪表板中所有组件的背景,分为「颜色」和「组件样式」两种。

  • 颜色

颜色设置「自动」,组件边框设置圆角「6」px,边框「5」,颜色为深蓝色。效果如图所示:

2021-09-06_18-57-08.png

  • 组件样式

组件背景设置为「组件样式>自定义图片」后,效果如下图所示:

注:组件样式支持自定义图片和各种风格的样式。自定义图片可上传图片作为背景,背景图片的大小和像素没有要求。

2021-09-06_18-50-25.png

3.4 设置图表

可设置仪表板中的图表「配色」和图表中的「文字」样式。如下图所示:

2021-09-06_19-02-48.png

图表设置的详细说明如下表所示:

图表设置
说明
配色

1)可根据用户需要,选择修改图表中的组件元素配色风格。如下图所示:

2021-09-06_19-08-38.png

2)用户可自定义图表配色,如下图所示:

2021-09-06_19-11-41.png

文字

文字可配置组件中字体的样式,包含图表中的横纵轴、分类轴、值轴的文字等。

标题文字可设置「自动」或者「自定义」

字体设置详细说明可参见:组件标题-编辑标题

3.5 设置表格

1)在表格下可统一设置仪表板中所有表格组件的样式,包括「风格」、「主题色」和「文字」,其中文字自定义中可分别设置「表头」和「表身」的字体样式。

自定义文字样式后,效果如下图所示:

2021-09-06_19-17-13.png

表格设置详情说明如下表所示:

表格设置
说明
风格可设置三种不同的表格整体风格
主题色点击可设置表格组件的主题颜色。可选择自定义颜色、透明、自动实现不同效果
文字

文字可设置「自动」或「自定义」的字体样式,自定义中可分别设置「表头」和「表身」的字体样式。

自定义字体样式说明可参见:组件标题-编辑标题

表身的维度、指标支持设置对齐方式。

3.6 设置过滤组件

过滤组件中可统一设置该仪表板中所有过滤组件的样式。可设置标题背景、标题文字、组件背景、主题色。

将过滤组件标题背景设置「粉色」,标题文字自动,组件背景设置为「西瓜红」,组件边框设置为圆角深红色,边框粗细为「5」。并设置过滤组件选择框的主题色为「黑色」。效果如下图所示:

2021-09-06_19-21-39.png

过滤组件设置
说明
标题背景

标题背景可设置为「颜色」或者「图片」。

  • 颜色:点击可设置背景颜色。选择自定义颜色、透明、自动。

  • 图片:点击可上传图片,作为仪表板背景,背景图片的大小和像素没有要求

标题文字

标题文字可设置「自动」或者「自定义」。

详细说明可参见:组件标题-编辑标题

组件背景

组件背景可设置为「颜色」或者「图片」,同标题背景。

还可设置组件边框粗细,颜色,边框圆角程度

主题色可设置过滤组件选择框的主题色

4. 添加用户自定义样式编辑

设置自定义仪表板样式后,如果用户需要反复使用于在其他仪表板,可点击「存为预设样式」。预设样式中即出现该自定义样式。如下图所示:

注:同一用户最多添加 3 个自定义样式。

2021-09-06_19-31-44.png

5. 重命名自定义样式编辑

在「预设」tab下,点击添加的自定义样式标题,即可重命名自定义样式,如下图所示:

注:管理员的全局样式仅管理员可重命名,系统自带的预设样式 1-6 不可修改。

2021-09-06_19-34-22.png

6. 删选用户自定义样式编辑

鼠标悬停在用户保存的自定义样式上,左上角就会出现删除的按钮,点击后再次确认,点击「确定」即可删除。如下图所示:

注:管理员的全局样式仅管理员可删除,系统自带的预设样式 1-6 不可修改。

2021-09-06_19-36-33.gif