--- order: 3 navTitle: 制作自己的主题 --- # 仪表板主题制作 以创建BLUE-蓝色测试主题为例，仪表板主题，需要在可视化界面上按照下述介绍进行操作。 ## 检查主题规范文件{#inspect} 设计师提供的主题规范，需要确认包含如下内容： ![主题规范](./images/20200221093534.png) 1. 主题色板10个颜色 2. 主题渐变10个颜色 3. 另外6个指定的主题颜色 4. 5组主题风格（不限于5组） 5. 4组色阶（不限于4组） ## 导入空主题并做处理{#import} 1. 在“系统数据”项目里，在【资源】-【settings】-【themes】-【dash】目录下导入空的主题文件，点击[此处](https://www.jianguoyun.com/p/DboY7t0Qz--gChickawE)下载 2. 修改主题名称为“red”，描述为“红色主题”。注意这里的**主题名称**只能用英文 ## 修改json{#modify} 需要进入主题的json文件中，修改对应位置颜色的十六进制值，相关修改规则如下 ### 主题色板10个颜色（前3个）{#themecolor1} 是主题下的控件背景、文字颜色和画布背景的默认颜色配置，在json文件中通过快捷键“CTRL+F”搜索*defaultProperties*找到对应的位置，修改其中bgcolor1、fontcolor和bgcolor2这三个属性对应的色值 ```json "defaultProperties": { "lineColor": "#D5D5D5", "panelBgColor": "#FFFFFF", "panelFontColor": "#000000", "highlightBgColor": "#419CFF", "highlightFontColor": "#FFFFFF", "fontColor2": "#5C6E80", "bgColor1": "#FFFFFF", "fontColor": "#324150", "bgColor2": "#F5F5F5", "colorTheme": "oceanKingdom" } ``` ### 主题色板10个颜色（后7个）{#themecolor2} 该主题的主色调，在json文件中通过快捷键“CTRL+F”搜索*paletteColors*找到对应的位置，根据主题规范替换7个颜色的色值即可 ```json "paletteColors": ["#4194FF", "#27C6DA", "#7460EE", "#75F0FF", "#FC6D87", "#FF9480", "#7DDA9B"] ``` ### 主题渐变10个颜色{#gradient} 主题色板中包含的10个渐变色，可通过搜索*gradientColors* 找到对应的json，其中color后面的0和1分别代表颜色的位置，可在0-1中间取值 ```json "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个指定的主题颜色{#specify-color} 也是主题下的默认颜色配置，同样是在*defaultProperties*下，从lineColor到fontColor2这6个色值 ```json "defaultProperties": { "lineColor": "#D5D5D5", "panelBgColor": "#FFFFFF", "panelFontColor": "#000000", "highlightBgColor": "#419CFF", "highlightFontColor": "#FFFFFF", "fontColor2": "#5C6E80", "bgColor1": "#FFFFFF", "fontColor": "#324150", "bgColor2": "#F5F5F5", "colorTheme": "oceanKingdom" } ``` ### 5组主题风格{#theme-style} 仪表板中可用于快速更换统计图颜色的几组色板，不限于5组，可根据实际需求增减，可通过搜索*marks* 快速定位对应json的位置；这里的色板分3种，纯色色板、渐变色板、带透明度的渐变色板，分别对应如下代码中的色板1、色板2、色板3；其中opacity就是对颜色透明度的设置，可取0-100之间的值 :::tip 此处应注意，caption需命名为色板1、色板2、色板3、色板4...... id为default1、default2、default3、default4...... ::: ```json "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组色阶{#color-scale} 需要修改的色值可通过搜索*gradation* 来定位，然后根据主题规范替换色值即可 :::tip 此处应注意，caption需命名为渐变1、渐变2、渐变3、渐变4...... id为gradation1、gradation2、gradation3、gradation4...... ::: ```json "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 } ``` ## 增加/修改主题中组件风格{#new-style} ### 根据仪表板设计规范增加/修改组件风格{#modify-style} 1. 主题内，同类组件的风格需要保持一致，例如面板、多页面板、浮动面板，第一个风格都是颜色填充，标题的样式也都一致 2. 仪表板规范如下图 ![仪表板规范](./images/sykb.png) 1. 具体操作见[仪表板主题制作入门视频](../../../../videos/README.md) ### 相关规范{#standard} 1. 上传图片的相关规范 - 确保上传的每张图片的格式都是`png`，且图片大小不超过200k - 该主题的图片，**应上传至“主题图片”中**，上传到该目录下的图片，其他仪表板只有在使用该主题时，才可以使用 - 主题风格中需要用到的图片，或者多个仪表板都需要用到的图片上传到“主题图片”中，其它的上传到“对象内” - 当需要替换图片或者去掉多余的图片时，需要在界面上做删除操作，而不是在vscode中，且需要检查对应的meta文件中的内容是否正确 2. 图片名称的命名规则（如下是图片类型的命名前缀，同一类型的有多张图片，可在后面依次加上序号） 背景图片类型 | 图片命名 | 规格说明 -|-|-| 画布背景 | 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 3. 组件风格命名规范 - 若是系统主题，则第一个是“默认xx风格”，接着是xx风格1、xx风格2...使用系统默认风格名称 - 若是项目主题，则根据每个风格的特点命名即可 4. 风格列表共用情况 图表类型 | 共用风格 -|-| 面板 | 面板风格 多页面板 | 多页面板风格 浮动面板 | 浮动面板风格 明细表 | 明细表风格 分组表 | 分组表风格 条形(柱形图、条形图、组合图、象形柱形图、象形条形图、双向条形图、条形占比图)| 图表风格 折线(折线图、面积图、雷达图、时间轴) | 图表风格 散点图、饼图、矩阵树图、环形占比图、水位图、步行图、词云图 | 图表风格 仪表盘 | 仪表盘风格 KPI | KPI风格 里程表 | 里程表风格 数据条 | 数据条风格 图标条 | 图标条风格 地图 | 根据每个图层的名称命名，例如：地图容器-容器风格、区块图层-区块风格 下拉框、输入框、日期、快速搜索 | 输入风格 选择面板 | 选择面板风格 标签页 | 标签页风格 线条 | 线条风格 文本 | 文本风格 图片 | 图片风格 图标 | 图标风格 视频、视频组 | 视频风格 IFrame | IFrame风格 按钮 | 按钮风格 轮播图 | 轮播图风格 参数控件的标题 | 输入标题风格 图表控件的标题 | 标题风格 ## SuperPage图片命名规范{#picture} 背景图片类型 | 图片命名 | 规格说明 -|-|-| 画布背景 | bg\_canvas | 面板背景 | bg\_panel | 文本背景 | bg\_text | 对话框背景 | bg\_dialog | svg图片 | svg | 主题缩略图 | thumbnail | W: 316px ，H: 196px 图标 | icon | 其他 | picture | - 以上图片大小均需小于200k - 同一类型的有多张图片，可在后面依次加上序号，如bg\_text1、bg\_text2... ## 测试主题{#test-theme} 1. 测试时可新建一个仪表板切换到需要测试的主题风格，将所有的图表拖拽出来，以查看它的默认风格样式是否美观 2. 测试时可进入到其他已经做好的仪表板中，将风格切换至对应的需要测试的主题，确保主题适用于所有的仪表板 3. 测试主题时，可使用服饰行业的Demo进行测试，确保几个页面在切主题之后都有比较美观的效果