AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise

目录

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

设计

设计(Design) 定义信息图的视觉呈现,对应配置对象中的 design 字段。它由三个核心元素组成:

  • 结构(structure):布局与组织方式
  • 标题(title):标题样式设计
  • 数据项(item/items):数据单元的视觉样式

所有设计资产本质上都是 JSX 组件。框架提供 JSX 渲染引擎 及内置组件库,并支持注册自定义组件。

结构

结构是信息图的视觉骨架,决定整体布局并承载标题、数据项等设计元素,也可按需求加入装饰。

通过 options.design.structure 配置结构,例如:

SYNTAX
design structure list-row # 其他结构配置项... # 其他配置项...

下图展示相同数据项在两种结构下的差异:左为 list-grid 网格,右为 list-pyramid 金字塔。

Note

结构设计差异较大,没有统一配置项,可通过注册不同结构组件实现。内置结构见内置结构。

标题

标题用于引导与说明。默认标题包含文本 title 与描述 desc,可按需配置。

标题样式通过 options.design.title 配置,具体文案通过 options.data.title 与 options.data.desc 传入:

SYNTAX
design title default align-horizontal left desc-line-number 2 # 其他标题设计配置项... # 其他设计配置项... data title 信息图标题 desc 这是信息图的描述文本 # 其他数据...

更多标题设计会持续增加。

数据项

数据项组件用于展示具体内容,是信息图的最小可视化单元。options.design 支持 item 与 items 两种形式,常用 item 配置单一数据项设计:

SYNTAX
design item simple-horizontal-arrow # 其他数据项设计配置项... # 其他配置项...

在层级结构等场景,可用 items 为不同层级设置不同设计:

SYNTAX
design items - level-1-item # 第一层级数据项设计 - level-2-item # 第二层级数据项设计

Note

同时存在 item 与 items 时,items 优先级更高。

下图为两种层级设计示例:一级数据项使用 circle-node,二级使用圆角矩形文本 pill-badge。

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
SYNTAX
design
structure list-row
# 其他结构配置项...
# 其他配置项...
SYNTAX
design
title default
align-horizontal left
desc-line-number 2
# 其他标题设计配置项...
# 其他设计配置项...
data
title 信息图标题
desc 这是信息图的描述文本
# 其他数据...
SYNTAX
design
item simple-horizontal-arrow
# 其他数据项设计配置项...
# 其他配置项...
SYNTAX
design
items
- level-1-item # 第一层级数据项设计
- level-2-item # 第二层级数据项设计