AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 编辑器
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档
快速开始

入门指南

信息图通过视觉语言压缩文字信息,让读者用最短时间抓住重点。本节在快速上手的基础上,补充完整的配置示例与要点说明。

下面是一个包含自定义设计、主题和资源加载的完整示例:

代码说明:

  • 资源加载器:通过 registerResourceLoader 从 Iconify 按需拉取 SVG。
  • 编辑器:设置 editable: true 启用交互式编辑功能。
  • 设计:design 字段自定义标题、结构与数据项类型及参数。
  • 主题:切换暗色主题并用 themeConfig 配置色板、字体、风格化。
  • 数据:传入标题与数据项(标签、描述、时间、图标)。

这里没有使用 template 字段,而是直接给出设计配置。可以把模板理解为一组预置的 design 与主题组合,便于快捷调用。

更多细节可继续阅读:

  • 信息图语法
  • 核心概念-资源
  • 核心概念-数据
  • 核心概念-主题
  • 核心概念-设计
Previous快速开始
Next信息图语法

AntV Infographic
Copyright © Ant Group
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generator
GitHub
Contribute
Related Projects
AntV
G2
G6
L7