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
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
前端数据可视化之
AntV
的G2Plot、G6、L7入门
AntV
是蚂蚁金服全新一代数据可视化解决方案,
AntV
不是一个解决方案,他是一套解决方案,
AntV
包括以下解决方案G2:可视化引擎G2Plot:图表库G6:图可视化引擎Graphin:基于G6的图分析组件
Ashley的成长之路
·
2023-11-26 02:34
数据可视化
数据可视化
antV
g6
g2Plot
L7
antV
G6中以html为节点的自动分层布局数据可视化详解
经过一段时间的技术调研,最终选择蚂蚁金服的数据可视化规范
antv
家族中的G6。在引入项目之前,还是先从官网的示例开始,示例还挺多的、基本都是针对单个点进行讲解。
weixin_34310127
·
2023-11-26 02:03
javascript
ViewUI
流程图 自定义函数_家人们 基于
AntV
G6画流程图了解一下
前言:双节假期已进尾声,今天和大家分享一下,近期,重点实操的蚂蚁开源的图可视化引擎——AntVG6(https://g6.
antv
.vision/zh)。G6能干嘛呢?画关系图!
weixin_39795284
·
2023-11-26 02:03
流程图
自定义函数
AntV
X6源码简析
前言
AntV
是蚂蚁金服全新一代数据可视化解决方案,其中X6主要用于解决图编辑领域相关的解决方案,其是一款图编辑引擎,内置了一下编辑器所需的功能及组件等,本文旨在通过简要分析x6源码来对图编辑领域的一些底层引擎进行一个大致了解
维李设论
·
2023-11-26 02:03
前端
前端
AntV
X6
图编辑
可视化
Antv
G6
前言一、使用步骤1.引入库Step1:使用命令行在项目目录下执行以下命令:npminstall--save@
antv
/g6Step2:在需要用的vue文件中G6的JS文件中导入:importG6from
qq_51486722
·
2023-11-26 02:32
python
人工智能
自然语言处理
Antv
踩坑—导入画布数据监听画布渲染完成事件
Antv
踩坑记录之监听画布渲染完成事件前言一、导入后台返回的json数据1.页面判断新增/详情页2.后台json数据二、监听1.核心监听2.console总结
Antv
踩坑记录之监听画布渲染完成事件事件监听目前来说
木村柘哉
·
2023-11-26 02:01
antv
vue
vue-antd-pro
vue
antv
-x6使用及总结 | 京东物流技术团队
1简介
AntV
是一个数据可视化(https://so.csdn.net/so/search?
京东云开发者
·
2023-11-26 02:00
前端
antv-x6
前端
可视化
echarts与
antV
学习与实践笔记
目前最流行的两个画图工具,一个是echarts,一个是
antV
。
溜溜的阿溜
·
2023-11-26 02:29
【前端】工具类
javascript
数据可视化
antv
/g6的学习总结
新建一个简单实例1、使用命令行在项目目录下执行以下命令cnpminstall--save@
antv
/g62、创建容器3、在需要用的G6的JS文件中导入importG6from'@
antv
/g6';4、数据准备引入
Seven_Ting
·
2023-11-26 02:55
可视化工具
前端
React使用@
antv
/g6绘制树形图
参考:官网:@
antv
/g6官网:React中使用@
antv
/g6官网:使用dom自定义节点⚠️注意:G6的节点/边事件不支持DOM类型的图形。如果需要为DOM节点绑定事件,请使用原生DOM事件。
小小开发者_
·
2023-11-25 06:09
在Vue中使用Echarts
端评价最高的Javascript可视化工具库(入手难)ECharts.js百度出品的一个开源Javascript数据可视化库Highcharts.js国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
AntV
〔晴【天】º〕
·
2023-11-25 03:22
Vue
vue.js
echarts
前端
Antv
/G2 柱状图添加自定义点击事件
柱状图点击事件constdata=[{month:'Jan',city:'Tokyo',temperature:7},{month:'Jan',city:'London',temperature:3.9},{month:'Feb',city:'Tokyo',temperature:6.9},{month:'Feb',city:'London',temperature:4.2},{month:'Ma
*且听风吟
·
2023-11-21 18:43
#
html
前端
Antv
/G2 分组柱状图+折线图双轴图表
分组柱状图+折线图双轴图表::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}#chartcontainer{margin:50pxauto;text-align:center;}/*Fixingiframewindow.innerHeight0issueinSafari*/docume
*且听风吟
·
2023-11-21 18:43
#
html
前端
Antv
/G2 自定义折线图线条样式及tootip提示信息样式
自定义折线图线条样式及tootip提示信息样式#chartcontainer{margin:50pxauto;text-align:center;}/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeightconstdata=[{city:'London',month:'Jan',trate:18.9},{c
*且听风吟
·
2023-11-21 18:42
#
html
html
antd G6 画图表,渲染时连接线报 e.edge is not a function 的解决方法
最近项目中新引入
antv
的g6来话一些流程图,遇到一个问题,render渲染传进来的数值总会报e.edgeisnotafunction的错,但是我本地自己写个假数据却没有任何问题,排查了一下午,终于找到病症所在
七月pro
·
2023-11-21 16:37
工作总结
javascript
开发语言
ecmascript
npm install @
antv
/xflow无法下载该依赖
一、前言最近在学习使用基于
antV
-X6框架搭建的Xflow组件,在开始下载依赖时就遇到了问题,下面详细说明@
antv
/xflow无法下载的情况。
大头程序员不头大
·
2023-11-21 12:47
前端
npm
前端
react.js
g6 -TreeGraph案例:任务和任务流关系树图
并且可以已任务的维度进行检索,均展示名称:image.png三、选择工具选择很重要,花了两天时间对比了echarts、
antv
里的G2、G6。
cq_春风呼呼的吹
·
2023-11-20 10:34
前端大屏项目思路-如何缩放
想必近几年前端的数据可视化越来越重要了,很多甲方爸爸都喜欢那种炫酷的大屏幕设计,类似如下这种:遇到的这样的项目,二话不说,echarts或者
antv
,再搭配各种mvvm框架(react,vue),找二次封装过的组件
visionke
·
2023-11-16 18:10
js
css
antv
/x6 使用Stencil实现拖拽生成节点
antv
/x6使用Stencil实现拖拽生产节点安装stencil插件引用Stencil初始化拖拽生成节点安装stencil插件npminstall@
antv
/
[email protected]
.伊泽瑞尔
·
2023-11-16 15:19
antv
前端
javascript
antv
/x6 键盘快捷键事件
antv
/x6键盘快捷键事件引用插件取消/重做放大/缩小复制/剪切/粘贴引用插件安装npminstall@
antv
/x6-plugin-selection--savenpminstall@
antv
/x6
.伊泽瑞尔
·
2023-11-16 15:11
antv
前端
前端
javascript
在Vue中使用
Antv
G2
1.安装依赖可以通过npm添加依赖npmi@
antv
/
[email protected]
@
antv
/
[email protected]
.引入依赖在main.js中写入以下内容:importVuefrom'vue'import'vue-g2
测试狗一枚
·
2023-11-16 10:54
vue.js
javascript
elementui
在vue中使用
antV
-G2展示柱状图之组件参数设置详解
在在vue中使用
antV
-G2展示柱状图中介绍了如何在vue中使用
antV
-G2展示柱状图,但是相关的图表参数和chart对象的方法,没有做深度深度介绍。
情天可视化
·
2023-11-16 10:51
antV-G2
vue.js
javascript
前端
Vue3.x中使用
AntV
G6绘制力导图实现自适应
Vue3.x中使用AntVG6绘制力导图实现自适应一、需求需求1:Vue3.x项目下使用AntVG6绘制力导图谱需求2:图谱节点为两个IP地址,节点间存在多条连线情况需求3:鼠标悬浮到节点上方时,高亮当前节点并出现tooltip气泡提示,展示相关信息需求4:点击图谱连线后需要高亮关联节点和当前连线需求5:图谱大小需要保证自适应(这里可以是根据窗口自适应,也可以是可调整大小的弹窗DOM内的自适应,后
BreenCL
·
2023-11-16 10:20
Vue
vue.js
AntV
G6
G6
vue
Antv
/G2 折线图 DataSet 数据展开成指定格式
DataSet文档G23.2DataSet文档Demo:双折线图/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeight//在一行中保存多个城市的数据,需要将数据转换成//{month:'Jan',city:'Tokyo',temperature:3.9}vardata=[{month:'Jan',Toky
*且听风吟
·
2023-11-16 10:50
#
html
前端
vue3 tsx 项目中使用
Antv
/G2 实现多线折线图
Antv
/G2文档
Antv
/G2双折线图安装依赖项目中安装
antv
/g2依赖库:npminstall@
antv
/g2--save安装成功:项目使用新建文件IndicatorTrend.tsx:import
*且听风吟
·
2023-11-16 09:48
#
Typescript
#
Vue
3
前端
可视化图表Highcharts、Echarts、
AntV
对比
一.HighchartsHighsoft是挪威的一家公司,旗下主要三大产品包括Highcharts,Highmaps和Highstock。其中Highcharts在图表领域处于领先水平,是由纯JavaScript编写的开源图表库。自2009年推出以来,Highcharts一直是竞争激烈的市场中首要且增长最快的图表工具。目前,中文官网是由简数科技提供的Highcharts综合性服务网站,最早是在20
. . . . .
·
2023-11-14 11:56
前端开发
bizcharts图表封装之基础折线图(带Slider)
from"bizcharts";//@ts-ignoreimportSliderfrom'bizcharts-plugin-slider';//@ts-ignoreimportDataSetfrom'@
antv
懒得懒
·
2023-11-14 04:03
bizchart
前端工具
antv
g2的理解总结
G2G2本身是一门图形语法,G2和传统的图表系统(HighCharts,ACharts等)不同,G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形,让你在使用它时候不用关心绘图细节,只需要知道你想通过它怎么展示你关心的数据。echarts更多的是配置options来显示图片,出发点不同。(g2也同样支持配置项声明)G2构成一个可视化框架需要四部分:数据处理模块,对数据进行加工
weixin_34245749
·
2023-11-14 04:02
javascript
json
人工智能
ViewUI
antvg2 环图轮播_
antv
G2 图标,怎么控制Y轴的0轴,又怎么将负数显示在X轴下方?...
问题描述AntVG23.X版本折线图,无法控制Y轴的0轴位置,也无法让负值显示在X轴下方问题出现的环境背景及自己尝试过哪些方法1.修改chart.scale(option)配置里的Y轴min,max,range属性等都无法处理2.创建新的view(option),并尝试修改view中配置的min,max也无法处理相关代码importReact,{useEffect}from'react';impo
ST-柚子君
·
2023-11-14 04:02
antvg2
环图轮播
antv
g2字体阴影_
antv
g2的明白总结
G2G2自身是一门图形语法,G2和传统的图表体系(HighCharts,ACharts等)差别,G2是一个基于统计剖析的语义化数据可视化体系。它真正做到了让数据驱动图形,让你在运用它时刻不必体贴画图细节,只须要知道你想经由历程它怎样展现你体贴的数据。echarts更多的是设置options来显现图片,起点差别。(g2也一样支撑设置项声明)G2构成一个可视化框架须要四部份:数据处理模块,对数据举行加
weixin_39928017
·
2023-11-14 04:32
antv
g2字体阴影
antV
G2在vue中的使用
以双折线图为例记录,最终效果图安装npminstall@
antv
/g2--save在需要的vue文件中引入importG2from'@
antv
/g2';//引入G2import{Chart}from"@
kleinBlue.
·
2023-11-14 04:31
web前端
Vue
vue.js
antv
G2 实战入门教程-折线图-引入JS(Ajax获取数据动态展示)
公司之前用echarts做图表,后来产品大哥让改用G2,没办法上吧。两种方式使用G21,引入JS,版本不要太低,因为有的版本低一些东西没有,容易报错(比如:chart.dataisnotafunction)。我就踩了这个坑,后来用的版本是4.0.15我用的第一种直接引入JS代码示例:注意:下面有一个data的数据,这个数据你可以用Ajax调接口拿到页面上,这个就是你要展示的数据。这个数据是接口处理
七月吃橘子
·
2023-11-14 04:30
G2
javascript
基于
AntV
G2实现一个通用可视化Vue插件
前言AntVG2坚持自然、确定性、意义感、生长性的设计价值观。与其他可视化插件不同的是,G2是以数据驱动的高交互可视化图形语法,具有高度的易用性和可扩展性。随着业务可视化不断发展,数据复杂度越来越高。实现一个通用的可视化插件越来越迫切。本文基于G2实现了一个可视化Vue插件——p-charts。提示:p-charts是基于AnVG2v3.x最新版本,因为v3.x版本文档比较成熟。后续会紧跟v4.x
liupan6889
·
2023-11-14 04:30
前端
Vue
数据可视化
vue
components
可视化
vue:
antV
G2在vue中的使用(阿里图表,类似echarts)
效果比echarts好看官方文档:https://g2.
antv
.vision/zh/docs/manual/getting-started转载来源:https://www.jianshu.com/p/
手把手入门
·
2023-11-14 04:30
Vue
web前端
echarts
antv
Antv
/G2 图表背景实线改为虚线
坐标轴-Axis文档绘图属性-ShapeAttrs文档图表背景实线改为虚线代码示例:chart.axis("value",{grid:{//背景网格刻度线样式line:{style:{lineWidth:0.5,lineDash:[5,2],//虚线},},},});未设置前页面效果:添加代码配置:设置后页面效果:
*且听风吟
·
2023-11-14 04:00
#
html
前端
Antv
/G2 折线图 使用 DataSet 进行数据排序
文档安装浏览器引入可以通过标签引入在线资源或者本地脚本:这样,在后续脚本中就可以得到全局变量DataSet:constdv=newDataSet.DataView();命令行安装npminstall@
antv
*且听风吟
·
2023-11-14 04:59
#
html
前端
antv
/g2中的柱状图一些配置
g2图表有些api的属性不全,文档看着有些费劲,所以整理了一些项目中用到的柱状图的简单配置项图标初始化constchart=newChart({container:this.rootRef.current,//图标容器使用react的createRef()指定autoFit:true,//图标的宽度自适应height:isYesNoLabel?500:chartH,});chart.data(da
袁敢
·
2023-11-09 11:34
数据可视化
javascript
数据可视化
html
antv
/l7+高德地图+天气弹窗
1、引入mapimport{GaodeMap}from'@
antv
/l7-maps';//默认引入高德1.ximport{Scene,Marker,MarkerLayer,Popup}from'@
antv
办公室的忍者
·
2023-11-09 11:03
地图
大前端
antv
/g2在react中画柱状图,条形图与饼图
效果图cnpminstall@
antv
/g2--save复制代码:importReact,{Component}from'react'import{Chart}from'@
antv
/g2';classHelloextendsComponent
段友吊缠腰
·
2023-11-09 10:56
前端
react
reactjs
antv
G2Plot折线图+多个堆叠柱状图
1.首先是组件的一个安装:npminstall@
antv
/g2plot--save2.dom的准备 .one{ width:500px; height:200px; border:1pxsolidred
沙子迷了蜗牛眼
·
2023-11-09 10:24
javascript
开发语言
ecmascript
前端
css
Antv
/G2 多折线图双坐标轴
多折线图双坐标轴#chartcontainer{margin:50pxauto;text-align:center;}/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeightvardata=[{date:'2023/8/1',type:'london',value:4623,rate:0.33},{date
*且听风吟
·
2023-11-09 10:48
#
html
html
AntV
/G2 柱状图+折线图双轴图表
柱状图+折线图双轴图表::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}/*Fixingiframewindow.innerHeight0issueinSafari*/document.body.clientHeight;vardata=[{date:'10:10',type:4,va
*且听风吟
·
2023-11-09 10:13
#
html
前端
antv
/x6 自定义html节点并且支持动态更新节点内容
antv
/x6自定义html节点效果图定义一个连接桩公共方法注册图形节点创建html节点动态更新节点内容效果图定义一个连接桩公共方法constports={groups:{top:{position:'
.伊泽瑞尔
·
2023-11-07 07:27
antv
html
前端
javascript
antv
/g2图表自定义tooltip展示
默认图效果图需要自定义tooltip标题以及根据是字段显示名称和数值chart.interval().transform({type:'stackY'}).data(dataList).encode('y','value').encode('color','name').tooltip({title:(d)=>'办理状态',//标题设置}).tooltip((d,//每一个数据项index,//索
跳跳的小古风
·
2023-11-07 03:49
可视化echarts
higncharts
前端
vue 中使用 @
antv
/g2图表库
1.安装npminstall@
antv
/g2--save2.使用2.1引入文件和基础配置import{Chart}from'@
antv
/g2';2.2创建div图表容器2.3编写图表绘制代码2.3.1newChart
一个没有灵魂的女程序媛
·
2023-11-07 03:19
上一页
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
其他