观远 BI

仪表板背景设置

创建于 2022-11-01 / 最近更新于 2023-06-26 / 1943
字体: [默认] [大] [更大]

最终效果示例

  • 桌面端

image.png

  • 移动端 

image.png

这两种视图效果主要是通过调整仪表板背景色来实现。那具体要如何实现呢?

操作步骤

观远BI设置背景色的入口:

1. 仪表板页面:页面右上角菜单栏,页面样式 — 页面背景,可设置背景色和背景图片。背景色和背景图片同时使用时,先展示图片,图片覆盖不到的地方显示背景色。

image.png

2. 卡片:编辑页面右侧,卡片设置 — 卡片背景,仅支持设置背景色,且支持设置透明背景色(RGBA中的A值写为0即可),目前文本卡片和表格卡片暂不支持透明色设置。

image.png

3. 标签页组件和卡片组组件: 菜单栏样式里可设置背景色和背景图,且对组件内的卡片都生效。即放到标签页和卡片组里的卡片不需要单独设置卡片背景透明色,直接显示组件背景。

image.png

本文示例里桌面端和移动端的效果都是使用了卡片组组件实现的。实现要点:

A. 标题栏“集团驾驶舱”看起来是一个文本卡片,但实际上是一个卡片组。因为文本卡片本身不支持使用背景图片,所以这里使用了卡片组,设置了背景图片,然后添加了一个文本卡片,把文本卡片设置好样式后拖到需要的位置即可。

B. 下面的4个指标卡,其实是4个独立的卡片组,分别上传了不同的背景图片,每个卡片组里添加一个指标卡即可。

image.png

C. 因为卡片组不能覆盖整个仪表板页面,卡片组外面部分还是会显示默认主题色(例如朱鹭白和月光蓝)。如果只给卡片组设置背景色,有时候整个页面看起来反而会不协调,所以建议同时给仪表板设置同色系纯色背景色。

D. 桌面端制作好的标签页和卡片组不能直接同步到移动端,移动端布局页面只支持选取桌面端的卡片,所以需要从移动端“页面组件”里添加卡片组或者页头组件,从样式里重新设置更适合移动端的背景。点击顶端“页面样式”,可以设置整个页面的背景和其他样式。

image.png

注意事项

1. 背景图片支持使用图片链接和本地上传图片,支持格式 jpg/png/gif,本地上传建议大小不超过400K,实际上限为1M,超过1M会上传失败,可根据需要设置图片大小展示方式和应用区域。图片链接展示效果容易受网络和域名跨域影响,一般建议使用本地上传图片。

image.png

2. 暂时表格卡片本身设置透明色不生效,且组件背景色对大部分表格不生效。暂时仅有轮播表里对表头和表格分别设置透明色,可完整实现透出组件或者页面背景色。所以对于轮播表以外其他表格卡片,建议在卡片编辑页面,分别使用组件或者页面背景相同颜色或者同色系颜色,来设置表头填充色和表格填充色;直接放页面上的话,还需要同时设置卡片背景色。

image.png


3 人点赞过