话不多说，直接干货走起。对你有用的话，请赞
实现效果如下图：
实现代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GoJS demo</title>
<script src="../release/go.js"></script>
</head>
<body>
<div id="myDiagramDiv6" class="diagramStyling" style="width:1000px; height:560px;margin: 30px auto;border: 1px solid #ddd"></div>
<script>
var dataArr = [
{ key: "1", name: "xxxx股份有限公司"},
{ key: "2", parent: "1", name: "xxxx增进股份有限公司",stock:'3.73%',Amount:'923,000,000'},
{ key: "3", parent: "1", name: "xxxx药业集团股份有限公司",stock:'1.45%',Amount:'123,100,000',hasChildNodes:true},
{ key: "4", parent: "1", name: "xxx高速公路发展股份有限公司",stock:'0.96%',Amount:'3,100,100,000'},
{ key: "5", parent: "1", name: "xxxx股份有限公司",stock:'3.73%',Amount:'3,100,000,000'},
{ key: "6", parent: "1", name: "xxxx药业集团股份有限公司",stock:'1.45%',Amount:'2,100,000,000'},
{ key: "7", parent: "1", name: "xxxxxxx发展股份有限公司",stock:'0.96%',Amount:'1,123,000,000'},
{ key: "8", parent: "1", name: "xxxx农业股份有限公司",stock:'4.88%',Amount:'1,123,000,000'},
{ key: "9", parent: "2", name: "xxxxxx农业股份有限公司",stock:'2.88%',Amount:'776,000,000'},
{ key: "10", parent: "2", name: "北京xx农业股份有限公司",stock:'3.88%',Amount:'5,547,000,000'},
{ key: "11", parent: "2", name: "xx顺x农业股份有限公司",stock:'5.88%',Amount:'2,345,000,000'},
{ key: "12", parent: "2", name: "xxx鑫农业股份有限公司",stock:'1.88%',Amount:'989,000,000'},
{ key: "13", parent: "2", name: "北京xxxx股份有限公司",stock:'4.18%',Amount:'3,228,000,000'}
];
var $ = go.GraphObject.make; // 为了定义模板的简洁性，可能跟jquery的$冲突了，如有必要可换个符号
var myDiagram = $(go.Diagram, "myDiagramDiv6", //在id为myDiagramDiv6的HTML中定义图表
{// 设置整个图表的属性，如只读、放大缩小等等。更多配置见https://gojs.net/latest/api/symbols/Diagram.html
allowDelete: false, //不允许删除节点
allowMove: false, // 不允许拖动
layout: $(go.TreeLayout,
{ angle: 90, // 翻转90度
layerSpacing: 120 //层间距
})
});
//定义两个样式供下面调用
function textStyle() {
return { margin: 1, stroke: "#444",alignment: go.Spot.Left, font: "12px microsoft" };
}
function sStyle() {
return {background: "white", font: "12px microsoft", stroke: "#7B99E5",};
}
// 节点模板。在画布上按一定顺序编写内容，比如从上到下，从左到右
myDiagram.nodeTemplate =
$(go.Node, "Vertical", // 定义节点，垂直排列
$(go.Panel, "Auto", // 准备一个面板
$(go.Shape, "Rectangle", { // 矩形
strokeWidth: 1, //边框宽度
stroke: '#65A1EA', // 边框颜色
fill:'#FFF', //背景色
}),
$(go.Panel, "Horizontal", // 矩形水平排列
{
minSize: new go.Size(140, NaN), // 最小尺寸，宽140，高自动
maxSize: new go.Size(140, NaN),// 最大尺寸
margin: new go.Margin(6, 10, 6, 6), //边距
defaultAlignment: go.Spot.Left //左对齐
},
$(go.Panel, "Vertical", //在矩形里面 ，垂直排列
$(go.TextBlock, // 文本块
{ stroke: "#444",alignment: go.Spot.Left, font: "14px microsoft",maxSize: new go.Size(140, NaN) },
new go.Binding("text", "name").makeTwoWay()), //绑定文本，值为mode里面的‘name’
$(go.TextBlock, textStyle(),
new go.Binding("text", "Amount",function(v) {
if(!v){
return ''
}
return "认购金额: " + v;
})),
$(go.TextBlock, textStyle(),
new go.Binding("text", "stock",function(v) {
if(!v){
return ''
}
return "持股: " + v;
},
).makeTwoWay()),
),
),
),
$(go.Panel,'Auto',// 准备一个面板，由于Node定义垂直排列，所以应该在上一个面板的下方
{ visible: false }, // 默认不可见
new go.Binding("visible", "hasChildNodes", function(acts) { // 绑定是否可见，根据hasChildNodes
return (acts ? true : false);
}),
$(go.Shape,{ strokeWidth: 2, //形状
stroke: '#D5D5D5',
fill:'#F5F5F5',
width:15,height: 15,
cursor:'pointer' },
),
$(go.TextBlock, "+",{font: "bold 14px sans-serif",stroke:'#424242',cursor:'pointer'}, // 文本，gojs没有展开那种按钮，只能模拟一个
),
{
click: function(e, obj) { // 点击事件,懒加载在这使用
/*var node = obj.part;//拿到节点的json对象，后面要拿什么值就直接.出来
var procTaskId = node.data.key;
var procTaskName = node.data.text;
var description = node.data.description;
var procTmplId = node.data.tmplId;*/
var a = [
{ key: "14", parent: "3", name: "吉林xxxx集团股份广州分公司",stock:'14.5%'},
{ key: "14", parent: "3", name: "xxxx药业集团股份广州分公司",stock:'19.5%'},
{ key: "14", parent: "3", name: "xxxxxxxxx集团股份广州分公司",stock:'4.5%'}
];
model.addNodeDataCollection(a); // 往mode添加数据
}
},
),
$(go.Panel,'Auto', // 这个模块是做一个占位的空白模块，防止下面的button在没有hasChildNodes的模块时对不齐
{ visible: true },
new go.Binding("visible", "hasChildNodes", function(acts) {
return (acts ? false : true);
}),
$(go.Shape,{
width:17,height: 17,stroke: '#FFF',
fill:'#FFF', },
)
),
$(go.Panel, // 这个是有子节点的收起按钮
{ height: 17,margin: new go.Margin(-17, 0, 0, 0) },// 懒加载后，覆盖住懒加载按钮
$("TreeExpanderButton") // gojs收起子节点按钮
)
);
// 定义连接线模板
myDiagram.linkTemplate =
$(go.Link,
{ // 定义连接线的样式
curve: go.Link.Bezier,
toEndSegmentLength: 100, fromEndSegmentLength: 30
},
$(go.Shape, { strokeWidth: 1, stroke: "#CDCBCC" }), //连接线宽度和颜色
$(go.Shape, { toArrow: "OpenTriangle", stroke:'#959595' }),// 目标箭头样式和颜色
$(go.Panel, "Horizontal", // 定义连接线上的说明
$(go.TextBlock, sStyle(),
new go.Binding("text", "stock",function (a) {
return '持股:'+a;
}).makeTwoWay()
),
)
);
var model = $(go.TreeModel);
model.nodeDataArray = dataArr;
myDiagram.model = model;
</script>
</body>
</html>