使用 AntV 创建信息图 on OINK

流程、时间线与循环

Mon, 01 Jan 0001 00:00:00 +0000

不同序列模板回答不同问题。横向流程强调有序交接，时间线强调先后顺序，循环则强调末尾阶段会再次回到起点。相邻正文必须说明真正重要的是哪一种关系。

横向流程

简短的从左到右流程可以使用 list-row-simple-horizontal-arrow。请缩短标签，并在窄屏下确认渲染顺序仍然清晰。

{{< infographic >}}
infographic list-row-simple-horizontal-arrow
data
  title 文档交付
  items
    - label 规划
      desc 明确读者与预期结果
    - label 撰写
      desc 完成最小而完整的页面
    - label 评审
      desc 核对事实、语言与链接
    - label 交付
      desc 构建并验证线上路由
{{< /infographic >}}

该流程从规划进入撰写和评审，最后得到经过单独验证的线上结果。

时间顺序

时间或版本先后是主要关系时，使用 sequence-timeline-simple。

信息图布局、漏斗与主题

Mon, 01 Jan 0001 00:00:00 +0000

AntV 模板由结构、数据项与标题样式组成。切换模板也会改变隐含关系，因此应先审查含义，再考虑外观。下面的示例只使用扁平 items 数据，不包含远程图标。

分组事实网格

多项事实围绕同一主题，但没有固定顺序时，可以使用 list-grid-badge-card。

{{< infographic >}}
infographic list-grid-badge-card
data
  title 文档质量门槛
  items
    - label 准确性
      desc 命令与版本符合产品事实
    - label 覆盖度
      desc 包含必要概念与任务
    - label 语言
      desc 中英文保持等价
    - label 交付
      desc 线上路由与评审源码一致
{{< /infographic >}}

这四项门槛彼此并列，不应把其中一项画成另一项的前提。

逐步收窄的漏斗

每个阶段都会有意减少总体数量时，使用 sequence-funnel-simple。请加入 value 字段，并在正文中重复这些数字。