admin管理员组文章数量:1573361
阿里AntV-G6使用介绍 一 基础篇
AntV G6 官网
AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。
文章目录
- 阿里AntV-G6使用介绍 一 基础篇
- 一、G6 是什么?
- 二、使用步骤
- 1.安装&引入
- 2.基本使用
- 三、结果图
一、G6 是什么?
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。
二、使用步骤
1.安装&引入
npm install --save @antv/g6 //安装
import G6 from '@antv/g6'; //在需要的js文件引入
2.基本使用
1.创建容器
<div id="container"></div>
<style>
#container{
width: 100%;
height: 800px;
}
</style>
2.数据准备,引入 G6 的数据源为 JSON 格式的对象
const data = {
id: '第一个',
label: '第一个',
children: [
{
id: '第二个',
label: '第二个',
children: [
{ id: '第三个', label: '第三个' },
{ id: '第四个', label: '第四个' },
]
},
{
id: '第五个',
label: '第五个',
children: [
{
id: '第六个',
label: '第六个',
children: [
{ id: '第七个', label: '第七个', },
]
},
]
},
]
}
3、初始化图表
Graph 的生命周期为:初始化—>加载数据—>渲染—>更新—>销毁。
initTree(data) {
// 画布宽高
const width = document.getElementById('container').scrollWidth || 800;
const height = document.getElementById('container').scrollHeight || 800;
const graph = new G6.TreeGraph({
// 图的 DOM 容器,可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
container: 'container',
// 指定画布宽度,单位为 'px'。
width,
// 指定画布高度,单位为 'px'。
height,
// 是否开启画布自适应。开启后图自动适配画布大小。
fitView: true,
// v3.5.1 后支持。开启后,图将会被平移,图的中心将对齐到画布中心,但不缩放。优先级低于 fitView
fitCenter: true,
// 最小缩放比例
// minZoom: 1.5,
// 最大缩放比例
maxZoom: 1.5,
// 指定边是否连入节点的中心
linkCenter: true,
// 设置画布的模式
modes: {
default: [
{
// 只适用于树图,展开或收起子树
type: 'collapse-expand',
// trigger:收起和展开节点分组的方式。支持 'click' 和 'dblclick' 两种方式。默认为 'dblclick',即双击。
trigger: 'click',
// onChange:收起或展开的回调函数。警告:V3.1.2 版本中将移除;
onChange: function onChange(item, collapsed) {
const data = item.get('model').data;
data.collapsed = collapsed;
return true;
},
},
// 拖拽画布;
'drag-canvas',
// 缩放画布;
'zoom-canvas',
],
},
// 默认状态下节点的配置,比如 type, size, color。会被写入的 data 覆盖。
defaultNode: {
type: 'circle',
// size 是单个数字,表示直径
size: 26,
// 指定边连入节点的连接点的位置(相对于该节点而言),可以为空。例如: [0, 0],代表节点左上角的锚点,[1, 1],代表节点右下角的锚点
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
// 节点样式
style: {
// 节点填充色
fill: '#C6E5FF',
// 节点的描边颜色,''就是没颜色的意思
stroke: '#5B8FF9',
// 那个小手
cursor:'pointer',
},
// Object 类型。配置标签文本
labelCfg: {
// 标签的样式属性。
style: {
// 文本颜色
fill: '#000000',
// 文本字体大小
fontSize: 14,
},
},
},
// 默认状态下边的配置,比如 type, size, color。会被写入的 data 覆盖。
defaultEdge: {
// 指定边的类型,可以是内置边的类型名称,也可以是自定义边的名称。默认为 'line'
type: 'cubic-vertical',
// 边的样式属性
style: {
// 边的颜色
stroke: '#A3B1BF',
},
},
// 布局配置项,使用 type 字段指定使用的布局方式
layout: {
// 布局名称
type: 'compactBox',
// layout 的方向。
direction: 'TB', // H / V / LR / RL / TB / BT
// 下面的参数都是一个节点,当存在某些奇葩点节点的时候,可以通过以下控制
// 节点 id 的回调函数
getId: function getId(d) {
return d.id;
},
// 节点高度的回调函数
getHeight: function getHeight() {
return 16;
},
// 节点宽度的回调函数
getWidth: function getWidth() {
return 16;
},
// 节点纵向间距的回调函数
getVGap: function getVGap() {
return 40;
},
// 节点横向间距的回调函数
getHGap: function getHGap() {
return 70;
},
},
// 动画
animate: true,
});
// 设置各个节点样式及其他配置,以及在各个状态下节点的 KeyShape 的样式
// 该方法必须在 render 之前调用,否则不起作用
// 使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置
graph.node(function (node) {
return {
label: node.label,
labelCfg: {
position: node.children && node.children.length > 0 ? 'top' : 'bottom',
offset: 5,
style: {
textAlign: 'center',
},
},
};
});
// 初始化的图数据
graph.data(data);
// 根据提供的数据渲染视图。
graph.render();
// 让画布内容适应视口
graph.fitView();
}
三、结果图
版权声明:本文标题:vue中使用AntV G6 — 基础篇 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727745894a1127794.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论