资讯专栏INFORMATION COLUMN

Vue中使用antv g6

IT那活儿 / 1187人阅读
Vue中使用antv g6

点击上方“IT那活儿”公众号,关注后了解更多内容,不管IT什么活儿,干就完了!!!


g6是什么

G6 是一个图可视化引擎。
它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

安装与引入

在项目目录下执行npm install --save @antv/g6;

vue文件中引入import G6 from @antv/g6。


快速使用

步骤1:我们需要创建用于容纳 G6 绘制的图的容器,div标签,g6在绘制时会在容器内追加canvas标签,将图绘制在里面。
步骤2:数据准备,g6数据源是一个json对象,对象中有节点nodes,边edges字段,我们可以对节点,边进行属性配置,比如节点名称,大小,颜色等,边就是起始点到目标点之间的连线,也可以配置其名称,颜色等。
步骤3:实例化全图,创建关系图(实例化)是需要为图设置容器,宽和高。
除了在节点,边数据源上进行属性配置外,还可以在实例化全图时进行全局配置,对所有节点,边统一配置,节点统一配置在defaultNode对象,边defaultEdge对象,在modes对象里设置画布的拖拽,缩放,节点拖拽。
步骤4:配置数据源,渲染。
注:关系图渲染要在mounted里。


本文作者:朱 维(上海新炬王翦团队)

本文来源:“IT那活儿”公众号

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/129195.html

相关文章

  • antV G6流程图在Vue使用

    原文首发于我的博客,欢迎点击查看获得更好的阅读体验~ 更新内容 最新版本 请关注G6官方的github仓库https://github.com/antvis/g6 2.x版本后,可以通过npm install直接安装使用了 相关资源下载 antV G6( v1.2.8) 字体图标 最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看...

    cnio 评论0 收藏0
  • antV G6流程图在Vue使用

    原文首发于我的博客,欢迎点击查看获得更好的阅读体验~ 更新内容 最新版本 请关注G6官方的github仓库https://github.com/antvis/g6 2.x版本后,可以通过npm install直接安装使用了 相关资源下载 antV G6( v1.2.8) 字体图标 最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看...

    张宪坤 评论0 收藏0
  • G6 2.0 开源发布 -- 裂变·聚变

    摘要:从年月,立项至今,已经过去了年半的时间。期间获得过赞誉,也有吐槽,取得一定成就,也暴露过不少问题。这次,我们很高兴的告诉大家,今天除了开源,还会开放取得了阶段性成果的详见链接。与产品深度融合为了避免和成为工程师闭门造车的产物。 showImg(https://segmentfault.com/img/remote/1460000015199265?w=1500&h=756); G6 是...

    ThinkSNS 评论0 收藏0
  • G6文档

    这个项目采用的是G6(阿里开源),由于现在已经没有维护了,导致很多的配置,参数,方法示例demo等都是自己摸索的,大概介绍下本案例中使用到的以及一些后续维护可能会用到的。 Editor 该类是整个编辑器的主控类,其主要职责是将编辑器的各个组件协同起来。 //实例化: import G6Editor from @antv/g6-editor const editor = new G6Editor()...

    venmos 评论0 收藏0
  • G6的插件系统

    摘要:的插件系统做的相当完善可惜文档没有具体说到这里整理一下的插件插件大致分为四种类型行为可以理解为事件处理的插件就是和的样式同样是插件插件的布局之类这部分涉及的算法比较多插件就是自定义工具函数将其内置中这四种插件都有各自的写法以及但是文档中没有 G6的插件系统做的相当完善, 可惜文档没有具体说到. 这里整理一下g6的插件. 插件大致分为四种类型: behaviour 行为, 可以理解为事...

    Ilikewhite 评论0 收藏0
  • [BizCharts学习笔记] --- 数据可视化

    摘要:所以笔者选择了,为什么会选择一是因为它是阿里出品,经历了一年左右的打磨已经完全适应在使用其次是它支持自由定制,不会像那样高度封装,所以在开发复杂图表的时候会更加得心应手。只是阿里图表库中的一员。 实际上,在数据可视化这一块笔者并没有很多的开发经历和经验,不过正是因为这个问题笔者才决定学习一门数据可视化框架来弥补自己在这一方面的不足。在这个大数据统治的时代,数据能给我们提供前所未有的便捷...

    CoffeX 评论0 收藏0

发表评论

0条评论

IT那活儿

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<