主题控制信息图的全局观感,提供能力包括:
- 配置主色、色板、背景等
- 针对文本、图形等特定部位调样式
- 应用风格化效果
可通过 options.theme 进行配置:前者指定已注册主题名,后者做细粒度覆写。
主色及背景色
colorPrimary / colorBg 决定主色与背景色。主色常用于装饰元素(如图标、连接线),未配置色板时也会作为数据项默认色。
下面的示例中,使用了默认主色 #FF356A ,背景色为白色。
Syntax input
下面的示例中,使用了自定义主色 #61DDAA ,背景色为暗色 #1F1F1F 。
Syntax input
色板
色板为数据项提供颜色集合,常用于区分类别。通过 theme.palette 配置。
色板类型定义见Palette,其支持 string、string[] 和函数类型。
传入 string 时,表示使用内置或者自定义的色板名称,下面的示例中,使用了内置的 AntV 色板。
Syntax input
传入 string[] 时,表示使用指定的颜色数组作为色板,下面的示例中使用了三个颜色作为色板。
Syntax input
传入函数时,类似于 D3 的颜色生成函数,可以根据数据动态生成颜色,下面的示例中,使用了一个简单的颜色生成函数,根据数据项的索引和总数生成渐变色。
特定部分样式
theme 中以下配置项用于对信息图中特定部分进行样式调整:
| 配置项 | 说明 |
|---|---|
base.global | 配置全局图形样式 |
base.text | 配置全局字体样式 |
base.shape | 配置全局shape图形样式 |
| title | 信息图标题样式 |
| desc | 信息图描述样式 |
| shape | shape图形样式 |
item.icon | 数据项图标样式 |
item.label | 数据项标题样式 |
item.desc | 数据项描述样式 |
item.value | 数据项数值样式 |
下面的例子中将背景色改为暗色,并调整了全局字体为手写字体,数据项标题颜色设置为 #FF356A 。
Syntax input
风格化配置
风格化为图形添加特定效果,强化视觉吸引力。通过 theme.stylize 选择内置风格并传入参数。
常用的风格化类型包括:
- rough:应用手绘风格,使图形看起来像是手工绘制的。
- pattern:应用图案填充,为图形添加重复的图案效果。
- linear-gradient / radial-gradient:应用渐变填充,为图形添加线性或径向渐变效果。
通过 theme.stylize.type 指定风格化类型,并通过 theme.stylize 传入对应的配置参数。
下面的示例中分别展示了这几种风格化效果:
手绘风格(rough):
Syntax input
图案填充(pattern):
Syntax input
渐变填充(linear-gradient):
Syntax input