React + umi +antd+antv/g6 实现力图
官方示例效果:http://antv.alipay.com/zh-cn/g6/2.x/demo/net/2017-link-data.html
改编效果:
实现步骤:
环境:nodejs、yarn/npm、umi(最新即可)
创建项目:
1.打开cmd
2.创建项目文件夹:输入mkdir ReactUmiG6App & cd ReactUmiG6App 回车
3.创建项目:yarn create umi
4.添加需要的依赖包:react 、antd、@antv/g6
yarn add antd、yarn add react 、yarn add @antv/g6
5.以上就是所有准备,接下来就可以具体实现了
具体编码参考官方API及实例就可,其他需要注意的就是依赖引用了,以下供参考
最后附上源码:
https://gitee.com/wiaoong/studynotes.git
React + umi +antd+antv/g6 实现力图的更多相关文章
- react+umi+netcore+signalR BS和客户端设备 简单通讯
微信扫码登录工作用 仅作记录 扫码访问服务器地址 实现扫码服务器地址通讯中断设备解锁 采用signalR 双向异步通知中断 创建控制器 ChatController 注入集线器上下文 IHubCont ...
- React使用AntV G6实现流程图
安装 npm install @antv/g6 --save 引用 import G6 from '@antv/g6' 自定义节点 /** * 方式一 */ G6.registerNode('rect ...
- React & shit Antd
React & shit Antd https://ant.design/components/tooltip-cn/ https://ant.design/components/tag-cn ...
- antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
- vue结合antV/g6 实现网络拓扑图
最近很多业务场景都会需要用到拓扑图,翻找了很多资料,最后选择了antV/g6,主要原因有以下几点: 1.阿里出品,所以框架的成熟性有保障 2.业务场景契合(1.规则拓扑图:2.动画流向:每个节点会有流 ...
- React + Dva + Antd + Umi 概况
Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...
- react+dva+antd+umi项目建立操作流程及知识点总结
0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...
- react : umi 引入 antd 踩坑
首先要明确一个问题. 不管是 antd 还是 dva 还是别的什么东西,他们都是 umi 的插件——只要这个项目是使用 umi 脚手架生成的. 所以第一步应该是 .umirc.js (config.j ...
- react+umi+dva+antd中dva的数据流图解
随机推荐
- Github版本控制系统
Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 特别推荐简单易懂的廖雪锋大神制作的学习教程: https://www.liaoxuefeng.com/wiki/896043 ...
- windows编程-socket
server部分 ,Initialize Winsock. ,Create a socket. ,Bind the socket. ,Listen on the socket for a client ...
- 从LG绝不放弃智能手机业务看后者到底有多重要?
近年来,全球手机市场放缓已经是不争的事实.与此同时,手机行业集中趋势明显,几家巨头掌握着大部分市场,占据着垄断的市场位置.但就是在这样的态势下,很多手机部门明显已经成为累赘的企业,却依然不想放弃智能手 ...
- JS动态判断设备类型为PC或者移动端,然后根据设备加载相应的代码
这里是通过JS判断设备之后加载相应的网站,如果是移动端加载m开头的网站域名,如果是PC端就加载 www.开头的正式域名 <script> (function () { var url = ...
- spring-页面模板配置
一个可用的freemaker配置: ... @Bean public ViewResolver viewResolver() { FreeMarkerViewResolver fr = new Fre ...
- imagenet下载及训练
imagenet 种子 迅雷打开验证集http://academictorrents.com/download/5d6d0df7ed81efd49ca99ea4737e0ae5e3a5f2e5.tor ...
- MyBatis: No MyBatis mapper was found in '[xx.mapper]' package. Please check your configuration
在应用入口加入@MapperScan("com.IBM.XXXXX.dao")
- P 1041 考试座位号
P 1041 考试座位号 转跳点:
- C语言备忘录——qsort
写了这么久的排序感觉还是用现成的最舒服.其实C语言其实自己带了一个快速排序在stdlib 库里,但是其函数调用的接口过于复杂,所以让人望而却步.为了加深自己的记忆,所以写下这篇博客 先来看一下函数原型 ...
- 电脑必须用U盘引导盘才能进系统解决办法
昨天为了装Ubuntu双系统把系统给装崩了,结果重装win7系统之后出现了以下问题,百度的结果有些杂乱,解决过程自己做一下记录. 问题一:安装程序结束后,出现“Windows安装程序无法将Window ...