AntV Infographic 的数据配置既简单又灵活,内置支持列表、序列、层级、对比、关系、统计等结构数据,并预留扩展空间。
数据类型定义:
TS
export interface BaseData { title?: string; desc?: string; items?: ItemDatum[]; illus?: Record<string, string | ResourceConfig>; attributes?: Record<string, object>; [key: string]: any; } export type Data = | ListData | SequenceData | HierarchyData | CompareData | RelationData | StatisticsData; export type ItemDatum = | ListDatum | SequenceDatum | HierarchyDatum | CompareDatum | RelationNodeDatum | StatisticsDatum;
Data 是多种结构数据的联合类型,BaseData 提供标题、描述、数据项列表与插图映射等通用字段;ItemDatum 则是多种数据项的联合类型。完整说明见 Data 与 ItemDatum。
一维数据/列表数据
一维数据示例:
SYNTAX
data title 信息图标题 desc 这是信息图的描述文本 items - icon https://example.com/icon1.svg label 数据项 1 desc 这是数据项 1 的描述 - icon https://example.com/icon2.svg label 数据项 2 desc 这是数据项 2 的描述
序列数据
序列数据强调先后顺序,常用 sequences 字段描述:
SYNTAX
data title 迭代流程 desc 这是一个简单的序列示例 sequences - label 需求评审 - label 开发实现 - label 联调测试 order asc
层级数据
层级数据可通过 root 设置根节点,并在节点上用 children 递归嵌套:
SYNTAX
data title 信息图标题 desc 这是信息图的描述文本 root label 一级数据项 1 children - label 二级数据项 1-1 - label 二级数据项 1-2
对比数据
对比数据强调并列对比,可使用 compares:
SYNTAX
data title 方案对比 compares - label 方案 A value 80 - label 方案 B value 65
关系数据
关系数据用于描述节点与节点之间的连接关系,使用 nodes 定义节点,relations 定义连线:
SYNTAX
data title 系统关系 nodes - id api label API - id db label DB relations - from api to db direction forward
更多关系字段说明见 信息图语法。
统计数据
统计数据通过 values 提供数值项:
SYNTAX
data title 访问来源占比 values - label 搜索 value 62 - label 直达 value 38