antvg6结合vue实现某⼀流程的流程图展⽰
antv/g6结合vue实现某⼀流程的展⽰（3.1.3版本）
安装antv/g6
npm install --save @antv/g6
注意版本控制
引⼊
import G6 from '@antv/g6';
运⾏结果展⽰
本⽂主要实现的需求是，配合后端模板引擎，展⽰某⼀业务的实现流程与完成状态，根据nodes数据中status判断节点处于什么状态改变样式；
创建js⽂件，引⼊g6
传⼊容器的宽⾼，容器id，数据源，当时创建容器的vue实例
import G6 from '@antv/g6';
export function init(width, height, boxid, data, vm) {
const graph = new G6.Graph({
container: boxid,
width: width,
height: height,
defaultNode: {
style: {
fill: '#CFD9EA',
stroke: 'transparent' // 边框透明
},
地理小博士labelCfg: {
style: {
fill: '#4A4A4A',
fontSize: 12
}
}
},
defaultEdge: {
style: {
fill: '#fff',
fontSize: 14
}
},
// 交互模式集合
modes: {
// 默认交互模式
default: ['click-add-node', 'click-add-edge', 'click-lect'], // 增加节点交互模式
// addNode: ['click-add-node', 'click-lect'],
// 增加边交互模式
// addEdge: ['click-add-edge', 'click-lect']
}
/** modes: {
default: [
放学ICU
"click-add-edge"
"drag-canvas",//允许拖拽画布
"zoom-canvas",// 放缩画布
"click-lect",
"drag-node", // 拖拽节点
{
type: "tooltip",
formatText(model) {
// const cfg = f;
// const text = [];
// cfg.forEach((row) => {
/
/ text.push(row.label + ":" + row.value + "<br>"); // });
return model.info.ur +'<br/>' + model.info.time; },
offt: 30,
},蓝屏代码0x000000f4
]
}, */
// fitView: true, // 适应视图
// 默认线的颜⾊
// edgeStyle: {
// default: { stroke: 'red' }
// }
地震逃生方法
});
// 根据状态⾃定义样式
function rend() {
return new Promi(function (resolve, reject) {
graph.data(data);
resolve();
});
}
function tStatus() {
return new Promi(function (resolve, reject) {
for (let i = 0; i < des.length; i++) {
if (des[i].status === 1) {
} el {
}
resolve();
});
}七色花
async function resStyle() {
await rend();
await tStatus();
// graph.tMode('default');
// graph.tMode('addEdge');
// graph.tMode('addNode');
}
resStyle();
}
⾃定义菱形节点，
draw(cfg, group) {
const size = cfg.size || [40, 40]; // 如果没有 size 时的默认⼤⼩
const width = size[0];
const height = size[1];
const shape = group.addShape('path', {
attrs: {
path: [
['M', 0, 0 - height / 2], // 上部顶点
['L', width / 2, 0], // 右侧点
['L', 0, height / 2], // 下部
['L', -width / 2, 0], // 左侧
['Z'] // 封闭
],
fill: cfg.style.fill
// stroke: lor // 颜⾊应⽤到边上，如果应⽤到填充，则使⽤ fill: lor }基金管理办法
});
if (cfg.label) {
// 如果有⽂本
// 如果需要复杂的⽂本配置项，可以通过 labeCfg 传⼊
/
/ const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
// = cfg.label;
group.addShape('text', {
// attrs: style
attrs: {
x: 0, // 居中
y: 0,
textAlign: 'center',
textBaline: 'middle',
text: cfg.label,
东北方言大全
fill: cfg.labelCfg.style.fill
春天有哪些水果
}
});
}
return shape;
}
});
⾃定义轨迹，
// ⾃定义末处轨迹箭头(在末尾终⽌点添加属性rends并且定义轨迹的最后⼀个坐标为轨迹末点) G6.registerEdge('line-arrow', {
draw(cfg, group) {
const {
startPoint,
controlPoints,
resEnds,
endPoint,
label,
labelPoint
} = cfg;
let arr = [];
arr.push(['M', startPoint.x, startPoint.y]);
if (controlPoints && controlPoints.length > 0) {
controlPoints.map((val) => {
arr.push(['L', val.x, val.y]);
return arr;
});
}
if (!resEnds) {
arr.push(['L', endPoint.x, endPoint.y]);
}
if (label) {
group.addShape('text', {
attrs: {
text: label,
x: labelPoint[0],
y: labelPoint[1],
fill: '#4A4A4A'
}
});
}
const shape = group.addShape('path', {
attrs: {
lineWidth: 2,
stroke: '#0d3f98',
path: arr,
endArrow: {
path: 'M 5,0 L -5,-5 L -5,5 z',
d: 5
}
}
});
return shape;
}
});
点击节点展⽰节点信息
可以通过传⼊的vm实例，直接调⽤vue的⽅法
