最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了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. 一次线上服务高 CPU 占用优化实践 (转)

    线上有一个非常繁忙的服务的 JVM 进程 CPU 经常跑到 100% 以上,下面写了一下排查的过程.通过阅读这篇文章你会了解到下面这些知识. Java 程序 CPU 占用高的排查思路 可能造成线上服务 ...

  2. Callable接口及Futrue接口详解

    Callable接口 有两种创建线程的方法-一种是通过创建Thread类,另一种是通过使用Runnable创建线程.但是,Runnable缺少的一项功能是,当线程终止时(即run()完成时),我们无法 ...

  3. Scala概述及环境配置

    一.概述 1.1 为什么要学Scala? Spark是新一代的内存级大数据的计算框架,是大数据学习的重要内容.随着Spark的兴起,同时也带动了Scala的学习,因为Spark就是Scala编写的.为 ...

  4. springBoot工程解决跨域问题

    更新:通过一个 @CrossOrigin  注解就可以完美解决跨域问题. 创建一个配置类 package com.miaoshaProject.configuration; import org.sp ...

  5. 无xml文件的springMVC

    使用springMVC我们一般都会在web.xml中配置一个dispatcher,现在我们基于用java代码的方式来使用springMVC import org.springframework.con ...

  6. Solution -「UOJ #87」mx 的仙人掌

    \(\mathcal{Description}\)   Link.   给出含 \(n\) 个结点 \(m\) 条边的仙人掌图.\(q\) 次询问,每次询问给出一个点集 \(S\),求 \(S\) 内 ...

  7. C#操作读写INI配置文件

    一个完整的INI文件格式由节(section).键(key).值(value)组成.示例如:[section]key1=value1key2=value2; 备注:value的值不要太长,理论上最多不 ...

  8. HashTable源码学习

    一.介绍 1.HashMap和HashTable的区别 1.相同点 二者都实现了Map接口. 底层都是哈西表 2.不同点 Hashtable继承自Dictionary类,而HashMap继承自Abst ...

  9. Spring 高级特性之二:Processor——Bean生命周期关键触发时机

    任何对象都有生命周期,那么Spring Bean对象创建.管理.销毁的整个生命周期个关键触发时机如何体现呢?先说结论,后续案例验证结论. 根据上图可知,实际bean对象涉及生命周期的主要是一个构造器和 ...

  10. Netty源码解析一——线程池模型之线程池NioEventLoopGroup

    本文基础是需要有Netty的使用经验,如果没有编码经验,可以参考官网给的例子:https://netty.io/wiki/user-guide-for-4.x.html.另外本文也是针对的是Netty ...