Antv G6入门之旅--combo图

原创

已于 2023-10-24 10:01:53 修改 · 4.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #数据可视化 #anti-design-vue #前端框架 #javascript #1024程序员节

于 2023-10-23 17:36:39 首次发布

什么是AntV G6

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight，为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js，当我遇见 AntV G6 后，突感惊喜，其内含丰富的效果与强大的功能。相对于 ECharts，AntV G6 的图表种类更多，也更灵活，更容易上手；而相对于 D3.js，AntV G6 的 API 更为简单易用，适合快速上手。

基于 G6，用户可以快速搭建自己的 图分析 或 图编辑 应用。

如果您还没有使用过 G6，建议通过快速上手抢先体验 G6 的魅力。

G6 的特性

G6 作为一款专业的图可视化引擎，具有以下特性：

优秀的性能：支持大规模图数据的交互与探索；
丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义；
可控的交互：内置 10+ 交互行为，支持自定义交互；
强大的布局：内置了 10+ 常用的图布局，支持自定义布局；
便捷的组件：优化内置组件功能及性能；
友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型推断。

除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。

G6 文档

安装

1 在项目中使用 NPM 包引入

Step 1: 使用命令行在项目目录下执行以下命令：

npm install --save @antv/g6

Step 2: 在需要用的 G6 的 JS 文件中导入：

import G6 from '@antv/g6';

2 在 HTML 中使用 CDN 引入

// version <= 3.2

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

// version >= 3.3

<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>

// version >= 4.0

<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>