最近很多业务场景都会需要用到拓扑图，翻找了很多资料，最后选择了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. JVM学习四：深入分析ClassLoader

    一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管是CS还是BS应用,都是由若干个.class文件组织而成的一个完整的Java应用程序,当程序在运行时,即会调用该程 ...

  2. linux中统计文件中一个字符串出现的次数

    要统计一个字符串出现的次数,这里现提供自己常用两种方法: 1. 使用vim统计 用vim打开目标文件,在命令模式下,输入 :%s/objStr//gn 2. 使用grep: grep -o objSt ...

  3. 自定义 RestTemplate 异常处理 （转）

    转自:https://ethendev.github.io/2018/11/06/RestTemplate-error-handler/ 一些 API 的报错信息通过 Response 的 body返 ...

  4. ARP欺骗的原理

    转载请注明来源:https://www.cnblogs.com/hookjc/ 从<ARP协议工作原理>一文我们已经了解到,主机在两种情况下会保存.更新本机的ARP缓存表,    1. 接 ...

  5. 区段统计 mysql 语句 case when then end as

    EXPLAIN SELECT COUNT(*),CASEWHEN device_width > 729 THEN '>729'WHEN device_width BETWEEN '720' ...

  6. C++学习笔记_complex类的实现

    头文件中的防卫式声明 点击查看代码 #ifndef __COMPLEX__ #define __COMPLEX__ class complex { } #endif 类的定义 点击查看代码 class ...

  7. Solution -「多校联训」最小点覆盖

    \(\mathcal{Description}\)   Link.   求含有 \(n\) 个结点的所有有标号简单无向图中,最小点覆盖为 \(m\) 的图的数量的奇偶性.\(T\) 组数据.   \( ...

  8. MYSQL时代是否将结束

    前言 已知MariaDB预计于今年下半年将以spac形式完成上市,最近也看了不少文章,发现MariaDB正在以一个迅猛的速度超越mysql,mysql 可以说是开源数据库中最具代表性的一个,甚至可以说 ...

  9. Apache-log4j漏洞复现

    前言:昨天晚上当我还在睡梦中时,圈内爆出了核弹级的漏洞,今天我复现一下, 再开始前我们先建立一个maven项目,将pom.xml文件导入 <?xml version="1.0" ...

  10. monowall

    https://www.cat-home.org/?action=show&id=158