要求根据数据生成结构图，花了点时间用的g6
法人.png
<template>
<div class="g6-wrapper">
<div id="mountNode"></div>
</div>
</template>
<script type='text/ecmascript-6'>
import G6 from "@antv/g6";
import dagre from "dagre"
// import g6Data from "./textData.js";
import {getTreeSceneProcessList} from "@/api/scene.js";
export default {
props: ['sceneId'],
data() {
return {
g6Data :[]
};
},
mounted() {
this.getTreeSceneProcessList();
// this.init();
},
methods: {
init() {
this.$nextTick(() => {
// 得到流程图绘制对象
var g = new dagre.graphlib.Graph();
/**
* g.setDefaultEdgeLabel不能省去，否则会报错
* Error in nextTick: "TypeError: Cannot set property 'points' of undefined"
*/
g.setDefaultEdgeLabel(function() {
return {};
});
g.setGraph({
rankdir: "TB" //控制方向top-bottom
});
//绘制节点
this.g6Data.nodes.forEach(node => {
let len = node.processName.length,calcStrLen = 8,ellipsis = '…';
let tempLabel= node.processName.substring(0,calcStrLen);
if(len>8){
tempLabel += ('\n' + node.processName.substring(calcStrLen,2*calcStrLen));
}
if(len>16){
tempLabel += ellipsis;
}
node.id = node.processRelateId;
node.label = tempLabel;
g.setNode(node.processRelateId, {
width: 150,
height: 50
});
});
//绘制连接
this.g6Data.edges.forEach(edge => {
g.setEdge(edge.source, edge.target);
});
dagre.layout(g);
var coord = 0;
//g.nodes()返回图中节点的 id 数组
g.nodes().forEach((node, i) =>{
coord = g.node(node);
this.g6Data.nodes[i].x = coord.x;
this.g6Data.nodes[i].y = coord.y;
});
//g.edges()返回图中所有的边
g.edges().forEach((edge, i)=> {
coord = g.edge(edge);
this.g6Data.edges[i].startPoint = coord.points[0];
this.g6Data.edges[i].endPoint = coord.points[coord.points.length ];
this.g6Data.edges[i].controlPoints = coord.points.slice(1,coord.points.length);
});
G6.registerNode(
"operation",
{
drawShape: function draw(cfg, group){
var rect = group.addShape("rect", {
attrs: {
x: -75,
y: -20,
width: 150,
height: 60,
radius: 10,
stroke: "#BDC3CC",
fill: "#fff",
fillOpacity: 0.45,
lineWidth: 2
}
});
group.addShape('circle', {
attrs: {
x: -53,
y: 10,
r: 15,
fill: '#7D8998',
},
name: 'circle-shape',
});
group.addShape("text", {
attrs: {
text: 'L' + cfg.processLevel || "",
x: -60,
y: 10,
fill: "#fff",
fontSize:14,
textAlign: "left",
textBaseline: "middle"
}
});
// const _text = group.addShape("text", {
// attrs: {
// text: cfg.processName,
// x: -30,
// y: 9,
// fill: "#595959",
// fontSize:10,
// textAlign: "left",
// textBaseline: "middle"
// }
// });
return rect;
}
},"single-shape"
);
var graph = new G6.Graph({
container: "mountNode",
width: window.innerWidth*0.79,
height: 600,
pixelRatio: 2,
// fitView: true,
// fitViewPadding:80,
modes: {
default: [
"drag-canvas",'zoom-canvas',
{
type: 'tooltip',
formatText: function formatText(model) {
return model.processName;
}
}
]
},
defaultNode: {
type: "operation",
labelCfg: {
style: {
fill: "#595959",
fontSize: 12,
textAlign: "left",
textBaseline: "middle",
x:-30,
y:9
}
}
},
defaultEdge: {
type: "polyline",
style: {
stroke: '#999',
lineWidth:1
}
}
});
graph.data(this.g6Data);
graph.render();
graph.on('node:click', (evt)=> {
const shape = evt.target;
const node = evt.item;
console.log(shape,node)
// this.$emit('nextstep');
});
graph.on('node:mouseenter', function(evt) {
const node = evt.item;
graph.setItemState(node, 'hover', true);
graph.updateItem(node, {
style:{
fill: '#ecf5ff',
stroke: '#0091FF',
lineWidth:1
},
labelCfg: {
style: {
fill: '#0091FF',
fontSize: 12,
textAlign: "left",
textBaseline: "middle",
x:-30,
y:9
}
},
});
});
graph.on('node:mouseleave', function(evt) {
const node = evt.item;
graph.setItemState(node, 'hover', false);
graph.updateItem(node, {
style:{
fill: '#fff',
stroke: '#BDC3CC',
lineWidth:2
},
labelCfg: {
style: {
fill: "#595959",
fontSize: 12,
textAlign: "left",
textBaseline: "middle",
x:-30,
y:9
},
},
});
});
});
},
getTreeSceneProcessList(){
getTreeSceneProcessList('b01311175e8c11eaaf620050568b17c3').then(res=>{
console.log(res)
this.g6Data = res;
this.init();
})
}
}
};
</script>
<style lang='less' scoped>
.g6-wrapper {
width: 100%;
height: 600px;
border: 1px solid #999;
}
</style>
<style lang="less">
.g6-wrapper {
// 由于 G6 没有内置任何 tooltip 的样式，用户需要自己定义样式
.g6-tooltip {
border: 1px solid #e2e2e2;
border-radius: 10px;
font-size: 12px;
color: #000;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 8px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
.node-shape{
white-space:wrap;
cursor:pointer;
}
}
</style>
