g6图形化开发 - vue项目（结尾处附代码）

G6参考文档[https://g6.antv.vision/zh](https://g6.antv.vision/zh)

官方简介：G6是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。

初始化—>加载数据—>渲染—>更新—>销毁
G6.Graph、data(data)、render()、changeData(data)、clear()

初始化

1. 页面mounted的，初始化G6实例，以及默认点、边属性
2. 注册自定义边样式
3. menu自定义

加载数据

graph.data(this.data)

渲染

graph.render()

更新

1. 新增点

graph.addItem("node", {
     label: e.name,
     resource_id: e.resourceId,
     resource_type: e.resourceType,
     code: e.code,
     x: e.x + 150 * (i + 1),
     y: e.y + 100 * (i + 1),
     img: imageName,
})

  边的新增，可以在初始化G6的时候，在models的defaults中加入"create-edge"
2. 删除点、边

graph.removeItem(_cfg.id)

3. G6布局样式调整

graph.updateLayout({
     type: "grid",
     begin: [0, 0], // 可选，
     preventOverlap: true, // 可选，必须配合 nodeSize
     preventOverlapPadding: 40, // 可选
     nodeSize: 60, // 可选
     condense: false, // 可选
     rows: 5, // 可选
     cols: 5, // 可选
     sortBy: "degree", // 可选
     workerEnabled: true,
})    

销毁

graph.clear()

 

• 附上项目部分代码

<template>
    <div id="topo-container">
      <div id="mountNode"></div>
      <!-- 新增连线弹窗 -->
      <el-dialog
        title="关系选择"
        :visible.sync="relationVisible"
        width="350px">
        <el-select v-model="relate" placeholder="请选择" value-key="id">
          <el-option
            v-for="item in relations"
            :key="item.id"
            :label="item.name"
            :value="item">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="relationVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSaveRelation">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import G6 from "@antv/g6";
  import { getTopoValue, getMdRelation } from "@/a