前言
最近在项目中有遇到拓扑图的展示,刚好项目中有引入g6插件,于是边研究边做项目,记录一下g6的学习过程。
介绍
G6是支付宝前端团队推出的一款功能强大、易于使用的JavaScript图形库,可实现流程图,拓扑图等实现图形可视化。
官网
一.安装
1.命令
npm install --save @antv/g6
2.安装成功![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f8796607d9158f64100beca5c8a64f7c.png)
二.按需引入
在需要用到的g6组件的文件中引入即可
import G6 from '@antv/g6'
三.第一个简单的demo
1.安装引入之后就可以展示一个简单的demo,具体说明如下图:
2.具体效果如下图(简单的展示):
只是简单的展示,不可拖拽,不可放大缩小,不可点击
3.完整代码:
<template>
<div>
<div id="containerID" class="containeroo"></div>
</div>
</template>
<script>
import G6 from '@antv/g6'
export default {
name: 'g6',
mounted () {
this.initComponent()
},
data () {
return {
graghData: {}, // 拓扑图数据
graph: undefined, // g6对象
}
},
methods: {
/**
* 创建G6,并对G6的一些设置
* */
initComponent () {
// 拓扑图数据
this.graghData = {
// 节点数据
nodes: [
{
id: 'node1',
label: '总的类目',
ip: '192.168.1.1',
status: 0
},
{
id: 'node2',
label: '分类1',
ip: '192.168.1.2',
status: 1
},
{
id: 'node3',
label: '分类2',
ip: '192.168.1.3',
status: 2
},
{
id: 'node4',
label: '分类3',
ip: '192.168.1.4',
status: 3
},
{
id: 'node5',
label: '分类4',
ip: '192.168.1.8',
status: 4
}
],
// 节点连线关系
edges: [
{
source: 'node1',
target: 'node2'
},
{
source: 'node1',
target: 'node3'
},
{
source: 'node1',
target: 'node4'
},
{
source: 'node1',
target: 'node5'
}
]
}
// 创建g6实例
this.graph = new G6.Graph({
container: 'containerID',
width: 600,
height: 800,
layout: {
type: 'force'/* */
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点,【2use22use22use2节点连线高亮】
},
// 节点样式修改
defaultNode: {
size: 20 // 当节点为一个点时可设置
},
animate: true
})
// 接收数据并渲染
this.graph.data(this.graghData)
this.graph.render()
}
}
}
</script>
下一篇:antvG6 实现画布拖拽放缩,节点拖拽
转载请注明原作者
不喜勿喷,欢迎补充~~