AntV 第5页

Vue3.x配合Antv使用

准备工作安装vue-cli,由于cli版本更新较快，本文采用vue-cli3.x版本因此安装命令如下：yarnglobaladdvue-cli@3Tip:安装完后检查版本vue-V如环境报错，需要在环境变量中path中添加vue.cmd的路径，如C:\Users\haha\AppData\Local\Yarn\bin创建项目文件夹并进入vuecreateantv-democdantv-demo安装

淡淡紫色·2023-09-02 00:49

Vue组合式API 使用 AntV x6报错： “Error: Ensure the container of the graph is specified and valid”

现象刚开始用vue3的组合式API，还不是很习惯，跟着X6的教程一顿复制，报错：原因错误原因是在mounted生命周期时，id为container的div还没有被挂载到页面中。这就导致我们想要将graph绘制在id为container的div上时，该节点还不存在，也就导致了报错。解决方案只需要确保需要挂在的的目标元素存在即可，比如在mounte之后再进行X6的绘制onMounted(()=>{co

肖潇不吃洋芋·2023-09-01 08:39

蚂蚁金服开源空间数据可视分析引擎 L7

L7地理空间可视化L7地理空间可视化L7地理空间可视化L7地理空间可视化11月22日，蚂蚁金服AntV数据可视化团队推出开源地理可视化引擎L72.0beta版——基于WebGL的⼤规模地理空间数据可视分析开发框架

ThinkingGIS·2023-09-01 05:27

react + antv G6

新建一个react项目（过程不多描述了）确定新项目能跑起来之后，第一步：引入G6，使用命令行npminstall--save@antv/g，第二步：在需要的地方引入G6，第三步：引入G6的数据源为JSON

圆又圆_4236·2023-08-30 20:09

JS制作Antv图表实例

不折腾的前端不是好前端，今天来折腾下Antv图表，对比highcharts这个文档确实不怎么人性化，但是没办法么，毕竟highCharts还是蛮贵的，使用antv之前建议大家看下语雀上的文档。

skydot·2023-08-29 04:52

react-flow基础使用及dagre库的使用

前言最近项目中需要用到拓扑图的展示，最开始选用的是antv的拓扑图组件。

不随。·2023-08-29 00:08

antvG6绘制树形图踩坑记录（自定义节点等功能）

用父子结构的树形图来展示交换机之间的关系并且处理相关业务逻辑1.使用antvg6的树形图，首先到官网示例里找到一个和我们想要做的差不多的例子，在此基础上修改官方教程1先下载包npminstall--save@antv

Mr__proto__·2023-08-25 13:10

antvg2踩坑记录

官方地址https://antv.vision/建议纯新手的话先看下教程，明白各个组件和一些可视化的基础概念更容易上手（戳这里跳转官方教程）柱状图改变柱子的颜色.color('l(90)0:rgb(47,209,255

Hero_rong·2023-08-25 13:40

开发感悟20230426

然后在main.js中引用，可以覆盖上面的，如果想给element-ui设置样式，不用设置deep了2.可以直接修改引入的element-ui的样式，找到对应的样式就可以修改二、比echarts还要好用的antv

Shiny0815·2023-08-25 00:39

移动端和PC端对比【组件库+调试vconsole +构建vite/webpack+可视化echarts/antv】

目录组件库移动端vuevantPC端reactantdvueelement调试：vconsolevsdevtools中的控制台（Console）vconsole：在真机上调试构建工具webpack原理Babel：JS编译器（es6->es5，jsx->js）loader：编译less-loader：less->csscss-loader：css->jsstyle-loader：创建style标签，

参宿7·2023-08-24 14:08

vue3 + antv/x6 实现拖拽侧边栏节点到画布

前篇：vue3+ts使用antv/x6+自定义节点前篇：vue3+antvx6自定义节点样式1、创建侧边栏用antd的menu来做侧边栏npmi--saveant-design-vue@4.x//入口文件

原莱_·2023-08-19 11:35

使用@antv/x6-vue-shape 遇到的问题

最近用@antv/x6开发一个功能，遇到的坑太多了，心累啊。。。想用官方提供的@antv/x6-vue-shape，目的是使用vue组件创建画布元素。

小贵子的博客·2023-08-18 16:24

antv/g2图表tooltip展示坐标之外的数据

项目上遇到这个问题，文档上没有找到案例，这里记录一下：this.chart.tooltip({position:'top',//固定位置展示tooltipcrosshairs:{type:'rect',},//tooltip辅助线配置offset:10,//tooltip距离鼠标的偏移量containerTpl:``,//tooltip容器模板itemTpl:`人数:{value}占比:{perc

halowyn·2023-08-17 22:21

AntV G6新版源码浅析

前言AntV是蚂蚁金服全新一代数据可视化解决方案，其中G6主要用于解决图可视领域相关的前端可视化问题，其是一个简单、易用、完备的图可视化引擎。

·2023-08-15 18:50

可视化大屏的组件库

常见数据可视化库Echartshttps://echarts.apache.org/zh/index.htmlHighchartshttps://www.highcharts.com.cn/AntVhttp://antv.alipay.com

小阳生煎·2023-08-15 00:16

vue3+antv x6自定义节点样式

先大致定下节点样式，需要展示标题，输入/输出连接桩，参考样子大概是https://x6.antv.antgroup.com/examples/showcase/practices#class这是根据antvx6

原莱_·2023-08-12 02:37

vue3+ts使用antv/x6

使用2.x版本x6.antv新官网:安装npminstall@antv/x6//"@antv/x6":"^2.1.6",项目结构1、初始化画布index.vueimport{onMounted}from"vue

原莱_·2023-08-12 02:36

antv l7每次刷新无法加载iconFont

如图，只渲染出了文本，未渲染出iconFont但是如果我跳转到其他页面再跳转回来(未经过刷新时)，可以展示出iconFont解决：查看官方源码后找到了iconfont.tsx文件可以看到多了一步fontloaded，放到项目中后再次测试，果然成功了

tsuyoii·2023-08-11 21:19

Antv-G6入门

//节点，边线的配置。constgraph=newG6.Graph({container:‘mountNode’,//挂在标签的idwidth:800,//cavas的宽height:600,//cavas的高fitView:true,//画布适配fitViewPadding:[20,20,20,20],//画布上的四周留白宽度//节点的默认样式节点又被称作元素defaultNode:{id:‘n

长影缚苍龙·2023-08-10 08:01

通过anvt X6和vue3实现图编辑

通过anvtX6X6地址：https://x6.antv.antgroup.com/tutorial/about；由于节点比较复杂，使用vue实现的节点；x6提供了一个独立的包@antv/x6-vue-shape

长影缚苍龙·2023-08-10 08:33

antv G6在vue项目中的实践总结

在项目中使用Step1:使用命令行在项目目录下执行以下命令：npminstall--save@antv/g6Step2:在需要用的G6的JS文件中导入：importG6from'@antv/g6';Step3

北巷`·2023-08-08 03:55

antv/l7地图，鼠标滚动，页面正常滑动-- 我们忽略的deltaY

背景在官网项目中，需要使用一个地图，展示产品的分布区域及数量。希望的交互是，鼠标放上标点，tooltip展示地点和数量等信息。鼠标滚动，则页面随着滚动。但是鼠标事件是被地图代理了的，鼠标滚动意味着地图的缩放。问题解决我们首先想到的就是关闭地图的缩放constscene=newScene({id:'map',map:newGaodeMap({zIndex:0,pitch:0,style:'light

DiuDiu_yang·2023-08-07 07:41

【VUE3+AntV X6】引入ANTV X6 的流程图编辑器应用（一）

ANTVX6流程图编辑器应用唠唠叨叨事发背景实现效果实现思路总结参考资料唠唠叨叨唉！最近感觉非常忙，要学的东西太多，要实现的方法变幻莫测，层出不穷，越学越觉得自己不会的实在太多。项目本来中标了，后来又不知道发生了什么，临到签合同又黄了，整的我们开发的瑟瑟发抖，产品整个大改，恐怕要……只能说还是抓紧时间好好学习，知识和技术是永远不会背叛自己的。事发背景俺滴组长（后端大佬）要我配合开发数据平台的任务流

腌肉要轻轻拍打·2023-08-05 17:54

vue3.2+ts使用antv/x6流程图

vue3.2+ts使用antv/x6流程图我们的需求是这样的20221201实现的效果图是这样的。基本满足要求，后期对完接口数据再更新一下。

qrn10240·2023-08-05 17:23

使用 AntV X6 + vue 实现单线流程图

使用AntVX6+vue实现单线流程图X6是AntV旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建DAG图、ER图、流程图等应用。

易风有点疯·2023-08-05 17:22

antv-g6初试身手demo

下拉框选择，动态切换关系图状态，模拟动态流程切换下面是demo代码。免费下载https://download.csdn.net/download/qq_44441669/87636472

想要成仙的菜鸟前端·2023-08-05 10:51

【AntV G6】页面节点错乱

问题描述懒加载子节点过多时，页面节点出现错乱，如下图解决办法布局的计算时间和动画产生了冲突，动画开始的时候实际上大数据量的布局还没有计算完成。在展开大量节点的时候，需要把动画关掉graph.set('animate',false)展开完成后再开启graph.set('animate',true)

门前大桥下www·2023-08-05 09:45

【Antv G6】导出图片

需求将AntvG6生成的树形图导出成图片代码varthat=thisthis.treeGraph.toFullDataURL(res=>{//为了防止下载的图片影响到G6显示，这里作一个深度拷贝varcanvas=document.getElementById('containerG6').childNodes[0].cloneNode(true)varimg=newImage()img.onlo

门前大桥下www·2023-08-05 09:14

CustomeG6-canvas

目录简介scss快速上手·语雀简介antv/g6是一款基于JavaScript的图形可视化引擎，由阿里巴巴的AntV团队开发。创建各种类型的图形，如流程图、关系图、树形图等。

参宿7·2023-08-02 20:48

Vue2.0+AntvX6—边 Edge

import{Shape}from'@antv/x6'//创建边constedge=newShape.Edge({source:rect1,target:rect2,})//添加到画布graph.addEdge

molly cheung·2023-07-30 11:25

Vue2.0+AntvX6基础用法

什么是antv-x6？

molly cheung·2023-07-30 11:54

antvg2 环图轮播_Antv_G2笔记

概念基本元素数据->Data:可视化数据来源图形属性->Attribute:数据中变量映射到图形几何标记->Geometry:点，线，多边形等几何标记度量->Scale:数据空间到图形空间的转换接口坐标系->Coordinate:笛卡尔，极坐标，螺旋坐标可视化组件->Component:Legent,Tooltip,Annotation,Slider分面->Facet:数据分面，一图拆多图视觉通道

weixin_39585463·2023-07-29 06:08

AntV G2

安装通过npm安装npminstall@antv/g2--save成功安装完成之后，即可使用import或require进行引用。import{Chart}from'@

官方认证新生代农民工_平安喜乐·2023-07-29 02:27

antv系列图引擎X6、G6比对选择，并实现vue实例ER图

一、概述X6是基于svg，G6是基于canvas1、svg支持事件处理器，而canvas不支持事件处理器。（使用canvas实现事件操作较麻烦一些）2、canvas适合图像密集型的游戏，频繁地重绘图像，svg绘制的复杂度高时减慢渲染的速度。（大数据量渲染时选择canvas）总之：主要是这两点的，虽然本身做ER图，应该选择X6的，但是由于大数据渲染的，只能两者均衡使用G6二、ER图实例官方ER图实例

Program W·2023-07-28 12:33

antv/G6使用记录，调用save方法，对数据model进行改造，并重新渲染

antv/G6使用记录，调用save方法，对数据model进行改造，并重新渲染主要说明在使用antv/g6时，对于画布中的节点，做某种操作（例如改变节点的颜色等），保存数据，以供一个新的画布渲染的方法

lookingForw_4585·2023-07-27 15:26

企业开发中，如何在Vue中实现流程图

企业开发中，如何在Vue中实现流程图这是我在工作中，vue项目中，实现画出业务流程图，使用方法如以下：1、安装依赖这里使用第三方插件：@antv/g6详见官网@antv/g6$npminstall--save

原谅我很悲·2023-07-24 19:59

Antv G6 force分布式布局 icon“+“ “-“收缩自定义，关系图子节点

子节点收缩constcollapseIcon=(x,y,r)=>{//折叠return[['M',x-r,y],['a',r,r,0,1,0,r*2,0],['a',r,r,0,1,0,-r*2,0],['M',x-r+4,y],['L',x-r+2*r-4,y]]}constexpandIcon=(x,y,r)=>{//拓展return[['M',x-r,y],['a',r,r,0,1,0,r*

唐月123456·2023-07-24 15:30

antV使用教程入门

在移动端使用antVF2图表入门介绍1.通过npm安装npminstall@antv/f2--save成功安装完成之后，即可使用import或require进行引用。

不靠谱的作曲家·2023-07-23 12:42

标准合法的世界地图矢量数据(免费下载)

分享一个标准世界地图矢量数据免费下载的网站：https://l7.antv.antgroup.com/custom/tools/worldmap该网站支持多种数据格式下载、GeoJSON/KML/JSON

BetterQ.·2023-07-20 21:39

Antv L7 + mapbox 实现简单地图场景

实现场景1.创建地图场景2.自定义marker样式3.mapbox实现3D地图代码实现1.创建地图场景创建地图场景html,body{overflow:hidden;margin:0;}#map{position:absolute;top:0;bottom:0;width:100%;}varscene=newL7.Scene({id:'map',mapStyle:'light',//样式URLce

zlzhaoe·2023-07-19 03:32

「AntV」X6图编辑器的应用——流程图实现

效果展示在线预览源码SVG介绍阮一峰：SVG图像入门SVGtutorial因为antv/x6是基于SVG的图编辑器，所以SVG的知识有必要了解下的简介可缩放矢量图形【基于图形】全称：ScalableVectorGraphics

forguo·2023-07-17 22:43

Vue3 项目中使用 AntV X6 绘制流程图

X6是AntV旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG图、ER图等图应用.参考一些网站的写法，然后自己加上了撤销操作。

大阳plus·2023-07-16 04:18

vue antvG6产品流程图

地址：[vue-antvg6地址](https://gitee.com/shuaizi010/vue-antvg6.git)1安装vue-admin-template2进入目录安装所需包3安装必备库，antv

、刷刷·2023-07-16 04:44

vue3+vite+Ts 基于Antv/x6 绘制流程图

需求效果：需求：实现一个流程图，双击可对相应的组件进行一些功能操作；工具栈：这里使用@antv/x6，基于vue3+vite+ts进行开发官网地址：https://x6.antv.antgroup.com

GUOZHUOYUE.·2023-07-16 04:10

了解AntV/x6

官网：https://x6.antv.antgroup.com/介绍：X6是基于HTML和SVG的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建DAG图、ER图、流程图、血缘图等应用

隔窗看世界·2023-07-15 22:40

“Error: Ensure the container of the graph is specified and valid“：antv-x6报错

antv-X6快速上手报错：发现原因是因为：正确的代码如下：import{Graph}from'@antv/x6';constdata={//节点nodes:[{id:'node1',//String，

<每天一点>·2023-07-15 22:09

记录--VUE使用antv X6实现流程图

安装npminstall@antv/x6--save引入import{Graph,Addon}from"@antv/x6";说明：如果没有自定义拖拽到画布的需求引入Graph就行了。

会自己走的CV码农·2023-07-15 22:39

AntV 开发 —— x6 图编辑引擎 v2

前文再续前序：v1笔记碎碎念：此文个人笔记，官网文档搬运x6版本：2.9.7x6-vue-shape版本：2.0.11x6-plugin-selection版本：2.1.7vue版本：2.6.11vue-template-compiler版本：2.6.11Element-UI版本：2.15.13示例只展示单个节点的，多节点请下载demo自行查看源码demo均在易水GIT一：步骤：1——创建vue2

潇潇剑-易水阁·2023-07-15 22:03

「AntV」使用AntV X6实现流程编排设计器

通过对BPMN的深入学习，以及对业界成熟的流程编排设计器的调研，了解到要研发一个流程编排设计器，需要实现如下几个主要的功能：支持创建各种流程图元素，包括任务（活动）、网关、事件等。支持绘制各种连接线，包括普通连接线、条件连接线、消息连接线等。支持流程图的编辑，包括元素的选择、移动、删除、复制、粘贴等。支持流程图的保存，包括保存流程图数据、导入/导出流程图数据等。具备良好的可扩展性，可以通过插件等方

青菜小王子·2023-07-15 22:30

创建可交互的图表：AntV X6实现预留空白位置、拖拽吸附与信息修改弹框

使用AntVX6首先用AntVX6官网的一句简介了解一下什么是X6X6是基于HTML和SVG的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建DAG图、ER图、流程图、血缘图等应用。知道了X6是什么，那么我们就要开始使用了首先得确定框架，其次就要安装X6由于项目是vue2的，所以选择的框架为vue2，当然自己也在vue3中写了一版，如有需要vue3的请私信1.首先在项目中新建

木得是·2023-07-15 22:30

推荐频道

AntV