仪表板全局样式

更新时间:

整体概述

功能定位

通过类似“一键配置”的方式实现Quick BI仪表板视觉风格的统一管理,提升多组件/多页面样式配置效率 。

核心价值

  • 一键式批量调整 ≥3个组件的视觉属性

  • 确保跨组件/跨页面的风格一致性

  • 降低重复性样式配置工作量

典型场景

场景1:企业VI规范落地

  • 适用功能:图表色系 + 页面字体

  • 典型案例:统一所有图表的品牌主色系,同步设置标准字体


场景2:数据状态可视化

  • 适用功能:语义色

  • 典型案例:全局设置库存预警红黄绿三色标


场景3:组件风格统一

  • 适用功能:卡片圆角 + 卡片间距

  • 典型案例:批量调整筛选器组件的圆角与间距参数

核心功能项

功能项

作用范围描述

可覆盖组件类型

主题模式

全局背景色/基础文字色/图表配色基准

除嵌入式iframe外的容器

图表色系

数据系列色/趋势线/分类标签

标准图表组件(含交叉表)

语义色

阈值告警/涨跌符号/进度条状态

带语义标识的图表/组件

页面字体

标题/轴标签/图例/表格体文字

文本型组件+图表文字元素

卡片圆角

容器边框弧度/图表外框圆角

标准图表组件

卡片间距

组件间Gutter/内边距基线值

标准图表组件

前置条件或约束

您已登录Quick BI控制台并进入仪表板编辑页面。请参见新建仪表板

功能配置

针对仪表板全局样式的批量设置,可进入“页面编辑-主题-全局样式”下界面进行配置,具体配置项如下。

图表配置项

配置项说明

主题模式

支持浅色模式深色模式

  • 选用浅色模式时,仪表板背景色为白色。

默认皮肤为浅色模式

  • 选用深色模式时,仪表板背景色为黑色。

图表色系

支持系统配置模板色系以及自定义色系。

  • 当选择图表色系模板色系时,您可以在下拉列表中选择色系。

image例如,色系选择为高级灰调,切换后图表如下所示。

image

  • 当选择图表色系自定义时,您可以修改每一个色块的颜色。

image

说明

渐变色彩样式作用于指示类、趋势类以及比较类图表。

页面字体

配置图表页面字体类型

卡片圆角

配置图表卡片边角弧度,支持无圆角、小圆角或大圆角。

间距

支持紧凑、常规自定义三种方式。

image

卡片间间距

仅在间距选择自定义方式下可以设置,调整卡片行间距以及列间距。

卡片内边距

仅在间距选择自定义方式下可以设置,调整卡片内上下左右边的距离。

语义色

在条件格式、副指标展示等功能中,通常通过颜色来直观传递数据的上涨、持平、下跌等信息。在语义色配置项中,系统将会根据图表色系中所选的主题,自动匹配不同的默认语义色,您也可以在此按需自定义数据涨跌、正负、状态等含义的全局配色,使数据色系更贴合业务看数习惯。该配置项将对整个仪表板生效。

111

常见问题速查表

全局样式设置中遇到的问题

参考的功能

参考操作

想各绘图组件的色系统一

图表色系

可直接选定官方或自定义的色系

业务人员更习惯用楷体

页面字体

直接选择楷体

组件中的图标颜色想单独批量配置

语义色

针对不同语义设置单独颜色

柱状图组件的边角太直角不好看

卡片圆角

可设置小、大两种不同圆角方式

图表组件之间距离太大

卡片间距

针对行列间距进行设置

深色模式下图例看不清

主题模式

可切换为浅色模式