最近很多业务场景都会需要用到拓扑图，翻找了很多资料，最后选择了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. PHP中的一些常用函数收集

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...

  2. 在view中实现UIViewController的跳转 By H.L

    view中是不能进行UIViewController的push,pop等操作的,若进行跳转操作,一般是用代理,block,通知等实现,那如何实现在ViewController的subView中实现跳转 ...

  3. 安装Linux8.3.2011

    镜像地址:http://mirrors.aliyun.com/centos/8.3.2011/isos/x86_64/ 非DVD镜像安装时的安装源地址:http://mirrors.aliyun.co ...

  4. FLink迟到数据的处理之三

    Flink迟到的数据更新窗口计算结果,窗口销毁后的迟到数据输出到测输出流 主程序: //TODO 使用迟到的数据更新窗口的计算结果 public static void main(String[] a ...

  5. 剑指Offer系列_30_包含min函数的栈

    以空间换时间: package leetcode.sword_to_offfer.day01; import java.util.Stack; /** * 定义栈的数据结构,请在该类型中实现一个能够得 ...

  6. 面向过程编程+模块&导入

    面向过程编程+模块&导入 一.面向过程编程(理论+简单代码) 面向过程编程就好比在设计一条产品流水线 首先我们来认识下,什么是面向过程?如果咬文嚼字的话可以这样来理解,面向过程就是面向解决问题 ...

  7. io流复习+代码演示

    前置知识: 序列化和反序列化 1.序列化就是在保存数据时, 保存数据的值和数据类型 2.反序列化就是在恢复数据时, 恢复数据的值和数据类型 3.需要让某个对象支持序列化机制,则必须让其类是可序列化的, ...

  8. BugKu-Misc-简单取证1

    下载文件压缩包,解压得到文件夹config,根据题目得知为取证,使用工具mimikatz, github地址:https://github.com/ParrotSec/mimikatz 将文件夹con ...

  9. 前端提升生产力系列三（vant3 vue3 移动端H5下拉刷新，上拉加载组件的封装）

    | 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...

  10. C# 属性（一）

    C# 中的属性是特殊的方法,该方法只负责对私有字段经行的操作,.我们用反编译查看时候看到真实属性是带()的方法,里面还包含get()和set()方法. 属性完成对私有字段的封装.对类的外部用户来说,属 ...