数据

AntV Infographic 设计了一种灵活且易用的数据配置方式，它能够简单的表达一维数据和层级数据，并支持一定程度的扩展性。后续我们会完善对于关系数据等复杂数据结构的支持。

以下为数据的类型定义：

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

一维数据/列表数据

下面是一个简单的一维数据示例：

new Infographic({
  // 其他配置项...
  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 字段进行嵌套，例如：

new Infographic({
  // 其他配置项...
  data: {
    title: '信息图标题',
    desc: '这是信息图的描述文本',
    items: [
      {
        label: '一级数据项 1',
        children: [
          {
            label: '二级数据项 1-1',
          },
          {
            label: '二级数据项 1-2',
          },
        ],
      },
      {
        label: '一级数据项 2',
        children: [
          {
            label: '二级数据项 2-1',
          },
        ],
      },
    ],
  },
});