# 制作自定义主题

系统支持自定义报表主题,当系统自带的主题无法满足项目需求时,可以根据项目设计并新增主题,本文将介绍如何去新增自定义主题。

新增自定义主题可按如下步骤操作:

  1. 确定主题规范:当确定了主题的主色调之后,还需要设计师去设计相关的配色,并产出主题规范
  2. 新增主题文件:通过复制或导入的方式,新增主题文件
  3. 修改主题色板和风格:根据设计师提供的主题规范,对主题进行自定义配置
  4. 更新缩略图:替换thumbnail.png文件
  5. 测试主题:测试新增的主题,确保颜色、风格无误

# 检查主题规范文件

设计师需提供主题规范,需要确认包含如下内容:

  1. 主题色板10个颜色
  2. 主题渐变10个颜色
  3. 6个指定的主题颜色:定义单元格边框、冻结行列线、以及输入组件的下拉面板和选中高亮的颜色
  4. 4组色阶(不限于4组)
  5. 单元格风格:大标题、行(列)标题_一级标题、表头(尾)、行(列)标题_二级标题、小计、合计(1)、合计(2)、解释性文字、链接单元格、注释。这些是归纳了常见的场景后做成的内置风格,覆盖了报表大多数应用场景

点击此处下载报表主题规范原图 (opens new window)(提取码:SuccBI)

# 新增主题

新增主题有两种方式,复制已有的主题或直接导入新的主题文件。

说明

若想制作系统主题则将主题文件放在系统资源项目下,若想制作项目主题则将主题文件放在目标项目下。

# 复制已有主题

  1. 复制主题:在【系统数据】项目里的【资源】-【settings】-【themes】-【rpt】目录下复制一个已有的主题文件
  2. 重命名:修改主题名称和描述,注意这里的主题名称相当于ID,只能用英文

新增主题1

# 导入新的主题文件

  1. 导入主题文件:在【项目】-【资源】-【settings】-【themes】-【rpt】目录下导入一个报表主题文件,点击此处 (opens new window)下载(提取码:SuccBI)
  2. 重命名:修改主题名称和描述

新增主题2

# 修改主题

报表主题文件目录下包含iconsimagestheme.jsonthumbnail这些内容。

主题文件

修改报表主题包含两部分内容,分别是修改主题色板和单元格风格:

说明

报表主题风格相对比较固定,初次确定下来后,如非必要不建议多次进行调整。且同一时间建议只能有一个人修改主题风格,多人同时修改时会相互覆盖,可能导致部分内容丢失,所以建议指定一人维护。

# 修改json

需要进入主题的json文件中,修改对应位置颜色的十六进制值,需要修改的内容有:

具体操作可参考仪表板主题制作

# 修改单元格风格

由于复制或导入的主题文件中都已经包含对应的风格,只需修改更新即可。报表主题中内置的单元格风格都需要更新,下面以行(列)标题_二级标题为例来演示如何修改风格,具体操作如下:

更新风格

  1. 选择主题:在报表中切换到新增的主题
  2. 打开主题规范:打开主题规范文件,找到需要修改的单元格风格,用于取色
  3. 应用风格:选中一个单元格,打开风格列表,找到需要更新的行(列)标题_二级标题,应用风格
  4. 修改风格:在主题规范文件中找到行(列)标题_二级标题对应的填充色、字体颜色以及字体大小,依次修改报表中的对应样式属性
  5. 更新风格:修改完成后,点击风格名称右侧的小三角,下拉选择更新风格
  6. 按照以上操作修改完所有的风格即可

# 更新缩略图

报表主题缩略图是用来示意当前主题的基础样式,用户可以根据缩略图初步对主题进行筛选使用。更新报表主题缩略图的操作同仪表板-更新缩略图

# 测试主题

# 确认当前主题风格无误

可以制作一张包含所有单元格风格的报表,类似下图,确认单元格的填充字体的样式隔行换色的颜色冻结行列线的颜色单元格边框色等是否与设计稿一致。

报表风格

# 确认可无障碍切换主题

需切换到其他报表主题测试单元格风格是否异常,有以下几个需要注意的异常点:

  1. 单元格的填充色未发生变化
  2. 字体样式未发生变化或有异常变化
  3. 隔行换色颜色与主题不匹配
  4. 边框颜色与主题边框色不符
  5. 冻结线的颜色未变化或与设置的主题色不符
是否有帮助?
0条评论
评论