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

作者:互联网

2026-03-24

PPT

这款插件专为Slidev用户打造,能够快速集成AntV信息图图表,帮助开发者轻松制作专业级演示文稿。下面详细介绍具体安装和使用方法。

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 字段,值为点击次数。booleanfalse
isExportPdf是否导出 PDF 格式。导出时会默认将 click 设置为 falsebooleanfalse
  1. 如需导出 PDF 格式,请为 InfographicBox 组件增加 isExportPdf 属性,导出的时候会默认将 click 设置为 false
  2. click 主要用于演示效果,clicktrue 时,需要单独占一页,设置 clicktrue 后,并添加 clicks 点击次数之后的效果需要自行点击确认。

通过上述步骤,开发者可以充分利用AntV信息图丰富的图表资源,显著提升Slidev演示文稿的可视化效果和专业度。

相关标签:

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