拓撲圖

1 在項目中使用 NPM 包引入
Step 1: 使用命令行在項目目錄下執行以下命令：
npm install --save @antv/g6
Step 2: 在需要用的 G6 的 JS 文件中導入：
import G6 from '@antv/g6';

2 在 HTML 中使用 CDN 引入

<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/antv/pkg/_antv.g6-{$version}/dist/g6.min.js">```


數據類型說明

  {

//******************初始樣式配置**********************
width: '', //容器寬度 N （Y、N是否必傳）
height: '', //容器高度 N
defaultNodeStyle: {
width: 30, //節點寬度 N
height: 30, //節點高度 N
img: '', //節點默認的圖片 N
},
defaultLabelCfg: {
fill: 'blue', //節點字體顏色 N
fontSize: 12,//節點字體大小 N
},
defaultEdgeStyle: {
stroke: '#7a9efb',//邊線的顏色 N
},
//******************數據配置**********************
// 數組嵌套，子節點children
id: 'root', //根節點id Y
label: '中心機', //節點文字 Y
isRoot: true,
state: '0', //狀態類型 0 正常狀態 1 網絡異常 2 數據庫
children: [ // 節點數據
{
id: 'c1', //唯一標識 id Y
label: 'A醫院中心機', //顯示文案 Y
state: '0', //狀態 N
description: ['1.網絡', '2.網絡', '3.網絡'],// N 異常狀態下提示，hover時顯示
img:' require('../assets/icon02.png'', // N 節點圖片，覆蓋默認圖片，可以是網絡圖片或本地圖片
children: [ // 節點數據
{
id: 'c1', //唯一標識 id Y
label: 'A醫院中心機', //顯示文案 Y
state: '0', //狀態 }, N
}]
},{
id: 'c2', //唯一標識 id Y
label: 'B醫院中心機', //顯示文案 Y
state: '0', //狀態 N
}
]

  },