需求场景:
因为需要根据接口之间的分发关系制作数据流向关系图,但是eCharts中的关系图组件实例不怎么多,数据流向表达不明显;使用树状图的话,eCharts提供的图形组件也有点不太适合,因此在同事建议下使用goJs制作树状图,效果如下。
过程分布:
- 导入package
- 初始化模板(初始化的过程好像必须放在ngOnInit()中,如果放在http请求的回调函数中,是不行的.)
- 加载数据;
作为模型化组件,最重要的内容就是数据的结构,树形图所接受的基本数据结构如下。
[{
key: "2"//必须属性,自身唯一标识
name: "parent"//必须属性
},
{
key: "3",
parent:"2",//必须属性,父节点
name: "son",
color: "#52b4e0",//以下都是自定义属性,为的是之后与节点的shape属性绑定
fig: "RoundedRectangle"
fontColor: "black"
height: 32
servNo: "SCP-ERP-002"
stroke: null
width: NaN
}
]
npm导入package
//npm命令安装p