介绍
有类似于 mermaid 的 markdown 语法，在 markdown 编辑器中使用比较适用。
import { Infographic } from '@antv/infographic';
const infographic = new Infographic({
container: "#container",
height: 240,
editable: true,
});
const syntax = `
infographic list-row-horizontal-icon-arrow
data
title 互联网技术演进史
desc 从Web 1.0到AI时代的关键里程碑
items
- time 1991
label 万维网诞生
desc Tim Berners-Lee发布首个网站，开启互联网时代
icon mdi/web
- ...
`
infographic.render(syntax);
接入API 设计
接入后用户如下使用：
<Infographic width="100%" height={300}>
infographic list-row-horizontal-icon-arrow
data
title 互联网技术演进史
desc 从Web 1.0到AI时代的关键里程碑
items
- time 1991
label 万维网诞生
desc Tim Berners-Lee发布首个网站，开启互联网时代
icon mdi/web
- ...
</Infographic>就能转化成 infographic 的渲染出对应的图形。
开发流程
仔细阅读infographic 的使用文档，有助于你开封装 api https://infographic.antv.vision/learn
- 参考 QRCode 组件实现一个 Infographic 组件，接口参数按照上年的设计
- 接入到编辑器渲染流程中
- 自己判断下是否需要增加案例，readme 是否需要修改
要求
- 使用的是 @antv/infographic 库
- 保持代码简洁，精炼
- 晋江不要修改其他代码，减少代码 diff
介绍
有类似于 mermaid 的 markdown 语法，在 markdown 编辑器中使用比较适用。
接入API 设计
接入后用户如下使用：
就能转化成 infographic 的渲染出对应的图形。
开发流程
仔细阅读infographic 的使用文档，有助于你开封装 api https://infographic.antv.vision/learn
要求