antv/g6使用教程及图配置

深入解析AntVG6：JavaScript图形引擎的可视化力量

最新推荐文章于 2025-08-02 18:25:04 发布

原创

最新推荐文章于 2025-08-02 18:25:04 发布 · 4.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #g6 #antv

本文介绍了蚂蚁金服AntV团队的G6图形引擎，它支持丰富的图形元素、交互性、自动布局和图表编辑，适用于数据分析和信息可视化。文章详细展示了如何在HTML和React中使用G6，并列举了关键配置选项。

介绍

G6 是一款由蚂蚁金服 AntV 团队开发的 JavaScript 图形引擎，用于构建各种交互式可视化图形，包括但不限于图表、网络拓扑图、关系图、流程图等。无论是数据分析、决策支持，还是信息可视化，G6 都是一个强大的工具。

以下是 G6 的主要特点和能力：

丰富的图形元素支持：G6 支持多种图形元素，包括节点、边、群组、标签等，这些元素可以被自定义和样式化，以创建各种类型的图形。
交互性：G6 可以实现各种交互功能，如缩放、平移、拖拽、连线、节点拖拽等，以提供丰富的用户体验。
自动布局：G6 提供了多种自动布局算法，如树状布局、圆形布局、力导向布局等。
图表编辑：G6 支持图表的编辑功能，包括添加、删除、编辑节点和边，以及撤销和重做等功能。
扩展性：G6 允许开发人员根据项目需求轻松自定义和扩展功能，包括自定义渲染和交互行为。
多平台支持：G6 可以在浏览器和 Node.js 等环境中使用，这意味着你可以构建 Web 应用和服务器端应用。

使用

HTML中CDN使用

<!DOCTYPE html>
<html>

<head>
  <title>AntV G6 Demo</title>
</head>

<body>
  <div id="container"></div>

  <!-- 引用g6 -->
  <script src="https://cdn.jsdelivr.net/npm/@antv/g6@3.7.0/dist/g6.min.js"></script>

  <script>
    // 创建 G6 图表实例
    const container = document.getElementById('container');
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const graph = new G6.Graph({
   
   
      container: container,
      width: width,
      height: height,
      defaultNode: {
   
   
        size: 20,
        style: {
   
   
          fill: '#C6E5FF',
          stroke: '#5B8FF9',
          lineWidth: 0.3,
        },
        labelCfg: {
   
   
          style: {
   
   
            fontSize