# 自定义主题


本节主要介绍仪表盘的自定义主题功能。选择一个仪表盘进行设计,勾选“自定义主题”复选框时可启用自定义主题功能(默认未勾选)

注意

若启用且配置完自定义主题,再次编辑取消勾选并保存时会完全删除自定义主题配置

启用后,页面右侧为自定义主题编辑区

  • 编辑区按类型划分了若干个编辑块
  • 每个编辑块点击可展开或折叠

自定义主题

(1) “全局样式”编辑块

自定义主题

  • 背景色: 设置整个仪表盘的背景颜色
  • 背景图: 点击“上传"按钮设置整个仪表盘的背景图片。注意,如果同时设置了背景色和上传背景图,则背景图设置会覆盖背景色。再次点击按钮可重新上传背景图,点击“X”按钮可以删除背景图
  • 隐藏标题区: 隐藏默认的标题区域
  • 主题: 设置部分按钮、文本等的高亮颜色
  • 文本: 可以设置大部分卡片内文本的颜色
  • 边框: 可以设置选择框、下拉框、表格等的边框颜色
  • 卡片背景: 可以设置所有未自定义背景的卡片背景颜色
  • 卡片背景图: 点击“上传"可设置所有的卡片背景图片。注意,如果同时设置了背景色和上传背景图,则背景图设置会覆盖背景色。再次点击按钮可重新上传背景图,点击“X”按钮可以删除背景图
  • 卡片内边距: 设置卡片内的边距大小
  • 图表主题: 可设置一系列颜色,该颜色列表会应用到所有图形类报表的卡片中,可以自行增加或者减少
  • 图表标签: 设置图形报表标签的字体样式

注意

图表主题最多可以设置 50 个颜色,当图表的图例数量超过颜色列表的数量时,会循环从颜色列表中取色.颜色数量为 0 时,使用默认图表主题

自定义主题

(2) “基础样式”编辑块

自定义主题

  • 滚动条: 设置仪表盘中出现的滚动条的颜色
  • 切页按钮: 设置部分卡片下页码区域的切换页码(上一页、下一页)按钮被禁用时的颜色
  • 表格
    • 背景: 设置表格背景颜色
    • 表头: 设备表头背景颜色
    • 表格行: 设备表格行背景颜色
  • 下拉框
    • 背景: 设置下拉框背景颜色
    • 悬停项背景: 设置下拉框悬停背景颜色
  • 容器阴影
    • 阴影: 设置容器内阴影的颜色
    • 模糊半径: 设置容器内组件阴影的模糊半径
    • 扩展半径: 设置容器内组件阴影的模糊半径

自定义主题

(3) “标题样式”编辑块

自定义主题

该区域用于设置仪表盘标题字体的样式

自定义主题

(4) “全局卡片标题样式”编辑块

自定义主题

该区域用于全局设置仪表盘卡片的标题字体的样式和位置

自定义主题

(5) “退出演示按钮”编辑块

该区域用于设置仪表盘“退出演示(全屏)”按钮文本的字体样式

自定义主题

(6) “切换箭头”编辑块

自定义主题

该区域设置仪表盘中的报表全屏轮播时切换箭头的背景及悬停时的背景的颜色。编辑时无法预览,可在展示时查看。

自定义主题

(7) “卡片样式”编辑块

当仪表盘已添加若干卡片,鼠标移入某卡片区域时该卡片周围会有高亮的阴影。点击该卡片会选中卡片,且卡片会显示高亮边框。点击仪表盘空白区域取消选中卡片。

同时编辑区会动态出现所有卡片都有的“卡片样式”编辑块,以及若干针对该类型卡片的特定编辑块。

自定义主题

  • 不透明度: 设置卡片的不透明程度(范围 0~1,数值越小卡片透明化越明显)
  • 文本: 设置卡片内文本的颜色
  • 背景: 设置卡片背景颜色
  • 背景图: 点击“上传"可设置背景图片。注意,如果同时设置了背景色和上传背景图,则背景图设置会覆盖背景色。再次点击按钮可重新上传背景图,点击“X”按钮可以删除背景图
  • 内边距: 设置卡片内的边距大小
  • 圆角值: 可使卡片呈圆角矩形
  • 边框: 设置卡片的边框颜色、边框宽度以及边框线型;边框特效共有 5 种。使用边框特效时,只能配置边框颜色;特效配合透明背景效果更好
  • 卡片标题: 设置该卡片的标题字体样式、位置,也可隐藏标题
  • 卡片内容:设置内容与卡片边缘的距离

注意

设置单个卡片的样式时,全局卡片样式会被覆盖

自定义主题

(8) “地图”编辑块

当选中地图组件时,会出现地图样式编辑框,可根据需要选择不同的地图主题。

自定义主题

(9) “表头”、“数据区”编辑块(列表类型的报表卡片和实时故障卡片会包含该编辑)

# 表头

