# 仪表板主题制作

以创建BLUE-蓝色测试主题为例，仪表板主题，需要在可视化界面上按照下述介绍进行操作。

# 检查主题规范文件

设计师提供的主题规范，需要确认包含如下内容：

主题规范

主题色板10个颜色
主题渐变10个颜色
另外6个指定的主题颜色
5组主题风格（不限于5组）
4组色阶（不限于4组）

# 导入空主题并做处理

在“系统数据”项目里，在【资源】-【settings】-【themes】-【dash】目录下导入空的主题文件，点击此处 (opens new window)下载
修改主题名称为“red”，描述为“红色主题”。注意这里的主题名称只能用英文

# 修改json

需要进入主题的json文件中，修改对应位置颜色的十六进制值，相关修改规则如下

# 主题色板10个颜色（前3个）

是主题下的控件背景、文字颜色和画布背景的默认颜色配置，在json文件中通过快捷键“CTRL+F”搜索defaultProperties找到对应的位置，修改其中bgcolor1、fontcolor和bgcolor2这三个属性对应的色值

  "defaultProperties": {
  	"lineColor": "#D5D5D5",
  	"panelBgColor": "#FFFFFF",
  	"panelFontColor": "#000000",
  	"highlightBgColor": "#419CFF",
  	"highlightFontColor": "#FFFFFF",
  	"fontColor2": "#5C6E80",
  	"bgColor1": "#FFFFFF",
  	"fontColor": "#324150",
  	"bgColor2": "#F5F5F5",
  	"colorTheme": "oceanKingdom"
  }

# 主题色板10个颜色（后7个）

该主题的主色调，在json文件中通过快捷键“CTRL+F”搜索paletteColors找到对应的位置，根据主题规范替换7个颜色的色值即可

"paletteColors": ["#4194FF", "#27C6DA", "#7460EE", "#75F0FF", "#FC6D87", "#FF9480", "#7DDA9B"]

# 主题渐变10个颜色

主题色板中包含的10个渐变色，可通过搜索gradientColors 找到对应的json，其中color后面的0和1分别代表颜色的位置，可在0-1中间取值

