复制粘贴即可，记得先安装antv
npm install --save @antv/g6<template>
<div class="myDiv">
<div id="mountNode"></div>
</div>
</template>
<script>
import G6 from '@antv/g6';
export default {
name: '',
components: {},
props: {},
data() {
return {
data: {
id: "111",//节点id
x: 200,
y: 100,
shape: 'image',//节点显示的类型，可以是矩形rect等或者图片形式
label: 'image',
img: '../../../../static/img/mcenter.png',
size: [100, 130],//节点大小
"children": [
{
"id": "第二舰队",
img: '../../../../static/img/jd2.png',
size: [90, 60],
shape: 'image',
label: 'image',
"children": [
{ shape: 'rect', size: [240, 30], "id": "21", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
{ shape: 'rect', size: [240, 30], "id": "22", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
{ shape: 'rect', size: [240, 30], "id": "23", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
{ shape: 'rect', size: [240, 30], "id": "24", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
{ shape: 'rect', size: [240, 30], "id": "25", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
]
},
{
"id": "第三舰队",
img: '../../../../static/img/jd3.png',
shape: 'image',
size: [90, 60],
"children": [
{ shape: 'rect', size: [240, 30], "id": "31", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
{ shape: 'rect', size: [240, 30], "id": "32", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
{ shape: 'rect', size: [240, 30], "id": "33", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
{ shape: 'rect', size: [240, 30], "id": "34", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
{ shape: 'rect', size: [240, 30], "id": "35", shape: 'multipleLabelsNode', level: 3, label: ["node2...", "该级战舰"] },
]
},
{
"id": "第四舰队",
img: '../../../../static/img/jd4.png',
shape: 'image',
size: [90, 60],
"children": [
{ shape: 'rect', size: [240, 30], "id": "41", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
{ shape: 'rect', size: [240, 30], "id": "42", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
{ shape: 'rect', size: [240, 30], "id": "43", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
{ shape: 'rect', size: [240, 30], "id": "44", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
{ shape: 'rect', size: [240, 30], "id": "45", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
]
},
{
"id": "第五舰队",
img: '../../../../static/img/jd5.png',
shape: 'image',
size: [90, 60],
"children": [
{ shape: 'rect', size: [240, 30], "id": "51", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
{ shape: 'rect', size: [240, 30], "id": "52", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
{ shape: 'rect', size: [240, 30], "id": "53", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
{ shape: 'rect', size: [240, 30], "id": "54", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
{ shape: 'rect', size: [240, 30], "id": "55", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
]
},
{
"id": "第六舰队",
img: '../../../../static/img/jd6.png',
shape: 'image',
size: [90, 60],
"children": [
{ shape: 'rect', size: [240, 30], "id": "61", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
{ shape: 'rect', size: [240, 30], "id": "62", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
{ shape: 'rect', size: [240, 30], "id": "63", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
{ shape: 'rect', size: [240, 30], "id": "64", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
{ shape: 'rect', size: [240, 30], "id": "65", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
]
},
{
"id": "第七舰队",
img: '../../../../static/img/jd7.png',
shape: 'image',
size: [90, 60],
"children": [
{ shape: 'rect', size: [240, 30], "id": "71", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
{ shape: 'rect', size: [240, 30], "id": "72", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
{ shape: 'rect', size: [240, 30], "id": "73", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
{ shape: 'rect', size: [240, 30], "id": "74", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
{ shape: 'rect', size: [240, 30], "id": "75", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
]
},
{
"id": "第十舰队",
img: '../../../../static/img/jd10.png',
shape: 'image',
size: [90, 60],
"children": [
{ shape: 'rect', size: [240, 30], "id": "11", shape: 'multipleLabelsNode', level: 3, label: ["node2", "人员"] },
{ shape: 'rect', size: [240, 30], "id": "12", shape: 'multipleLabelsNode', level: 3, label: ["node2", "装备"] },
{ shape: 'rect', size: [240, 30], "id": "13", shape: 'multipleLabelsNode', level: 3, label: ["node2", "基地"] },
{ shape: 'rect', size: [240, 30], "id": "14", shape: 'multipleLabelsNode', level: 3, label: ["node2", "战争"] },
{ shape: 'rect', size: [240, 30], "id": "15", shape: 'multipleLabelsNode', level: 3, label: ["node2", "该级战舰"] },
]
}
]
},
graph: {}
}
},
watch: {},
computed: {},
methods: {
render() {
G6.registerNode("multipleLabelsNode", {
// 绘制节点
draw(cfg, group) {
console.log(cfg, group, '00')
var shape = this.drawShape(cfg, group);
if (cfg.label && cfg.label.length) {
this.drawLabel(cfg, group);
}
return shape;
},
// 绘制label
drawLabel(cfg, group) {
console.log(cfg, group, '11')
var size = this.getSize(cfg);
var width = 240;
const height = 70;
var label = cfg.label;
// 绘制第三层级节点的第一个label样式，先绘制一个矩形框
group.addShape("rect", {
attrs: {
x: -120,
y: -15,
fill: "#D4F0E1",
width: 100,
height: 30,
radius: [2, 4]
}
});
//再添加label文本
group.addShape("text", {
attrs: {
text: label[0] || "",
x: 0 - width / 2 + 5,
y: 0,
fill: "#222",
textAlign: "left",
textBaseline: "middle"
}
});
if (label.length > 1) {
// 绘制第三层级节点的第二个label样式，同样先绘制一个矩形框
group.addShape("rect", {
attrs: {
text: label[1] || "",
x: 20,//矩形框的相对节点的横坐标位置
y: -15,//矩形框的相对节点的纵坐标位置
fill: "#C3D4EE",
width: 100,
height: 30,
radius: [2, 4]//矩形框圆角设置
}
});
//再添加label文本
group.addShape("text", {
attrs: {
text: label[1] || "",
x: 60,
y: 0,
fill: "#222",
textAlign: "center",
textBaseline: "middle",
fontWeight: "bold"
}
});
}
}
}, "rect")
var graph = new G6.TreeGraph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: 2,
modes: {
default: [{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
var data = item.get('model').data;
data.collapsed = collapsed;
return true;
}
}, 'drag-canvas', 'zoom-canvas']
},
layout: {
nodesepFunc: () => 3, //这个就是节点与节点之间的距离，可以说是纵向拉伸高度
ranksepFunc: () => 30,//这个参数设置的是你的箭头距离节点的距离，值越大，图横向拉伸的越宽
},
//默认节点设置
defaultNode: {
size: 16,
anchorPoints: [[0, 0.5], [1, 0.5]],
style: {
fill: '#F4F4F4',
stroke: '#F4F4F4'
},
radius: [2, 4],
},
//默认边设置
defaultEdge: {
shape: 'cubic-horizontal',//有很多类型可以看官方文档api
// shape: 'line-arrow',
style: {
stroke: '#3D3D6D'
}
},
layout: {
type: 'mindmap',
direction: 'H',
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100;
}
}
});
var centerX = 0;
graph.node(function (node) {
if (node.id === 'Modeling Methods') {
centerX = node.x;
}
//由于我前两层级节点都是用图片展示里面包含label文字，因此我判断层级为第三层级的时候再显示label
if (node.level == 3) {
return {
label: node.label,//用于是否显示label标签
labelCfg: {
position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left'
}
};
} else {
return {
style: {
fill: '#40a9ff',
stroke: '#096dd9'
},
label: '',
labelCfg: {
position: node.children && node.children.length > 0 ? 'left' : node.x > centerX ? 'right' : 'left'
}
};
}
});
// 单击节点事件
graph.on('node:click', (e) => {
const nodeItem = e.item // 获取被点击的节点元素对象
console.log('单击', nodeItem._cfg)
})
graph.data(this.data);
graph.render();
graph.fitView();
}
},
created() { },
mounted() {
this.render()
}
}
</script>
<style lang="less" scoped>
#mountNode {
width: 100%;
height: 90%;
background: url("../../../../static/img/jdbg.png");
background-size: 100% 90%;
}
@media screen and (min-width: 200px) and (max-width: 1600px) {
}
@media screen and (min-width: 1601px) {
}
</style>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149663.html