自定义主题

  • 表格: 可设置表格的背景颜色
  • 表头: 可以设置表头的背景颜色(会覆盖基础样式中的表格配置)
  • 边距: 设备表头单元格上下左右的边距
  • 对齐: 设置表头文本的对齐方式及其字体样式
  • 字号: 设置表头字号大小
  • 字体: 设置表头字体
  • 颜色: 设置表头字体颜色

自定义主题

# 数据区

自定义主题

  • 背景: 可设置表格数据区的背景颜色
  • 边距: 设备表头单元格上下左右的边距
  • 对齐: 设置表头文本的对齐方式及其字体样式
  • 字号: 设置表头字号大小
  • 字体: 设置表头字体
  • 颜色: 设置表头字体颜色
  • 边框: 设置表格数据区域的边框颜色以及宽度
  • 斑马纹: 设置表格偶数行的背景和文字的颜色(除故障表格外的其他表格组件均支持)

自定义主题

(10)表格类型报表-----[表头,数据区,分页]

  • 表头、数据区: 设置的内容同上
  • 分页: 设置表格分页个数

自定义主题

(11)扇形类型报表-----[图例,主题,饼图]

  • “图例”: 设置图形报表中图例显示与否、朝向、间距及其字体样式

自定义主题

  • “主题”: 点击“增加”或“减少”按钮,可设置一系列颜色,该颜色列表会应用到当前图形报表卡片中

注意

最多设置 50 个颜色。 当图表的图例系列数量超过颜色列表的数量时,会循环从颜色列表中取色
颜色数量不为 0 时,该主题会覆盖掉全局样式中设置的全局图表主题
颜色数量为 0 时,使用全局图表主题或者默认图表主题

自定义主题

  • “饼图”
    • 圆心 X/Y: 设置圆心到 X/Y 轴的距离
    • 内/外半径: 设置扇形的内/外半径
    • 玫瑰图: 可以选择扇形设置为等比形式/百分比/无
    • 百分比: 可以设置扇形/环形/默认
    • 标签: 设置标签的字体样式

自定义主题

自定义主题


(12)折线类型报表-----[图例,主题,折线图,网格,坐标轴,区域缩放]

  • “图例/主题”: 功能同扇形图
  • “折线图”
    • 平滑曲线: 使折线呈平滑过渡的效果
    • 显示图形: 是否显示设置折线上的图形
    • 图形大小: 设置折线上的图形大小
    • 图形状态: 设置折线上的图形形状
    • 面积图: 勾选此项,才可设置渐变色和透明度

自定义主题

自定义主题

“网格” :

  • 主要设置折线图上下左右的距离,选中自定义距离才可进行设置

自定义主题

自定义主题

“坐标轴”:

  • 主要设置 x/y 坐标轴相关的轴线、刻度、网格和标签的颜色,以及标签的字体样式

自定义主题

自定义主题

“区域缩放”:

  • 主要设置 x/y 坐标轴缩放栏相关的背景、手柄、文本和距离的设置

自定义主题

自定义主题

(13)柱状图类型报表-----[图例,主题,网格,坐标轴,区域缩放,柱状图]

  • “图例,主题,网格,坐标轴,区域缩放” 功能同折线图
  • “柱状图”
    • 最大宽度: 设置柱状图宽度的百分比

自定义主题

(14) “故障”编辑块-----[表头,数据区,故障]

  • “表头,数据区” 功能同 “表头”、“数据区”编辑块
  • “故障”
    • 可设置故障确定按钮,故障类型的颜色

自定义主题

(15) “指标卡”编辑块

  • 可设置指标卡报表中标题、数值的字体样式。

自定义主题

(16) “切换组件”编辑块

  • 可设置切换组件的标题字体样式

自定义主题

(17) “天气”编辑块

  • 可设置地点、天气、温度和刷新时间的字体样式以及是否显示
  • 点击同步按钮则会同步当前标签的样式到其他标签下
  • 天气标签下还可设置天气图标的大小
  • 布局
    • 可设置地点、天气、温度和刷新时间的布局形式
    • 可设置是否隐藏标题
    • 可设置特殊布局样式

自定义主题

自定义主题

(18)“文本”编辑块

  • 可设置文本组件的标题字体样式

自定义主题

(19)“时间”编辑块

  • 可设置时间组件的标题字体样式

自定义主题

(20)“设备树”编辑块

  • 可设置选项的字体样式
  • 可设置树形图的背景色、边框色
  • 可设置树箭头的颜色及大小
  • 可设置鼠标悬停在选项时的背景
  • 可设置选中项的文本颜色

自定义主题

自定义主题

(21)“分组树”编辑块

  • 可设置选项的字体样式
  • 可设置树形图的背景色、边框色
  • 可设置树箭头的颜色及大小
  • 可设置鼠标悬停在选项时的背景
  • 可设置选中项的文本颜色

自定义主题

自定义主题