最近很多业务场景都会需要用到拓扑图，翻找了很多资料，最后选择了antV/g6，主要原因有以下几点：

　　1、阿里出品，所以框架的成熟性有保障

　　2、业务场景契合（1、规则拓扑图；2、动画流向：每个节点会有流向动画）

　　3、更容易上手（个人愚见）

话不多说，先附上效果图，如下：

　　

代码讲解如下:

　　

代码量不多，我封装为一个小组件，页面数据也分离出去，很适合小白直接拿来使用，有不懂的可以一块讨论，虽然代码量不多，但是从开始撸到做出成果也花了不少时间，希望用得到的小伙伴不要吝啬，多多宣传，免费点亮一下star！谢谢了。最后附上 源代码地址：https://github.com/WangHao1221/test-antV-g6/

vue结合antV/g6 实现网络拓扑图的更多相关文章

  1. antV G6流程图在Vue中的使用

    最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...

  2. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  3. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  4. HTML5 网络拓扑图性能优化

    HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font).文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大 ...

  5. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  6. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  7. 矢量Chart图表嵌入HTML5网络拓扑图的应用

    使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...

  8. 网络/运维工程师visio2013模具图标 绘制漂亮的网络拓扑图 狮子XL工程师美学思想

    visio2013狮子XL自定义运维模具下载: 链接:http://pan.baidu.com/s/1bo779Kz 密码:xh3s 狮子XL 的美学思想: 1,一次痛苦,一生幸福. 之前,在绘制网络 ...

  9. 快速开发基于 HTML5 网络拓扑图应用1

    今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...

随机推荐

  1. 截取一段时间内的log日志

    可以使用sed命令对log文件进行抽取操作:1,sed查看某时间段到现在的系统日志:sed -n '/May 20 17/,$p' /var/log/messages | less2,sed 截选时间 ...

  2. Linux shell脚本之 if条件判断 （转）

    IF条件判断 1.基本语法: if [ command ]; then 符合该条件执行的语句 fi 2.扩展语法: if [ command ];then 符合该条件执行的语句 elif [ comm ...

  3. autorelease基本使用

    1.autorelease基本概念 autorelease是一种支持引用计数的内存管理方式,只要给对象发送一条autorelease消息,会将对象放到一个自动释放池中,当自动释放池被销毁时,会对池子里 ...

  4. NSString 类介绍及用法

    1.NSString常见方法 NSString是 Objective-C 中核心处理字符串的类之一 创建常量字符串,注意使用"@"符号. NSString *astring = @ ...

  5. iOS 即使通讯第三方SDK 资料

    第三方即时通讯SDK,下面是一些主流的第三方的即时通讯SDK,尽管不能查看里面的源代码,但通过查看头文件,能为实现自己的即使通讯SDK提供很好的思路.(备用) 容云 容联.云通讯 IMSDK - 轻松 ...

  6. java中将SimpleDateFormat类型转换成Date类型

    try {String dateString = "2009-08-02 13:43:00";DateFormat df = SimpleDateFormat("yyyy ...

  7. 帆软报表（finereport）图表操作细节

    图表间之间的组件间隔:body-->属性-->布局-->组件间隔 决策报表背景水印:body-->属性-->水印 仪表盘指针/枢纽/背景颜色:样式-->系列 柱形图 ...

  8. CopyOnWriteList揭秘

    List的并发容器-CopyOnWriteList Vector和SynchronizedList ArrayList是用来代替Vector,Vector是线程安全的容器,因为它在方法上都加上了syn ...

  9. 我们一起来学Shell - shell的数组

    文章目录 什么是数组 数组中常用变量 数组的定义 小括号定义数组变量 小括号加键值对定义数组变量 分别定义数组变量 动态地定义数组变量 数组赋值的切片 遍历数组 关联数组 我们一起来学Shell - ...

  10. tip7：CentOS8虚拟机安装相关总结

    使用工具:Win10家庭版.WM12Pro.CentOS8. 一.安装 之前使用虚拟机安装操作系统使用的都是OpenSuse,也有相关备份.但是在Win10家庭版上用不了,启动电脑蓝屏(可能某些硬件不 ...