# g6-example

**Repository Path**: lore/g6-example

## Basic Information

- **Project Name**: g6-example
- **Description**: 一个使用antV G6实现自定义节点图表的例子，同时使用了V4(4.8.21)版本和V5(5.0.51)版本的多种不同方式
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-16
- **Last Updated**: 2026-01-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#  g6-example

## 简介

一个使用antV G6实现自定义节点图表的例子，同时使用了V4(4.8.21)版本和V5(5.0.51)版本的多种不同方式。项目代码基于官网V4版本的一个JSX示例，大量使用Gemini迭代实现，然后人为进行代码微调优化，极少手动编写代码（千问提供的代码基本不能使用，作为对比参考的作用）

- a. v4：JSX字符串（XML）方式自定义节点实现（注册jsx字符串节点）

- b. v4-draw: draw方式自定义节点实现

- c. v4-vue: vue方式自定义节点实现（tsx代码，使用G6 svg渲染引擎）

- d. v5：draw自定义节点（继承Rect重写render）

- e. v5-vue: vue h函数实现自定义节点（g6-extension-vue插件VueNode类型）

- f. v5-tsx: vue tsx代码实现（与v5-vue语法的差别）

- g. v5-html: 直接使用V5版本html的内置类型

- h. v5-html-render: 自定义实现html节点（继承HTML重写render）

[更多说明](./docs/overview.md)

## 开发

项目是基于 vitesse-nuxt 构建 ts 应用（nuxt3 + vue3 + element-plus + unocss），node要求 node 20.19+ 或 22.12+ 及以上

- 安装

```sh
pnpm install
```

- 运行

```sh
pnpm run dev
```

- 打包

```sh
pnpm run generate
```

- Lint with [ESLint](https://eslint.org/)

```sh
pnpm run lint
```


## 特点

- 画布自适应页面

- 自定义节点

- 网格背景

- 工具栏菜单

- 连接线：当前使用默认连接线，自定义连接线自由发挥

## 页面

- 4.8.21 版本：JSX字符串（XML）方式自定义节点实现

![初始化](./docs/images/v4.png)

- 5.0.51 版本：draw自定义节点（继承Rect重写render）

![数据表](./docs/images/v5.png)


## 附录

- 本项目由Anthony Fu (antfu) 的启动模板vitesse-nuxt构建，[详见 https://github.com/antfu/vitesse-nuxt](https://github.com/antfu/vitesse-nuxt)

## 参考

- G6官方文档：https://g6.antv.antgroup.com/

- Gemini：https://gemini.google.com/app

- 千问：https://www.qianwen.com/