G6使用说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程图</title>
<style>
::-webkit-scrollbar {
display: none;
}
html,
body {
overflow: hidden;
margin: 0;
}
</style>
</head>
<body>
<div id="mountNode"></div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;
</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js">
</script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js">
</script>
<script src="https://gw.alipayobjects.com/os/lib/dagre/0.8.4/dist/dagre.min.js">
</script>
<script>
var data = {
nodes: [{
id: '头',
flag: 1
}, {
id: '左脚'
}, {
id: '右脚',
flag: '2'
}, {
id: '左手'
}, {
id: '右手'
}, {
id: '身体'
}, {
id: '右脚大拇指'
}],
edges: [{
source: '头',
label: '脖子(12cm)',
flag: 'success',
labelCfg: {
style: {
fill: 'green', // 字体颜色
}
},
target: '身体'
}, {
source: '身体',
target: '左手'
}, {
source: '身体',
target: '右手'
}, {
source: '身体',
target: '左脚'
}, {
source: '身体',
label: '右腿', // 线条上的标签
fill: 'red',
target: '右脚'
}, {
source: '右脚',
target: '右脚大拇指'
}]
};
var g = new dagre.graphlib.Graph();
g.setDefaultEdgeLabel(function() {
return {};
});
g.setGraph({
rankdir: 'TB'
});
data.nodes.forEach(function(node) {
node.label = node.id;
window.console.log(node)
g.setNode(node.id, {
width: 150,
height: 100
});
});
data.edges.forEach(function(edge) {
g.setEdge(edge.source, edge.target);
});
dagre.layout(g);
var coord = void 0;
g.nodes().forEach(function(node, i) {
coord = g.node(node);
data.nodes[i].x = coord.x;
data.nodes[i].y = coord.y;
});
g.edges().forEach(function(edge, i) {
coord = g.edge(edge);
data.edges[i].startPoint = coord.points[0];
data.edges[i].endPoint = coord.points[coord.points.length - 1];
data.edges[i].controlPoints = coord.points.slice(1, coord.points.length - 1);
});
G6.registerNode('operation', {
drawShape: function drawShape(cfg, group) {
var rect = group.addShape('rect', {
attrs: {
x: -75,
y: -25, // 字体位置
width: 150,
height: 50,
radius: 10,
stroke: 'skyblue', // 边框颜色
fill: 'yellow', // 背景色
fillOpacity: 0.45,
lineWidth: 2
}
});
return rect;
}
}, 'single-shape');
var graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth, // 画布宽度
height: window.innerHeight, // 画布高度
pixelRatio: 2,
modes: {
default: ['drag-canvas', 'zoom-canvas']
},
defaultNode: { // 设置默认节点样式
shape: 'operation', // 节点样式
style: {
fill: 'red', // 背景色
stroke: '#000', // 边框颜色
}
labelCfg: {
style: {
fill: '#000', // 字体颜色
fontSize: 14,
fontWeight: 'bold'
}
}
},
defaultEdge: { // 设置edge样式
shape: 'line', // 线条样式
fill: 'pink',
style: {
endArrow: true, // 结束箭头
lineWidth: 2, // 线条宽度
stroke: '#ccc' // 线条颜色
},
labelCfg: {
style: {
fill: 'red', // 字体颜色
fontSize: 14,
fontWeight: 'bold'
}
}
}
});
graph.node((node) => { // 条件判断节点，自定义渲染节点样式（也可以在data对象里nodes数组里给节点添加样式）
if (node.flag === 1) {
return {
shape: 'operation',
style: {
fill: '#000',
// fontSize: 20,
stroke: '#000',
},
labelCfg: {
style: {
fill: 'pink', // 字体颜色
fontSize: 14,
fontWeight: 'bold'
}
}
}
} else {
return {
shape: 'circle',
style: {
fill: 'red',
stroke: '#000',
// color: 'skyblue',
}
}
}
})
graph.data(data);
graph.render();
graph.fitView();
</script>
</body>
</html>
基本功能
1. 定义节点
var data = {
nodes: [{
id: '右脚大拇指',
labelCfg: {
style: {
fill: 'orange', // 字体颜色
}
},
}],
edges: [{
source: '头',
label: '脖子(12cm)',
flag: 'success',
labelCfg: { // 标签颜色
style: {
fill: 'green', // 字体颜色
fontSize: 14, // 字体大小
fontWeight: '400' // 字体粗细
}
},
target: '身体'
}]
};
文章引用
官网
官方文档API
揭秘G6图表自定义的真相