"gradientColors": [{
      "type": "linearGradients",
      "deg": 180,
      "value": [
          [{"color": "#FF9695"}, 0],
          [{"color": "#FF3F40"}, 1]
      ]
  }, {
      "type": "linearGradients",
      "deg": 180,
      "value": [
          [{"color": "#FFBEDC"}, 0],
          [{"color": "#EA3D90"}, 1]
      ]
  }, {
      "type": "linearGradients",
      "deg": 180,
      "value": [
          [{"color": "#FFE041"}, 0],
          [{"color": "#FF7200"}, 1]
      ]
  }
  ......

# 另外6个指定的主题颜色

也是主题下的默认颜色配置，同样是在defaultProperties下，从lineColor到fontColor2这6个色值

  "defaultProperties": {
  	"lineColor": "#D5D5D5",
  	"panelBgColor": "#FFFFFF",
  	"panelFontColor": "#000000",
  	"highlightBgColor": "#419CFF",
  	"highlightFontColor": "#FFFFFF",
  	"fontColor2": "#5C6E80",
  	"bgColor1": "#FFFFFF",
  	"fontColor": "#324150",
  	"bgColor2": "#F5F5F5",
  	"colorTheme": "oceanKingdom"
  }

# 5组主题风格

仪表板中可用于快速更换统计图颜色的几组色板，不限于5组，可根据实际需求增减，可通过搜索marks 快速定位对应json的位置；这里的色板分3种，纯色色板、渐变色板、带透明度的渐变色板，分别对应如下代码中的色板1、色板2、色板3；其中opacity就是对颜色透明度的设置，可取0-100之间的值

TIP

此处应注意，caption需命名为色板1、色板2、色板3、色板4...... id为default1、default2、default3、default4......

"marks": {
       "palette": {
           "defaultPalette": "default",
  "items": [{
               "id": "default1",
               "caption": "色板1",
               "paletteData": ["#27C6DA", "#FF9480", "#7DDA9B", "#4194FF", "#75F0FF","#7460EE"]
           }, {
               "id": "default2",
               "caption": "色板2",
               "paletteData": [{
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#88FFF0", 0],
   					["#0D967D", 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#7DC2E9", 0],
   					["#397AE2", 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#ADE4FF", 0],
   					["#44ACF8", 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#B5C9F3", 0],
   					["#546DEB", 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#ACF1E7", 0],
   					["#2AD5B5", 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#FBD245", 0],
   					["#F5A621", 1]
   				]
   			}]
           }, {
               "id": "default3",
               "caption": "色板3",
               "paletteData": [{
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#7DC2E9", 0],
   					[{
   						"color": "#478FCF",
   						"opacity": 0
   					}, 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#73DFCB", 0],
   					[{
   						"color": "#73DFCB",
   						"opacity": 0
   					}, 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#ADE4FF", 0],
   					[{
   						"color": "#75C5FF",
   						"opacity": 0
   					}, 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#B5C9F3", 0],
   					[{
   						"color": "#7E99E4",
   						"opacity": 0
   					}, 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#FBBABB", 0],
   					[{
   						"color": "#F58485",
   						"opacity": 0
   					}, 1]
   				]
   			}, {
   				"type": "linearGradients",
   				"deg": 180,
   				"value": [
   					["#FBD245", 0],
   					[{
   						"color": "#F5A621",
   						"opacity": 0
   					}, 1]
   				]
   			}]
           }
   	}]
   }]

# 4组色阶

需要修改的色值可通过搜索gradation 来定位，然后根据主题规范替换色值即可

TIP

此处应注意，caption需命名为渐变1、渐变2、渐变3、渐变4...... id为gradation1、gradation2、gradation3、gradation4......

  "items": [{
              "id": "gradation1",
              "caption": "渐变1",
              "minPointColor": "#B0E7FF",
              "maxPointColor": "#4194FF",
              "opacity": 100
          }, {
              "id": "gradation2",
              "caption": "渐变2",
              "minPointColor": "#C0F8FF",
              "maxPointColor": "#27C6DA",
              "opacity": 100
          }, {
              "id": "gradation3",
              "caption": "渐变3",
              "minPointColor": "#D3DAFF",
              "maxPointColor": "#7460EE",
              "opacity": 100
          }, {
              "id": "gradation4",
              "caption": "渐变4",
              "minPointColor": "#FFCFC6",
              "maxPointColor": "#FF9480",
              "opacity": 100,
              "reverse": false
          }, {
              "id": "gradation5",
              "caption": "渐变5",
              "minPointColor": "#EBCAFF",
              "maxPointColor": "#C76FFF",
              "opacity": 100
          }

# 增加/修改主题中组件风格

# 根据仪表板设计规范增加/修改组件风格

主题内，同类组件的风格需要保持一致，例如面板、多页面板、浮动面板，第一个风格都是颜色填充，标题的样式也都一致
仪表板规范如下图

仪表板规范

具体操作见仪表板主题制作入门视频

# 相关规范

上传图片的相关规范
- 确保上传的每张图片的格式都是png，且图片大小不超过200k
- 该主题的图片，应上传至“主题图片”中，上传到该目录下的图片，其他仪表板只有在使用该主题时，才可以使用
- 主题风格中需要用到的图片，或者多个仪表板都需要用到的图片上传到“主题图片”中，其它的上传到“对象内”
- 当需要替换图片或者去掉多余的图片时，需要在界面上做删除操作，而不是在vscode中，且需要检查对应的meta文件中的内容是否正确
图片名称的命名规则（如下是图片类型的命名前缀，同一类型的有多张图片，可在后面依次加上序号）

背景图片类型	图片命名	规格说明
画布背景	bg_canvas
面板背景	bg_panel
图表背景	bg_chart
标题背景	bg_title
KPI背景	bg_kpi
仪表盘背景	bg_guage
表格背景	bg_table
里程表背景	bg_odometer
地图容器	bg_canvas_map
背景图层	bg_shape_map
区块图层	bg_tile_map
提示信息背景图片	bg_point
svg图片	svg
主题缩略图	thumbnail	W: 316px ，H: 196px
图标	icon
其他	picture	小于200k

示例：有两张不同的图表背景图片，则分别命名为bg_chart1,bg_chart2

组件风格命名规范
- 若是系统主题，则第一个是“默认xx风格”，接着是xx风格1、xx风格2...使用系统默认风格名称
- 若是项目主题，则根据每个风格的特点命名即可
风格列表共用情况

图表类型	共用风格
面板	面板风格
多页面板	多页面板风格
浮动面板	浮动面板风格
明细表	明细表风格
分组表	分组表风格
条形(柱形图、条形图、组合图、象形柱形图、象形条形图、双向条形图、条形占比图)	图表风格
折线(折线图、面积图、雷达图、时间轴)	图表风格
散点图、饼图、矩阵树图、环形占比图、水位图、步行图、词云图	图表风格
仪表盘	仪表盘风格
KPI	KPI风格
里程表	里程表风格
数据条	数据条风格
图标条	图标条风格
地图	根据每个图层的名称命名，例如：地图容器-容器风格、区块图层-区块风格
下拉框、输入框、日期、快速搜索	输入风格
选择面板	选择面板风格
标签页	标签页风格
线条	线条风格
文本	文本风格
图片	图片风格
图标	图标风格
视频、视频组	视频风格
IFrame	IFrame风格
按钮	按钮风格
轮播图	轮播图风格
参数控件的标题	输入标题风格
图表控件的标题	标题风格

# SuperPage图片命名规范

背景图片类型	图片命名	规格说明
画布背景	bg_canvas
面板背景	bg_panel
文本背景	bg_text
对话框背景	bg_dialog
svg图片	svg
主题缩略图	thumbnail	W: 316px ，H: 196px
图标	icon
其他	picture

以上图片大小均需小于200k
同一类型的有多张图片，可在后面依次加上序号，如bg_text1、bg_text2...

# 测试主题

测试时可新建一个仪表板切换到需要测试的主题风格，将所有的图表拖拽出来，以查看它的默认风格样式是否美观
测试时可进入到其他已经做好的仪表板中，将风格切换至对应的需要测试的主题，确保主题适用于所有的仪表板
测试主题时，可使用服饰行业的Demo进行测试，确保几个页面在切主题之后都有比较美观的效果

系统自带的主题

浏览仪表板

0条评论