AntV
AntV Infographic
文档
参考
示例
AI
企业版

目录

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

主题

AntV Infographic 中主题提供以下能力:

  • 配置颜色及色板(如:主色、色板、背景色等)
  • 针对信息图中特定部分(如:文本、图形等)进行样式调整
  • 风格化配置

主题在配置中可以通过 options.theme 和 options.themeConfig 进行配置, 其中 options.theme 用于指定已经注册的主题名称,options.themeConfig 用于对主题进行更细粒度的配置和覆盖。

主色及背景色

主题配置中 colorPrimary 和 colorBg 用于指定信息图的主色和背景色。主色通常用于数据项无关的装饰性元素,如图标、连接线等,当没有配置色板时,数据项会将主色作为默认颜色。

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

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

色板

色板用于为数据项指定颜色集合,通常用于区分不同的数据类别。可以通过 themeConfig.palette 来配置色板。

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

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

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

Note

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

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

特定部分样式

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

配置项说明
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 。

风格化配置

风格化是指将信息图中的图形元素应用特定的视觉效果,以增强信息图的视觉吸引力和表达力。AntV Infographic 提供了一些内置的风格化类型,可以通过 themeConfig.stylize 进行配置。

常用的风格化类型包括:

  • rough:应用手绘风格,使图形看起来像是手工绘制的。
  • pattern:应用图案填充,为图形添加重复的图案效果。
  • linear-gradient / radial-gradient:应用渐变填充,为图形添加线性或径向渐变效果。

通过 themeConfig.stylize.type 指定风格化类型,并通过 themeConfig.stylize 传入对应的配置参数。

下面的示例中分别展示了这几种风格化效果:

手绘风格(rough):

图案填充(pattern):

渐变填充(linear-gradient):

上一章数据
下一章资源

AntV Infographic
Copyright © Ant Group Co.
文档
快速开始
核心概念
自定义设计
信息图理论
API 参考
JSX
API
设计资产
更多
更多示例
AI 在线体验
GitHub
参与贡献
友情链接
AntV
G2
G6
L7