vitepress-plugin-legend

简体中文

English

简体中文

English

主题

Infographic ​

AntV Infographic 是一个专注于信息图可视化的库，提供了 236+ 内置模板。

安装 ​

bash
npm install vitepress-infographic-preview
# or
yarn add vitepress-infographic-preview
# or
pnpm add vitepress-infographic-preview

配置 ​

1. 插件配置 ​

在 .vitepress/config.ts 中添加插件：

typescript
import { defineConfig } from 'vitepress';
import { vitepressInfographicPreview } from 'vitepress-infographic-preview';

export default defineConfig({
  markdown: {
    config: (md) => {
      vitepressInfographicPreview(md);
    },
  },
});

2. 组件注册 ​

在 .vitepress/theme/index.ts 中注册全局组件：

typescript
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import { initComponent } from 'vitepress-infographic-preview/component';
import 'vitepress-infographic-preview/dist/index.css';

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    initComponent(app);
  },
} satisfies Theme;

使用方式 ​

基础用法 ​

使用 Markdown 代码块创建信息图：

显示工具栏 ​

通过 frontmatter 控制工具栏：

从外部文件加载 ​

使用 PreviewInfographicPath 组件加载外部文件：

vue
<PreviewInfographicPath path="./chart.igf" showToolbar />

配置选项 ​

vitepressInfographicPreview 选项 ​

选项类型默认值描述
showToolbarbooleanfalse是否默认显示工具栏

PreviewInfographicPath 组件属性 ​

属性类型默认值描述
pathstring-信息图文件路径
showToolbarbooleanfalse是否显示工具栏

工具栏功能 ​

  • 放大/缩小：缩放信息图
  • 适应屏幕：重置缩放
  • 复制代码：复制信息图语法到剪贴板
  • 下载图表：将图表下载为 PNG 图片
  • 全屏：全屏预览图表

模板类型 ​

AntV Infographic 支持多种模板类型：

  • Chart（图表）：柱状图、饼图、折线图、词云等
  • Comparison（对比）：二元对比、层次对比、象限对比等
  • Hierarchy（层次）：思维导图、树形结构等
  • List（列表）：列表、网格、金字塔等
  • Quadrant（象限）：四象限图等
  • Relation（关系）：关系图、有向无环图等
  • Sequence（序列）：时间线、步骤、流程等

更多模板请参考 AntV Infographic Gallery。

相关链接 ​