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-select'],      // 增加节点交互模式
// addNode: ['click-add-node', 'click-select'],
// 增加边交互模式
// addEdge: ['click-add-edge', 'click-select']
}
/** modes: {
default: [
"click-add-edge"
"drag-canvas",//允许拖拽画布
"zoom-canvas",// 放缩画布
"click-select",
"drag-node", // 拖拽节点
{
type: "tooltip",
formatText(model) {
//  const cfg = f;
//  const text = [];
//  cfg.forEach((row) => {
/
/    text.push(row.label + ":" + row.value + "<br>");            //  });
return model.info.user +'<br/>' + model.info.time;            },
offset: 30,
},
]
}, */
//  fitView: true, // 适应视图
// 默认线的颜⾊
// edgeStyle: {
//  default: { stroke: 'red' }
// }
});
// 根据状态⾃定义样式
function rend() {
return new Promise(function (resolve, reject) {
graph.data(data);
resolve();
});
}
function setStatus() {
return new Promise(function (resolve, reject) {
for (let i = 0; i < des.length; i++) {
if (des[i].status === 1) {
} else {
}
resolve();
});
fontweight属性bold
}
async function resStyle() {
await rend();
await setStatus();
// graph.setMode('default');
// graph.setMode('addEdge');
// graph.setMode('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',
textBaseline: 'middle',
text: cfg.label,
fill: cfg.labelCfg.style.fill
}
});
}
return shape;
}
});
⾃定义轨迹，
// ⾃定义末处轨迹箭头(在末尾终⽌点添加属性resends并且定义轨迹的最后⼀个坐标为轨迹末点)  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的⽅法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。