AntV Infographic 的数据配置既简单又灵活,内置支持一维数据与层级数据,并预留扩展空间;后续会补充对关系数据等复杂结构的支持。
数据类型定义:
TS
export interface Data { title?: string; desc?: string; items: ItemDatum[]; [key: string]: any; } export interface ItemDatum { icon?: string | ResourceConfig; label?: string; desc?: string; value?: number; illus?: string | ResourceConfig; children?: ItemDatum[]; [key: string]: any; }
Data 包含标题、描述、数据项列表,并允许扩展字段;ItemDatum 支持图标、标题、描述、数值、插图、子项等字段,同样可扩展。完整说明见 Data。
一维数据/列表数据
一维数据示例:
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 的描述
层级数据
层级数据可通过 children 递归嵌套:
SYNTAX
data title 信息图标题 desc 这是信息图的描述文本 items - label 一级数据项 1 children - label 二级数据项 1-1 - label 二级数据项 1-2 - label 一级数据项 2 children - label 二级数据项 2-1