AntV G6的安装与搭建

项目中有遇到一个偏展示,但echarts的graph实现效果又不是很理想,所以就研究了antv G6,到目前为止支持的还可以,所以写几篇文件记录一下学习G6的过程

antv官网

首先,我在官网例子中找到了G6,感觉G6比较适合我们现在的拓扑图需求,所以就开始了一些简单的研究

官网的快速上手

1.安装与引用

<1>使用npm安装与引用

(1)在项目中使用npm包引入,需要使用如下命令安装g6

npm install --save @antv/g6

具体效果如下图所示:

(2)在需要用到G6的组件或JS文件中导入:

import G6 from '@antv/g6';

具体效果如下图所示:

<2>使用cdn的方式引入,这种方法比较简单,我这边是vue例子,所以对html的内容就不详细解释了

 // version <= 3.2 <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script> // version >= 3.3 <script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script> // version >= 4.0 <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>

原文链接:https://blog.csdn.net/qq_36509946/article/details/122092815?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816782390562794%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816782390562794&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-16-122092815-null-null.article_score_rank_blog&utm_term=%E6%90%AD%E5%BB%BAcdn

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/6490

(0)
上一篇 2022年9月5日
下一篇 2022年9月5日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml