最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了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. 记项目中ES6+gulp+angularjs里的问题

    AngualrJs中可用来注入的有三种类型,service.factory.provider,这三种写法不样,用法也都不一样.其中,service只实例化一次,其实就是单例模式的思想.无论我们在什么地 ...

  2. js window.event

    转载请注明来源:https://www.cnblogs.com/hookjc/ 描述event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的 ...

  3. 如何修改TOMCAT的默认主页为你自己项目的主页

    感谢作者:xxs673076773 原文链接:https://www.iteye.com/blog/xxs673076773-1134805 (最合适的) 最直接的办法是,删掉tomcat下原有Roo ...

  4. CocoaPods使用专题 by h.l

    cocoaPods安装 CocoaPods安装和使用教程(code4app) cocoapods使用问题解决 cocoapods慢如何解决? CocoaPods停在Analyzing dependen ...

  5. CephFS分布式文件系统

    目录 组件 基本组件 块存储 文件存储 对象存储 特点: 1.高性能: 2.高可用性: 3.高可扩展性: 4.特性丰富: 详细配置 一.准备机器 1.修改主机名 2.修改hosts文件 二.Ceph节 ...

  6. HTML与HTTP协议

    HTML与HTTP协议 目录 HTML与HTTP协议 一.HTML 1. HTML概述 2. HTML编辑 3. HTML语法规则 4. HTML文件结构 5. HTML基本标签 (1)头标签中常用标 ...

  7. js实现网页回弹小球效果

    直接上效果图 运行页面会首先弹出一个输入框,询问用户想要产生的小球数量,随后后台就会产生指定数量的小球,在页面中来回跳动,触碰到页面边框时,就会回弹,且产生的小球颜色随机,小球在页面中的位置随机,小球 ...

  8. PyCharm编程软件详细安装教程

    PyCharm编程软件安装教程&破解 一.官网下载软件 1. 网页搜索进入PyCharm官网下载页面(https://www.jetbrains.com/pycharm/download/ ) ...

  9. 静态分离 & rewrit 重写 & HTTPS

    内容概要 资源分离 Nginx 的 Rewrite重写 HTTPS 内容详细 一.动静分离 1.在 nfs 中创建 NFS 挂载点 [root@nfs static]# mkdir /static [ ...

  10. Solution -「多校联训」朝鲜时蔬

    \(\mathcal{Description}\)   Link.   破案了,朝鲜时蔬 = 超现实树!(指写得像那什么一样的题面.   对于整数集 \(X\),定义其 好子集 为满足 \(Y\sub ...