• 2025-01-10常见的图形库对比 Echarts Highcharts AntV
    图形库图形库特点图表类型适用场景依赖项官网/文档ECharts功能丰富,支持大规模数据,交互性强折线图、柱状图、饼图、地图、雷达图、散点图、热力图等复杂数据可视化无https://echarts.apache.org/Chart.js简单易用,轻量级,支持响应式设计折线图、柱状图、饼图
  • 2024-12-30@antv/g2 使用小结
    版本:5.2.10一、引入@antv/g2import{Chart}from"@antv/g2";二、初始化#container里类似echarts,可以用id也可以用refsletchart=newChart({container:"pie-chart",autoFit:true});#如果chart已存在,就是重复渲染的情况if(chart){chart.changeData(Data);
  • 2024-09-14vue2 antv x6 入门 (一)画布、节点、边
    安装#npmnpminstall@antv/x6--save#yarnyarnadd@antv/x6 1.初始化画布<divid="container"></div>import{Graph}from'@antv/x6'constgraph=newGraph({container:document.getElementById('container'
  • 2024-09-03vue3整合antv x6实现图编辑器快速入门
    安装:npminstall@antv/x6--save如果使用umd包,可以使用下面三个CDN中的任何一个,默认使用X6的最新版:https://unpkg.com/@antv/x6/dist/index.jshttps://cdn.jsdelivr.net/npm/@antv/x6/dist/index.jshttps://cdnjs.cloudflare.com/ajax/libs/antv-x6/2.0.0/index.
  • 2024-07-17Axure引用Antv-G2
    本文分为5个模块:引用模版、说明---引用模版、说明---antv-g2图表示例代码、axure引用步骤、示例代码引用模版:javascript:varscript=document.createElement('script');script.type="text/javascript";script.src="https://unpkg.com/@antv/g2/dist/g2.min.js";document.he
  • 2024-07-11AntV X6 图编辑引擎速通
    前言:参考[AntVX6官网](https://x6.antv.antgroup.com/)一、简介X6可以快速搭建DAG图、ER图、流程图、血缘图等应用。二、快速上手1.安装npminstall@antv/x6--save#oryarnadd@antv/x6#orpnpmadd@antv/x62.使用2.1初始画布在页面中创建一个画
  • 2024-06-03antV x6 禁止拖拽出新的线,鼠标滑过线设置高亮
    antVx6中的ER图; 代码如下://鼠标滑过事件graph.on('edge:mouseenter',({cell})=>{cell.removeTools()cell.attr('line',{stroke:'blue',strokeWidth:2})cell.zIndex=0})//鼠标滑出事件graph.o
  • 2024-06-03「AntV」X6 自定义vue节点(vue3)
    官方文档本篇文档只讲解vue3中如何使用,vue2的可以参考下官方文档安装插件@antv/x6-vue-shape添加vue组件既然使用vue节点,那么我们就需要准备一个vue的组件,这个组件就是节点的一些样式,根据你们的ui自行写代码即可<template><div>节点名称</div><div>节点描述</div>
  • 2024-04-09antv下拉框展开选项到刚好到浏览器底部触发闪烁,会回弹一下
    关闭下拉框的动画样式.ant-select-dropdown.slide-up-appear.slide-up-appear-active.ant-select-dropdown-placement-bottomLeft,.ant-select-dropdown.slide-up-enter.slide-up-enter-active.ant-select-dropdown-placement-bottomLeft{ -webkit-animation-name:unset;
  • 2024-01-05【可视化库对比】ECharts、AntV、D3和Three
    本文写作目的:大家在使用可视化库创作可视化作品的时候,可能会产生这样的问题:“现如今成熟的可视化库有这么多,我到底该选择哪一个呢?”这其实也是我在学习数据可视化课程的时候面临的一个问题。因此本文旨在对比上述广泛被使用到的4个前端可视化库:Echart、AntV、D3和Three,了解它们的
  • 2023-11-14vue3 AntV-X6 引入插件报错
    vue3AntV-X6引入插件报错:UncaughtTypeError:Cannotreadpropertiesofundefined(reading'ToolItem')vite引入路径的问题解决就是在引入插件的路径后面加上/lib:import{Keyboard}from'@antv/x6-plugin-keyboard/lib'直接写 import{Keyboard}from'@antv/
  • 2023-09-20vuejs+antv-g6绘制图表
    该内容包括antv-g6官网地址、antv-g6的基本使用(包括自定义节点、常用插件(右键菜单等)、基本事件、目前我所遇到的一些需求)。1、antv-g6的官网地址:https://g6.antv.antgroup.com/examples2、安装antv-g6组件npminstall@antv/g6 3、创建antvView.vue文件使用antv/g6
  • 2023-08-31g2条形图填充色设置渐变色
    g2条形图填充色设置渐变色为了方便可以直接访问github链接https://github.com/antvis/G2/discussions/5486在antv/g24.*版本在4.*版本是不支持设置fill属性为linear-gradient(-90deg,white0%,darkgreen100%)设置完会是黑色,正确做法如下://举个
  • 2023-08-22「AntV」x6 框选添加右键菜单
    今天在群里有个小伙伴提出了这么个问题:如何在框选完成后给框选的区域添加一个右键菜单的功能,我看到了这个问题后也是有点懵,心里想着怎么还有这个需求,直接快捷键删除不是更好吗,谁知这位小伙伴也是这么写的,奈何客户要添加右键菜单的功能,所以说,客户最大。既然人家都提出这个需求呢,那
  • 2023-06-11「AntV」景点轨迹数据获取与L7可视化
    1.引言L7地理空间数据可视分析引擎是一种基于WebGL技术的地理空间数据可视化引擎,可以用于实现各种地理空间数据可视化应用。L7引擎支持多种数据源和数据格式,包括GeoJSON、CSV等,可以快速加载和渲染大规模地理空间数据。L7引擎还提供了丰富的可视化效果和交互功能,包括热力图
  • 2023-06-10「AntV」路网数据获取与L7可视化
    1.引言L7地理空间数据可视分析引擎是一种基于WebGL技术的地理空间数据可视化引擎,可以用于实现各种地理空间数据可视化应用。L7引擎支持多种数据源和数据格式,包括GeoJSON、CSV等,可以快速加载和渲染大规模地理空间数据。L7引擎还提供了丰富的可视化效果和交互功能,包括热力图
  • 2023-05-30AntV L7 快速入门示例
    1.引言L7地理空间数据可视分析引擎是一种基于WebGL技术的地理空间数据可视化引擎,可以用于实现各种地理空间数据可视化应用。L7引擎支持多种数据源和数据格式,包括GeoJSON、CSV等,可以快速加载和渲染大规模地理空间数据。L7引擎还提供了丰富的可视化效果和交互功能,包括热力图
  • 2023-05-10AntV
    AntV入门接触背景今天是写着大论文的日子。吃饭的时候突然看到B站体验科技发了新的视频,是个好看的小姐姐——缨缨的自传,其为S2的负责人,那也正好借此机会入门AntV。简单说一下AVA产品矩阵:常规数据统计:G2-G2Plot、S2关系数据:G6-Graphin、X6-XFLOW地理空间数据:L7-L7Plot
  • 2023-04-27antv x6 神奇的图片边框
    昨天才把html节点中的图片转成base格式的,今天就发现一个用户体验的问题;那么是啥呢?就是我从左侧的树形菜单中拖拽节点的时候(鼠标按下也是同样问题),发现节点的图片区域那里会出现一个边框,持续时间不是很长,就几毫秒的时间,但是当你连续拖拽几个不同节点的时候就会发现这个边框竟然又消
  • 2023-04-04antd modal弹出框,渲染antv图表
    弹出框的图标渲染获取不到dom,所以不能直接渲染,需要先判断Modal弹出框dom节点加载完成后,才能开始渲染。。。。。快下班了,直接上全部代码,不解释了<template><a-modalv-model:visible="visible":destroyOnClose="true"title="评估全景"@ok="cancel"@ca
  • 2023-03-31vue2中使用antv/G6节点内容可滚动的ER图
    先举一个栗子: 如果不会请移步到官网的栗子,请点击查看狠人话不多,直接给大家上代码:整体代码片段<template><divid="container"style="position:relative;"></div></template><script>/*eslint-disable*/importG6from"@antv/g6";i