AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise

目录

  • Overview
  • 主色及背景色
  • 色板
  • 特定部分样式
  • 风格化配置
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档
核心概念

主题

主题控制信息图的全局观感,提供能力包括:

  • 配置主色、色板、背景等
  • 针对文本、图形等特定部位调样式
  • 应用风格化效果

可通过 options.theme 进行配置:前者指定已注册主题名,后者做细粒度覆写。

主色及背景色

colorPrimary / colorBg 决定主色与背景色。主色常用于装饰元素(如图标、连接线),未配置色板时也会作为数据项默认色。

下面的示例中,使用了默认主色  #FF356A  ,背景色为白色。

Syntax input

下面的示例中,使用了自定义主色  #61DDAA  ,背景色为暗色  #1F1F1F  。

Syntax input

色板

色板为数据项提供颜色集合,常用于区分类别。通过 theme.palette 配置。

色板类型定义见Palette,其支持 string、string[] 和函数类型。

传入 string 时,表示使用内置或者自定义的色板名称,下面的示例中,使用了内置的 AntV 色板。

Syntax input

传入 string[] 时,表示使用指定的颜色数组作为色板,下面的示例中使用了三个颜色作为色板。

Syntax input

Note

当数据项数量超过色板长度时,会循环使用色板中的颜色。例如,色板中有 3 种颜色,而数据项有 5 个,则第 4 个数据项会使用色板中的第 1 种颜色,第 5 个数据项会使用色板中的第 2 种颜色。

传入函数时,类似于 D3 的颜色生成函数,可以根据数据动态生成颜色,下面的示例中,使用了一个简单的颜色生成函数,根据数据项的索引和总数生成渐变色。

特定部分样式

theme 中以下配置项用于对信息图中特定部分进行样式调整:

配置项说明
base.global配置全局图形样式
base.text配置全局字体样式
base.shape配置全局shape图形样式
title信息图标题样式
desc信息图描述样式
shapeshape图形样式
item.icon数据项图标样式
item.label数据项标题样式
item.desc数据项描述样式
item.value数据项数值样式

Note

shape图形 指在自定义结构、数据项时,配置了 data-element-type="shape" 参数的图形。

下面的例子中将背景色改为暗色,并调整了全局字体为手写字体,数据项标题颜色设置为  #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
Previous数据
Next资源

AntV Infographic
Copyright © Ant Group Co.
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generated Infographics
GitHub
Contribute
Friendly Links
AntV
G2
G6
L7