E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
antV
antv
/x6 边添加鼠标悬浮高亮和删除功能
antv
/x6边添加鼠标悬浮高亮和删除功能效果添加悬浮效果和删除工具取消悬浮效果边删除后的回调函数效果添加悬浮效果和删除工具this.graph.on('edge:mouseenter',({cell}
.伊泽瑞尔
·
2024-02-04 23:56
vue
前端
antv
前端
javascript
vue.js
antv
/x6节点添加鼠标悬浮高亮和删除功能
antv
/x6节点添加鼠标悬浮高亮和删除功能效果鼠标悬浮高亮鼠标移出恢复原状态效果鼠标悬浮高亮this.graph.on('node:mouseenter',({node})=>{node.addTools
.伊泽瑞尔
·
2024-02-04 22:55
前端
vue
antv
前端
vue.js
使用蚂蚁金服移动端F2生成曲线表图
github地址:https://github.com/antvis/f2/api文档:https://www.yuque.com/
antv
/f2/
_oop
·
2024-02-03 09:16
React使用@
antv
/g6绘制树形图
在react中通过@
antv
/g6实现树形图,包括自定义连接线、弹窗、展开/收起、配置项说明1、自定义连接线constflowLine={ draw(cfg:any,group:any){ conststartPoint
凉城┓.〆
·
2024-01-31 14:11
React
g6
react
利用X6 制作一个简单的流程图工具
地址:https://github.com/duKD/
antv
-x6-org运用
antv
/X6:https://x6.
antv
.antgroup.com/来实现一个简单的流程图工具项目预览:功能支持框选
cheerfulCoder
·
2024-01-31 12:04
流程图
antv
x6 实现拖拽
单独封装了一个js文件,方便调用import'@
antv
/x6-vue-shape'import{Addon,Graph}from'@
antv
/x6'//拖拽生成四边形exportconststartDragToGraph
我就是你的语法糖️
·
2024-01-31 11:05
antv
x6
javascript
vue.js
前端
vue使用
antv
-x6 绘制流程图DAG图(二)
代码:import{Graph,Node,Path,Cell,Addon}from"@
antv
/x6";import{register}from"@
antv
/x6-vue-shape";import{Dnd
小贵子的博客
·
2024-01-31 11:02
vue.js
流程图
前端
Axure9知识点复盘
原型文件示例.rp将反复被调用都模板作成母版鼠标和键盘的交互形状交互登录页面的实现动态面版滚动条的使用如何在Axure中动态加载图表(AxhubCharts)1.AxhubCharts是基于Echarts和
Antv
爱吃java的羊儿
·
2024-01-29 19:13
任务需求
学习
vue+
antv
L7实现高德地图自定义样式和自定义marker
实现思路1.在index.html中引入antvL7和高德地图window._AMapSecurityConfig={securityJsCode:"",//高德地图密匙};2.绘制地图容器3.绘制地图data(){return{scene:null,data:[{id:1,name:'',lng:'',lat:'',}}...methods:{initMap(){constthat=this;c
jinxi1112
·
2024-01-28 10:44
Javascript
1024程序员节
antv
/g6绘制数据流向图
antv
/g6绘制数据流向图前言接口模拟数据htmlts页面效果前言在业务开发中需要绘制数据流向图,由于echarts关系图的限制以及需求的特殊要求,转而使用
antv
/g6实现,本文以代码的方式实现数据流向需求以及节点分组
千寻物语
·
2024-01-24 08:26
前端
angular.js
antv
x6填坑指南: 部分节点拖拽和操作撤销重做不生效问题、使用Stencil过滤时过滤后分组的显示高度无法根据过滤节点自适应问题
问题1.部分分组中节点拖拽添加或操作后撤销重做操作不生效。前提:使用Stencil插件,创建画布侧边栏的UI组件,同时使用其分组、折叠能力。分组包含固定分组、后台接口获取的动态分组和组件。//固定分组初始化initStencil(graph,stencil){//defaultGroup是固定分组和其节点信息,自行添加defaultGroup.forEach((gp,index)=>{constg
小玲子小玲子
·
2024-01-23 14:41
antv
x6
前端
拓扑图
2019-08-22 v(手把手教学)vue3.0 项目中安装使用jquery
第一步:安装npminstall--savejquery第二步:查看package.json文件"dependencies":{"jquery":"^3.4.1",///一定要有这个没有的话,手动添加"@
antv
冬天的_太阳
·
2024-01-17 23:04
vue3 使用
antv
地图:地球飞线、地图打点
constinitEarth=()=>{earthScene=newScene({id:"earth",map:newEarth({center:[154.113164,25.570667],zoom:3,//pitch:50}),});//地球模式下背景色默认为#000通过setBgColor方法我们可以设置可视化层的背景色earthScene.setBgColor("");constearth
irisMoon06
·
2024-01-16 05:31
前端
antv
jsPlumb、mxGraph和
Antv
x6实现流程图选型
3Antvx6国内框架开源阿里蚂蚁
Antv
产品,FineDataLink数据集成平台采用的方案,新版dolphinscheduler也已更换
前端蜗牛君
·
2024-01-15 00:30
流程图
mxGraph
Antv
x6
jsPlumb
树形流程图-G6
前几天接到了个需求,做一个树形的流程图,大概形状类似于
antV
-G6里面的自定义树图
antv
-G6自定义树图链接:定制树图元素样式|G6但是需求:父节点和子节点能够展开和关闭,还要有这个功能emmm..
是超级厉害的小仙女ya
·
2024-01-11 19:43
javascript
vue
npm
数据可视化
react拖拉流程图_React下使用
antv
/g6实现树图/流程图
2、选择选择很重要,花了两天时间对比了echarts、
antv
里的G2、G6,甚至还翻翻了D3。这个过程有点烦,先是尝试echarts里的关系图,毕竟是大厂出来的,API文档还是挺全乎的,也易懂。
bug射击师
·
2024-01-11 01:22
react拖拉流程图
antv
-g6实现拓扑图可视化展示,动态修改数据
实现的功能动态修改数据(包括添加和删除),打开vuedevtools试试看吧自定义节点和边(完全自定义,未继承默认)边动画拖拽minimaphover信息展示可以根据自己的需求进行扩展比如:高亮、节点折叠隐藏、图例、视图聚焦等。我试过都能实现预览地址在线预览仓库地址github一些代码实现,详细请看源码初始化Graphthis.graph=newG6.Graph({container:contai
小阮的学习笔记
·
2024-01-11 01:21
js
js
HTML绘制拓扑简图,用最简单的方式画拓扑图!!!
原因如下:维护成本高:类似的库(
antv
/g6,go.js)都是基于canvas实现,也都大同小异的定义了一套组件,有一定的
隅隅隅
·
2024-01-11 01:21
HTML绘制拓扑简图
antv
/x6_2.0学习使用(五、路由)
X6默认提供了以下几种路由:路由名称说明normal默认路由,原样返回路径点orth正交路由,由水平或垂直的正交线段组成oneSide受限正交路由,由受限的三段水平或垂直的正交线段组成manhattan智能正交路由,由水平或垂直的正交线段组成,并自动避开路径上的其他节点(障碍)metro智能地铁线路由,由水平或垂直的正交线段和斜角线段组成,类似地铁轨道图,并自动避开路径上的其他节点(障碍)er实体
bigHead-
·
2024-01-09 03:34
antv/x6
学习
antv
X6
vue.js
前端
typescript
javascript
reactjs
antv
/x6_2.0学习使用(六、事件系统)
一、视图交互事件通过鼠标、键盘或者各种可交互的组件与应用产生交互时触发的事件,如单击节点‘node:click’等。1、鼠标事件事件cell节点/边node节点edge边blank画布空白区域单击cell:clicknode:clickedge:clickblank:click双击cell:dblclicknode:dblclickedge:dblclickblank:dblclick右键cell
bigHead-
·
2024-01-09 03:03
antv/x6
学习
antv
X6
vue3
typescript
前端
react
javascript
antv
/x6_2.0学习使用(四、边)
一、添加边节点和边都有共同的基类Cell,除了从Cell继承属性外,还支持以下选项。属性名类型默认值描述sourceTerminalData-源节点或起始点targetTerminalData-目标节点或目标点verticesPoint.PointLike[]-路径点routerRouterData-路由connectorConnectorData-连接器labelsLabel[]-标签defau
bigHead-
·
2024-01-09 03:03
antv/x6
学习
前端
antV/x6
typescript
vue
antv
前端框架
AntV
L7 实现地图功能(高德)
注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用」为应用添加Key,「服务平台」一项请选择「Web端(JSAPI)」二、安装依赖//安装L7依赖npminstall--save@
antv
王布尔
·
2024-01-06 17:19
第三方工具库
react.js
前端
javascript
AntV
-G6 -- 将G6图表应用到项目中
1.效果图2.安装依赖npminstall--save@
antv
/g63.代码import{useEffect}from'@alipay/bigfish/react';importG6from'@
antv
王布尔
·
2024-01-06 17:47
第三方工具库
arcgis
javascript
开发语言
AntV
X6源码简析
前端|AntVX6源码探究简析.png前言
AntV
是蚂蚁金服全新一代数据可视化解决方案,其中X6主要用于解决图编辑领域相关的解决方案,其是一款图编辑引擎,内置了一下编辑器所需的功能及组件等,本文旨在通过简要分析
维李设论
·
2024-01-05 09:56
antv
/x6_2.0学习使用(三、内置节点和自定义节点)
内置节点和自定义节点一、节点渲染方式X6是基于SVG的渲染引擎,可以使用不同的SVG元素渲染节点和边,非常适合节点内容比较简单的场景。面对复杂的节点,SVG中有一个特殊的foreignObject元素,在该元素中可以内嵌任何XHTML元素,可以借助该元素来渲染HTML、React/Vue/Angular组件到需要位置,这会给项目开发带来非常大的便利。在选择渲染方式时推荐:如果节点内容比较简单,而且
bigHead-
·
2024-01-04 01:02
antv/x6
学习
前端
typescript
vue.js
antv/x6
antv
/x6 2.x 搭建流程图编辑页面(1)
templatevue-tscdv3-tsyarnyarndev//npmnpminit@vitejs/appv3-ts--templatevue-tscdv3-tsnpminstallnpmrundev二、下载
antv
bigHead-
·
2024-01-04 01:31
React
Vue
antv/x6
流程图
javascript
前端
antv
/x6_2.0学习使用(一、安装引入)
安装引入安装通过npm或yarn命令安装x6#npm$npminstall@
antv
/x6--save#yarn$yarnadd@
antv
/x6安装完成之后,使用import进行引用import{Graph
bigHead-
·
2024-01-04 01:31
antv/x6
学习
antv
X6
vue3
typescript
antv
/x6 @2.13.1学习笔记
关于
antv
/x62.0的一些基本使用
antv
/x6注册节点Graph.registerNode('custom-rect',{inherit:'rect',width:66,height:36,attrs
一个小迷糊呀
·
2024-01-04 01:31
javascript
前端
react
「
AntV
」X6开发实践:踩过的坑与解决方案
长期维护更新版文档请移步语雀️|如何自定义拖拽源?相信你们在开发中更多的需求是需要自定义拖拽源,毕竟自定义的功能扩展性高一些,而且可以根据你的业务需求灵活设置。自定义拖拽的优点就是:万物皆可成为拖拽源,不管你使用的是html标签,还是第三方的ui框架,或者树形列表,……这些都可以设置成拖拽源,只有你想不到的,没有官方做不到的,来吧,开整。官方提供的拖拽自定义的拖拽解决方案这里使用的是Dnd插件,因
凌晨三点半日光
·
2024-01-04 01:29
javascript
前端
ui
vue2使用
antv
x6案例(功能齐全)
因为是把已经他当作组件来使用,所以大家使用的时候有些需要改一下,大部分的功能都在里面了,希望可以帮到大家。目前有时候使用会出现部分bug,vue-contextmenujs这个组件是用来实现右击显示菜单的,我也是网上找的,效果还可以。参考:VUE右键菜单vue-contextmenujs的使用_~Serendipity~的博客-CSDN博客导出SVG导出PNG保存//准备数据import{Grap
小白开发123
·
2024-01-04 01:57
javascript
前端
vue.js
antv
/x6_2.0学习使用(二、画布)
画布一.创建容器在页面中创建一个div标签,用来容纳画布画布常用配置信息constgraph=newGraph({container:graphRef.value,//画布容器width:800,//画布宽度,默认使用容器宽度height:600,//画布高度,默认使用容器高度autoResize:false,//是否监听容器大小改变,并自动更新画布大小。background:{color:"#F
bigHead-
·
2024-01-04 01:27
antv/x6
学习
antv
X6
vue3
typescript
前端
动态渲染拓扑图方案探究
前言拓扑图是数据可视化领域一种比较常见的展示类型,目前业界常见的可视化展现的方案有ECharts、HighCharts、D3、
AntV
等。
维李设论
·
2024-01-01 13:44
前端
echarts
数据可视化
Jupyter Notebook又一地理数据可视化扩展!
本次分享一个JupyterNotebook地理数据可视化扩展:pyl7vppyl7vp=Python+l7vp,如其名,是l7vp在Python3方向的封装,l7vp是蚂蚁集团
AntV
数据可视化团队开发的地理空间智能应用研发开源平台
qq_21478261
·
2023-12-31 05:26
信息可视化
jupyter
python
开发语言
生物信息
AntV
G6新版源码浅析
前言
AntV
是蚂蚁金服全新一代数据可视化解决方案,其中G6主要用于解决图可视领域相关的前端可视化问题,其是一个简单、易用、完备的图可视化引擎。
维李设论
·
2023-12-25 16:09
前端
前端
信息可视化
g6
数据可视化
AntV
蚂蚁金服
图可视
(
AntV
X6)vue2项目流程图实现
(AntVX6)vue2流程图实现项目:gitLab/zhengzhouyuan效果:一、项目引入X6npminstall@
antv
/x6--save二、引入相关插件npminstall--save@
antv
nyf_unknown
·
2023-12-25 11:51
图表
流程图
arcgis
Angular2使用G2画图表
安装G2包npminstall@
antv
/g2--save在使用的组件中importimport*asG2from'@
antv
/g2';HTMLTSimport{Component,OnInit,Input
Will_板凳
·
2023-12-25 01:33
【前端数据可视化
AntV
】G2 、G6 、L7 的使用
AntV
官网
AntV
官网查看文档的时候强烈建议使用国内镜像;否则会非常的慢。
itlu
·
2023-12-22 12:19
ref的使用
import{createRef,}from‘@
antv
/f2’;privateref=createRef();使用就是this.ref?.current?.hide();
程love
·
2023-12-20 16:20
javascript
ref
Antv
/G2 折线图 DataSet 数据处理过滤指定字段
DataSet文档G23.2DataSet文档Demo:多折线图dataset过滤数据/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeightvardata=[{date:'2023/8/1',type:'london',value:4623,lrate:0.33,trate:0.65},{date:'20
*且听风吟
·
2023-12-18 05:57
#
html
html
关系图
antv
G6
1、安装antvG6npminstall--save@
antv
/g6#或者#pnpminstall--save@
antv
/g62、引入antvG6importG6from"@
antv
/g6";3、初始化
落叶上的秋
·
2023-12-06 18:05
vue
javascript
开发语言
ecmascript
前后端分离vue+springboot家庭理财账单财务管理系统
SpringBoot,Sa-Token,MyBatis-Plus,MyBatisGenerator,MySQL,Nginx,Spark,Fastjson前端:Vue,Vue-router,Element,Axios,
AntV
说书客啊
·
2023-12-06 15:12
SpringBoot框架源码
vue.js
spring
boot
javascript
java
后端
前端食堂技术周刊第 106 期:TypeScript 5.3、Nuxt DevTools v1.0、Rspack 0.4、
AntV
2023、量子纠缠 demo
技术资讯TypeScript5.3NuxtDevToolsv1.0Rspack0.4Radixv1.0StateofJavaScript2023开启
AntV
2023年度发布GPTseek下面我们来看技术资料
童欧巴
·
2023-12-06 06:33
技术周刊
前端
typescript
javascript
AntV
和AntD之间的区别与联系
前言:最近在调研前端的一些框架,技术栈主要是用react,所以找到了2个十分相似解决方案,拿来对比一下(antd和
antv
都是基于react)antd对比antvantdantv解决方案企业级UI设计语言数据可视化解决方案提供一些常用的组件
MInNrz
·
2023-12-05 19:29
前端框架
前端
reactjs
antv
/x6 动态添加更新连接桩(port)
@
antv
/x6动态添加更新连接桩(port)首先通过自定义html节点,生成一个可以迭代多个子节点的模块cell,然后再定义一个进线连接桩(左),定义一系列出线连接桩(erPortPosition),
.伊泽瑞尔
·
2023-12-04 20:51
antv
前端
前端
html5
javascript
2021-06-21
安装:npminstall@
antv
/g2--save1.引入需要使用的页面引入import{Chart}from'@
antv
/g2'2.渲染的数据constdata=[{year:'1951年',sales
懒懒猫
·
2023-12-03 08:48
vue 使用
AntV
X6 绘制流程图
npminstall@
antv
/x6--save在使用的页面用import进行引用。
皮卡穆
·
2023-12-02 06:14
vue.js
流程图
javascript
AntV
- F6 小程序移动端图表组件(微信版)
AntV
蚂蚁新出的可视化组件,分为很多部分官网F6文档链接安装npminstall--save@
antv
/f6-wx微信开发工具-工具-构建npm组件使用分为图配置/树图配置4.图配置wxmljson{
止语之语
·
2023-11-28 11:49
小程序
微信
AntV-F6
react
antv
/X6可视化工具超详细入门
描述之前我想先吐槽一下这个X6的官网,可能原生html、JS还行,但是要灵活运用到框架上,官网上的react实例是真看不懂,我个人而言,真的很难灵活运用到真实项目中,幸好后面有带佬的代码供参考,不得不说质量雀食高开整!首先我们的目的是画一个这样的图表看到这个树状图,我们想要搞清楚,我们需要哪几样来完成-不是显示单独一个数据,所以必然要自定义节点-第一先确定数据格式,从后台传过来的数据里面不单是数据
前端该溜子
·
2023-11-26 21:28
Web前端
软件编程
react.js
关于
antV
G6中的on事件、util.each事件及update方法等的使用总结
前言antVG6相对而言是一个目前还处于较于不成熟的关系数据可视化引擎。因此在实习实现关系图的过程中遇到很大的坑。比如说高亮箭头及关联属性、关系图的缩放、以及由于G6是基于canvas原理所以无法对其绘制的节点局部添加事件。因此在此记录下自己在使用G6实现数据库关系图时使用到的一些及技术点。一、关于G6中的on事件on事件监听参数eventName{String}事件名callback{funct
春上
·
2023-11-26 02:37
可视化
g6-思维链路图
前言需求:集团公司风险链路图首次接触@
antv
/g6,进行记录总结点击框显示公司数据实现步骤安装"@
antv
/g6":"4.5.0","insert-css":"^2.0.0",安装npminstall
Best_卡卡
·
2023-11-26 02:05
echarts
typescript
vue.js
上一页
1
2
3
4
5
6
7
8
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他