一、npm安装
npm install --save @antv/g6
二、相应位置引入
import G6 from '@antv/g6';
三、后台传回的数据示例
Array(2) //两棵树
0:
feature: (...)
feature_party: (...)
left: Object //左子树
right: Object //右子树 子树的结构和0一样,有左右子树,直到叶子结点
w: (...)
四、方法:(重点)
1、渲染数据
xgbForEachFunc(trees){ //传一棵树
if(trees.left || trees.right){ //如果存在子节点
trees.label = trees.feature==null&&trees.feature_party==null ? trees.w : `${trees.feature_party}\n${trees.feature}`; //根据需求赋的值
trees.children = []
trees.children.push(trees.left,trees.right) //如果存在子节点,push进新建的children数组
trees.children.forEach(e=>{
e.label = e.feature==null&&e.feature_party==null ? e.w : `${e.feature_party}\n${e.feature}` //根据需求
if(e.left || e.right){
this.xgbForEachFunc(e) //如果依然存在子节点,回调
}else{
return //如果没有孩子,跳出
}
})
}
},
2、渲染树
xgbTreeFunc(id){
var trees =this.modelStructure[id] //其中的一棵树
this.xgbForEachFunc(trees) //调用1中的渲染数据方法
const data = {
label:trees.label, //显示在节点上的内容
children:trees.children
};
const container = document.getElementById(id); //动态获取画布
const width = Number((document.body.clientWidth-400-40)/2)
const height = 400;
const graph = new G6.TreeGraph({
container: id,
width,
height,
linkCenter: true, //箭头指向中心
fitView: true, //画布自适应
animate: true,
modes: {
default: [
{
// type: 'collapse-expand',
// onChange: function onChange(item, collapsed) {
// const data = item.getModel();
// data.collapsed = collapsed;
// return true;
// },
}, //点击节点
'drag-canvas',
// 'zoom-canvas', //放大缩小
],
},
layout: { //紧凑树
type: 'compactBox',
direction: 'TB',
getId: function getId(d) {
// return d.label;
},
getHeight: function getHeight() {
return 60;
},
getWidth: function getWidth() {
return 125;
},
getVGap: function getVGap() {
return 40;
},
getHGap: function getHGap() {
return 1;
},
},
defaultNode: { //点
type: "ellipse",
size: [115,40],
color: "#5B8FF9",
style: {
fill: "#9EC9FF",
radius: 5,
lineWidth: 1
},
labelCfg: {
style: {
fill: "#000000",
fontSize: 10
}
}
},
defaultEdge: { //边
// type: 'flow-line',
type:"cubic-vertical",
style: {
stroke: "#e2e2e2",
endArrow: {
path: G6.Arrow.triangle(10, 10, 20), // 使用内置箭头路径函数,参数为箭头的 宽度、长度、偏移量(默认为 0,与 d 对应)
d: 20,//偏移,和path最后一位相同
fill: "#e2e2e2", //填充颜色
stroke: "grey", //描边颜色
opacity: 1
},
type: "cubic-vertical",
lineCap: "miter"
}
},
});
graph.node(function (node) {
let position = 'center';
let rotate = 0;
if (!node.children) {
node.type = "rect" //如果是叶子结点,更改形状
}
return {
label: node.id,
labelCfg: {
position,
offset: 5,
style: {
rotate,
textAlign: 'center',
},
},
};
});
graph.data(data); //渲染树
graph.render();
graph.fitView();
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
},
五、调用
在加载时调用 渲染树 的方法
mounted(){
setTimeout(() => {
console.log('图',this.modelStructure)
for(const key in this.modelStructure){
this.xgbTreeFunc(this.modelStructure[key].id) //循环传递每棵树的id,如果树里没有id,在获取数据时循环赋值进去
}
}, 500);
},
六、容器
<div v-for="(item,index) in modelStructure" :key="item.id" > //modelStructure为后台传回的数据
<div :id="item.id" ></div> //动态加载
</div>
七、效果