1. 概述
仪表盘支持仪表盘主题的配置,选择对应的仪表盘主题后,可对仪表盘上的图表统一配置配色、控件样式、图表样式、字体等,快捷制作出美观好看的仪表盘。目前仪表盘已支持多种官方主题与自定义主题功能。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_cb6f0d2bd313b21c9e53f054417b934b.png)
2. 系统官方主题配置
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_afcf324391a8af2d3f27ac315768a054.png)
(1)仪表盘编辑页面点击空白处,选择左侧仪表盘主题即可;如果需要取消仪表盘主题,点击右上方的重置即可。
系统官方主题包括经典、浅色、深色、科技蓝、淡雅紫五种,不同风格适用于用户在不同场景下使用。其中“经典”主题需要在 V2.58.0以及更高版本中才能使用。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_08c86f393e7659d8e0ff43936caf3540.gif)
(2)点击仪表盘上的图表,在右侧图表配置页面可选择勾选组件元素样式跟随仪表盘主题,勾选图表的主题会跟随仪表盘主题变化,取消勾选则显示图表本身的样式(仅当仪表盘有设置主题才会出现此选项)。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_9af2adf425fe9e2d0558e79ff6a7f85b.jpg)
(3)如果仪表盘的图表是添加的历史已有的图表,则会默认勾选元素样式跟随仪表盘主题。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_38081d1f2423f0ca99f680e2ee491b53.jpg)
(4)如果是新建图表,则在保存图表时可选择勾选图表样式跟随仪表盘主题,勾选后图表样式将自动跟随保存到的仪表盘的主题设置,否则将按照自身样式显示。
![image](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_19b4f07d1d8914996475f4f5d08b8b07.png)
3. 自定义主题
注意
自定义仪表盘主题的功能自V2.56.1及之后的版本支持。
3.1 编辑自定义主题
(1)在仪表盘编辑页面,点击页面配置右上角的「+」号,选择新建主题。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_801c6ad68e8e3b041a782f04976d5af8.png)
(2)点击后右侧会进入仪表盘主题的配置页面。
支持的配置项:
- 仪表盘:基础设置、布局方式、画布背景、内边距、外观。
- 图表:图表标题、离散数据配色方案、连续数据配色方案、线条样式、图例、表格样式、指标卡样式。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_8f5268b6cb97b76b77249c4002521ac9.jpg)
具体操作如下:
3.1.1 仪表盘配置项
- 基础设置:可为新建的仪表盘主题设置主题名称(最长 15 个字符);仪表盘主题的共享范围可以设置为个人、项目、系统。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_48ef9c2b39c4ab4d0962c80f5ba83078.png)
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_c0add4a9a17625ae9a90f8b0544b9b64.png)
- 设置画布背景:支持对背景的颜色、透明度等进行调整。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_7f8871425c1a9239c7071e01c9974269.png)
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_01bb36e3738086fa5494919d6e225d7f.png)
- 设置外观:支持对仪表盘的填充颜色、边框颜色、边框粗细以及圆角程度进行调整。
在V2.58.0 以及更高版本中支持「控件颜色自适应」配置,选择后当容器背景颜色变化时,其中的组件不会再保持白色,组件背景色及文本色支持自适应容器背景颜色。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_b5ac727e540e7c495437a9c5fad3a57a.png)
3.1.2 图表配置项
- 设置图表标题:支持对图表的标题内容显示进行配置,可选择显示全局内容/显示自定义内容/不显示任何内容;支持对图表标题的字号、粗细、是否倾斜、是否有下划线、颜色进行配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_3d817db2a50db557fbca4d96d47f5ada.png)
- 设置离散数据配色方案:支持选择系统提供/个人已配置/公共配置的配色方案;支持自定义配色方案。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_4a3c3e8087502beaac1dd139c9b70998.png)
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_c37a63f7ae492a52af46efb97beb361a.png)
- 设置线条样式:支持选择图表线条的线型样式和标记样式。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_93f6cd6a7c7adaea05e652ed4e713793.png)
- 设置图例:支持选择是否显示图例、图例显示位置、图例对齐方式、最大列数以及图例标签字体。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_9d44fa6153195f071ce8f7cd954287df.png)
- 设置表格样式:支持对表头文字与表格文字的字号、粗细、是否倾斜、是否有下划线、颜色、背景色进行配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_e8fca65ef299b6cc62347cdd6e500ed7.png)
- 设置指标卡样式:支持对主要指标和次要指标的指标名称与指标数值的字体与颜色进行配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_7495fb2704fa4defba1ab89cf12950bf.png)
3.2 应用仪表盘主题
(1)用户可以在主题分类中看到个人分类,可在个人分类中找到分享给个人的自定义主题,进行主题的应用。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_80fd3c3333aae4e94c25df4f26174866.jpg)
(2)点击某一个自定义主题进行应用后,用户还可以进行布局方式的修改,以及查看模式配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_f0fa37f8f0ba30de06b1ee6f042d11fc.png)
- 设置布局方式:整个页面布局支持磁贴布局和自由布局切换,当仪表盘由自由布局向磁贴布局切换时,可能会改变当前仪表盘布局样式。
- 查看画布背景:画布背景跟随仪表盘主题,无法修改。
- 查看模式配置:支持选择导航锚点是否默认展开、查看态是否显示工具条、查看态是否显示提示类图标、查看态是否自适应宽度、是否定时刷新。