最近很多业务场景都会需要用到拓扑图，翻找了很多资料，最后选择了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. 鸟哥的Linux学习笔记-bash

    1. /bin/bash是linux预设的shell,也是Linux发行版的标准shell,它兼容sh,可以看作是sh的功能加强. 2. bash具有命令记录功能,在bash中通过上下键就可以翻找之前 ...

  2. 简单实现UITableView索引功能(中英文首字母索引) (二) By HL

    简单实现UITableView索引功能(中英文首字母索引)(一) ByH罗 相关类: NSString+PinYing(获取中英文首字母)   参考上面链接 #import "ViewCon ...

  3. .netcore基础知识（一）

    先来说说web服务器  先来一张图 一个典型的进程外托管模型 我们先看kestrel这一部分 我们在它前面放了一个方向代理服务器nginx 对http请求做预处理 kestrel本身是可以直接用作we ...

  4. Mac下Charles踩坑记录

    初次使用Charles,摸索着抓包的过程中遇到了很多问题.在这里一一记录一下,避免其他初学者踩坑. 问题1:不显示request和response? 在Charles的配置页面可以勾选是否把reque ...

  5. 描述nginx中worker_processes、worker_cpu_affinity、worker_rlimit_nofile、worker_connections配置项的含义

    worker_processes worker进程的数量,应小于等于cpu核心数,auto为当前主机cpu核心数 work_processes 4 worker_cpu_affinity 配置CPU亲 ...

  6. unittest基础篇1

    转自http://blog.csdn.net/huilan_same/article/details/52944782 unittest是xUnit系列框架中的一员,如果你了解xUnit的其他成员,那 ...

  7. Solution -「NOI 2008」「洛谷 P3980」志愿者招募

    \(\mathcal{Description}\)   Link.   一项持续 \(n\) 天的任务,第 \(i\) 天需要至少 \(a_i\) 人工作.还有 \(m\) 种雇佣方式,第 \(i\) ...

  8. 抓取并解密HTTPS流量

    WireShark   Wireshark解密TLS数据流,从网上已有资料来看,主要是两种方式:一是服务端私钥直接解密,二是使用SSLKEYLOGFILE获取握手过程中的会话密钥信息进行解密.   这 ...

  9. python 百宝箱

    百宝箱 1. 正则表达式 删除缓存文件 os.system("/sbin/fuser -k .nfs*") os.system("rm -rf .nfs*") ...

  10. Spring是什么? 核心总结

    Spring是一个开源框架,它由Rod Johnson创建.它是为了解决企业应用开发的复杂性而创建的. Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情.  然而,Spring ...