【官网地址:快速上手 | F6】
1、安装:
npm install --save @antv/f6
2、引入:
import F6 from '@antv/f6';
3、 使用:
①创建关系图的容器;
②数据准备;
③创建关系图;
④配置数据源、渲染。
示例:
首先,准备一个id为mountNode的容器用来放置流程图:
<template>
<div>
<div id="mountNode"></div>
</div>
</template>
在js中引入要用到的插件及布局:
// 引入插件配置
import F6 from '@antv/f6';
// 引入层次布局
import dagreLayout from '@antv/f6/dist/extends/layout/dagreLayout.js';
在这里,我用到的是自定义布局和节点,在created生命周期中绘制好自定义布局、自定义节点.我这里用到的例子是流程图,需要使用层次布局,与引入的布局相关联:
created() {
// 自定义一个层次布局
F6.registerLayout('dagre', dagreLayout);
// 自定义node节点
this.customNode()
}
自定义节点是该示例是通过使用svg标签重新绘制的节点样式 ,以免混淆,在这里需要声明一下:(箭头函数内部的svg标签是我这个例子使用到的节点样式,若要修改节点样式,在箭头函数后面根据自己的需求绘制即可),重点是绘制自定义节点要使用 F6.registerNode:
customNode () {
F6.registerNode(
'dom-node',
(cfg) => `
<group>
<rect style={{
width: 50,
height: 50,
stroke: ${ cfg.isAlarm ? '#f76e6f' : '#4f55e7' },
fill: ${ cfg.isAlarm ? '#f76e6f66' : '#4f55e766' },
radius: 25
}}>
<image style={{
img: '${this.iconsFun(cfg)}',
width: 30,
height: 30,
marginTop: 8,
marginLeft: 10
}} />
</rect>
<text style={{ fill: #000, fontSize: 12, textAlign: 'center', marginLeft: 14, marginTop: 2 }}>${cfg.name || '暂无'}</text>
<rect style={{
width: 100,
height: 25,
marginLeft: -30,
marginTop: 5,
stroke: ${ cfg.isAlarm ? '#f76e6f' : '#4f55e7' },
fill: ${ cfg.isAlarm ? '#f76e6f66' : '#4f55e766' }
}}>
<text style={{ fill: ${ cfg.isAlarm ? '#f76e6f' : '#4f55e7' }, fontSize: 12, textAlign: 'center', marginLeft: 20, marginTop: 2 }}>${cfg.systemName || '暂无'}</text>
</rect>
</group>
`,
);
}
准备好了容器、自定义的布局和节点,下面需要做的就是拿到数据源,我这里使用的是流程图,数据是由两个数组组成,第一个数组由每项节点组成的node数组,第二个数组由每对节点之间的关系组成的edge数组(若要绘制的是其他种类的拓扑图,可以到官网寻找自己需要的示例),流程图的数据源大致为以下结构:
// 节点
nodes: [
{
id: '1',
dataType: 'alps',
name: 'alps_file1',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '2',
dataType: 'alps',
name: 'alps_file2',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '3',
dataType: 'alps',
name: 'alps_file3',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '4',
dataType: 'sql',
name: 'sql_file1',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '5',
dataType: 'sql',
name: 'sql_file2',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '6',
dataType: 'feature_etl',
name: 'feature_etl_1',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '7',
dataType: 'feature_etl',
name: 'feature_etl_1',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
{
id: '8',
dataType: 'feature_extractor',
name: 'feature_extractor',
conf: [
{
label: 'conf',
value: 'pai_graph.conf',
},
{
label: 'dot',
value: 'pai_graph.dot',
},
{
label: 'init',
value: 'init.rc',
},
],
},
],
// 边
edges: [
{
source: '1',
target: '2',
},
{
source: '1',
target: '3',
},
{
source: '2',
target: '4',
},
{
source: '3',
target: '4',
},
{
source: '4',
target: '5',
},
{
source: '5',
target: '6',
},
{
source: '6',
target: '7',
},
{
source: '6',
target: '8',
},
]
数据源准备好后,就要开始配置图层、渲染实例啦,该步骤包含三部分:创建图层实例、实例关联数据、渲染实例。关于实例的配置,可以查看F6官网:图配置 F6.Graph(cfg) | F6,根据自己的需求进行使用:
// 创建图层实例、实例关联数据、渲染实例
init(data) {
let node = document.getElementById('mountNode')
// 创建一个图层实例
const graph = new F6.Graph({
container: node, // 图的 DOM 容器,可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
width: screen.width, // Number,必须,指定画布宽度,单位为 'px',默认为画布容器宽度。
height: screen.height, // Number,必须,指定画布高度,单位为 'px',默认为画布容器高度。
fitView: true, //是否开启画布自适应。开启后图自动适配画布大小
// fitViewPadding: 20, // fitView 为 true 时生效,图适应画布时,指定四周的留白。
minZoom: 0.1, // 最小缩放比例。
maxZoom: 3, // 最大缩放比例。
// 布局配置项
layout: {
type: 'dagre',
controlPoints: true,
},
// 设置画布的交互模式。
modes: {
default: ['drag-canvas', 'zoom-canvas', 'click-select'],
},
// 默认状态下节点的配置,会被写入的 data 覆盖。
defaultNode: {
type: 'dom-node'
},
});
// 修改边的配置
graph.edge(edge => {
if (edge.bothAlarm) {
return {
style: {
stroke: '#f87c7d'
}
}
} else {
return {
style: {
stroke: '#4f55e7'
}
}
}
});
graph.data(data); // 读取数据源到图上
graph.render(); // 渲染图
}
至此, 绘制流程图(拓扑图)的工作已经结束,下面是我写的示例的效果图,看到本篇博客的友友们,可以根据自己的需求到官网上寻找示例进行模仿修改:
前端小白积累经验篇~