可视化—AntV G6实现节点连线及展开收缩分组

AntV 是蚂蚁金服全新一代数据可视化解决方案，主要包含数据驱动的高交互可视化图形语法G2，专注解决流程与关系分析的图表库 G6、适于对性能、体积、扩展性要求严苛的场景。

demo使用数字模拟真实的节点及分组数据。combo内的nodes亦是使用随机数生成，节点之前的连线edges由节点从小到大依次连接 ，大家在用的时候，可以注意一下连线对象的 source 和 target 两个属性即可

安装模块依赖 ：npm install @antv/g6

main.js 中引入，并绑定Vue原型方法

import G6 from '@antv/g6';
import Vue from 'vue';

Vue.prototype.G6 = G6;

创建Graph.vue

收缩图:

展开图: