slidev-addon-infographic 年终总结程序员必备的PPT精美图表slidev-addon-infog

slidev-addon-infographic 是为了在 Slidev 中快速添加 @antv/infographic 图表而设计的插件。

Slidev 是为开发者打造的演示文稿工具，它基于 Vue3 并集成了 Markdown 语法，使得创建演示文稿变得简单快捷，并支持导出 PPTX, PNG, PDF 格式。

@antv/infographic 是新一代声明式信息图可视化引擎，提供上百种图表类型，包括但不限于图表型、对比型、层级型、列表型、四象限型、关系型、顺序型等，补足程序员写PPT的短板。

创建 Slidev 项目

npm init slidev@latest

pnpm create slidev

yarn create slidev

添加 slidev-addon-infographic 插件

npm install slidev-addon-infographic

pnpm install slidev-addon-infographic

yarn add slidev-addon-infographic

将下面内容添加到项目 package.json 文件中：

...
  "slidev": {
    "addons": [
      "slidev-addon-infographic"
    ]
  }
...

接下来就可以在 Slidev 项目中使用 @antv/infographic 图表了。

---
addons:
  - slidev-addon-infographic
---

<InfographicBox :data="`infographic list-row-simple-horizontal-arrow
data
  items
    - label 步骤 1
      desc 开始
    - label 步骤 2
      desc 进行中
    - label 步骤 3
      desc 完成
`"></InfographicBox>

参数	描述	类型	默认值
`data`	信息图数据	string	-
`click`	是否响应Slidev点击动画，如果设置为 `true`，需要在 `frontmatter` 中添加 `clicks` 字段，值为点击次数。	`boolean`	`false`
`isExportPdf`	是否导出 PDF 格式。导出时会默认将 `click` 设置为 `false`。	`boolean`	`false`

如需导出 PDF 格式，请为 InfographicBox 组件增加 isExportPdf 属性，导出的时候会默认将 click 设置为 false 。
click 主要用于演示效果，click 为 true 时，需要单独占一页，设置 click 为 true 后，并添加 clicks 点击次数之后的效果需要自行点击确认。

我们可以在 @antv/infographic 编辑器中设计出符合需求的图表，然后将其复制到 Slidev 项目中。

下面是我的公众号，欢迎关注。关注后有新的功能点会及时收到推送。

前端功能点：实战为王！专注于汇总各种功能点，致力于打造一系列能够帮助工程师实现各种功能的想法思路的优质文章。