最近很多业务场景都会需要用到拓扑图，翻找了很多资料，最后选择了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. js 实现光标控制与字符串查找

    转载请注明来源:https://www.cnblogs.com/hookjc/ 光标定位: <html> <head> <meta http-equiv="co ...

  2. element ui图片上传方法

    <!--商品图片--> <template v-slot:product_cover> <el-upload list-type="picture-card&q ...

  3. 鸟哥的Linux私房菜学习笔记——文件权限与目录配置

    Linux的文件权限和目录配置 在linux中的每个用户必需属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. (1)所有者 一般为文件的创建者,谁创建了该文件,就是天 ...

  4. linux_16

    对常用I/O模型进行比较说明 nginx中的模块分类及常见核心模块有哪些 描述nginx中worker_processes.worker_cpu_affinity.worker_rlimit_nofi ...

  5. python篇第10天【While 循环语句】

    while 语句时还有另外两个重要的命令 continue,break 来跳过循环,continue 用于跳过该次循环,break 则是用于退出循环,此外"判断条件"还可以是个常值 ...

  6. Netty核心原理

    Netty核心原理 1. Netty介绍 1.1 原生NIO存在的问题 NIO的类库和API使用繁杂 需要具备其他额外的技能,如java多线程编程等才能编写出高质量的NIO程序 开发工作量和难度都非常 ...

  7. 1、架构--架构图、Iptables（简介、四表五链、流程图、使用、扩展模块）、包过滤防火墙

    笔记 1.画架构图 2.Iptables 1.1 什么是防火墙 防止别人恶意访问. 1.2 防火墙种类 硬件防火墙 F5 软件防火墙 iptables firewalld 安全组 3.Iptables ...

  8. Solution -「多校联训」数学考试

    \(\mathcal{Description}\)   Link.   给定 \(n\) 个函数,第 \(i\) 个有 \(f_i(x)=a_ix^3+b_ix^2+cx_i+d~(x\in[l_i, ...

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

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

  10. ios开发 Rsa签名 base64转码

    因为公司要求做了一个加密  网上的资料少有可用的  于是我看到了一位大神的曙光 但是未介绍使用方法 然后另一位大神给予了使用方法 但是没有把库给出来   我整理了一下  希望大家看的有些启发 证书生成 ...