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