最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了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. ARC基本概念

    1.什么是ARC Automatic Reference Counting,自动引用计数,即ARC,可以说是WWDC2011和iOS5所引入 的最大的变革和最激动人心的变化.ARC是新的LLVM 3. ...

  2. Java基础总结(二)

    1.ArrayList和Vector的区别 这两个类都实现了List接口(List接口继承了Collection接口),他们都是有序集合,即存储在这两个集合中的元素的位置都是有顺序的,相当于一种动态的 ...

  3. iOS应用性能调优--初级---王朋

    目录 我要给出的建议将分为三个不同的等级: 入门级. 中级和进阶级: 入门级(这是些你一定会经常用在你app开发中的建议) 1. 用ARC管理内存 2. 在正确的地方使用reuseIdentifier ...

  4. 如何从0到1设计一个类Dubbo的RPC框架

    之前分享了如何从0到1设计一个MQ消息队列,今天谈谈"如何从0到1设计一个Dubbo的RPC框架",重点考验: 你对RPC框架的底层原理掌握程度. 以及考验你的整体RPC框架系统设 ...

  5. Python基础(Day1)

    一.Python的简介  1.Python的诞生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发 ...

  6. JMM之synchronized关键字

    对于通讯,涉及两个关键字volatile和synchronized: Java支持多个线程同时访问一个对象或者对象的成员变量,由于每个线程可以拥有这个变量的拷贝(虽然对象及其成员变量分配的内存实在共享 ...

  7. 『无为则无心』Python面向对象 — 53、对Python中封装的介绍

    目录 1.继承的概念 2.继承的好处 3.继承体验 4.单继承 5.多继承 1.继承的概念 在Python中,如果两个类存在父子级别的继承关系,子类中即便没有任何属性和方法,此时创建一个子类对象,那么 ...

  8. 【axios三部曲】一、使用axios

    axios作为一个基于promise的网络请求库,它同时支持浏览器和node环境,是我们开发中常用的一个库 ​ 它的一些特性: 从浏览器发出XMLHttpRequests 从node.js发出http ...

  9. Clickhouse - Replication机制

    Clickhouse - Replication机制 1. Replication引擎族 Replication仅对于MergeTree引擎族提供支持, 两者是正交的: ReplicatedMerge ...

  10. 金融BI是什么?为什么金融同行都在讨论这个!

    最近,我和金融行业的几位朋友聚会,觥筹交错之间听到最多的竟然是「金融BI」这个词!这可触及到我的知识盲区了,到底什么是金融BI呢? 朋友向我解释:BI商业智能是一种提高企业智能化的手段和工具,既可以满 ...