g6数据说明

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
}
]

  },