// vis关系图初始化
public init(body: any) {
/**处理关系类型数据 */
let dataArr: any = [];
/**定义links的数组 */
let linksArr: any = [];
/**处理返回的其他数据 */
// 节点数
body.forEach((item: any, index: number) => {
// if (index < 20) {
let obj: any = {
id: "",
shape: "dot",
color: "",
label: ""
};
let objB: any = {
id: "",
shape: "dot",
color: "",
label: ""
};
obj.id = item.asfzh;
obj.label = item.asfzh;
obj.color = item.sfzZdrFlag1 === 1 ? "#f7220b" : "#2aa2f7";
dataArr.push(obj);
objB.id = item.bsfzh;
objB.label = item.bsfzh;
objB.color = item.sfzZdrFlag2 === 1 ? "#f7220b" : "#2aa2f7";
dataArr.push(objB);
});
//关系
body.forEach((item: any, index: number) => {
// if (index < 20) {
let linksObj: any = {
from: "",
to: "",
label: "",
font: {align: "top",color:"from"},
arrows: "to"
};
linksObj.from = item.asfzh;
linksObj.to = item.bsfzh;
linksObj.label = `${item.cnt}`; //必须是字符串 不能是数字
linksArr.push(linksObj);
});
let strArr = [];
let objArr = [];
for (let i = 0; i < dataArr.length; i++) {
if (strArr.indexOf(dataArr[i].id) == -1) {
strArr.push(dataArr[i].id);
objArr.push(dataArr[i]);
}
}
const container = document.getElementById("network_id");
let nodes = objArr;
let edges = linksArr;
const data = {
nodes: nodes,
edges: edges
};
//自定义
const options = {
autoResize: true,
// physics:false,
nodes: {
shape: "dot",
size: 12,
font: {
size: 12,
color:'#8e8e8e'
},
},
edges: {
width: 1,
smooth: {
//设置两个节点之前的连线的状态
enabled: true //默认是true,设置为false之后,两个节点之前的连线始终为直线,不会出现贝塞尔曲线
},
font:{
color:'#8e8e8e',
strokeWidth: 0
}
},
interaction: {
dragNodes: true, //是否能拖动节点
dragView: true, //是否能拖动画布
hover: true, //鼠标移过后加粗该节点和连接线
multiselect: true, //按 ctrl 多选
selectable: true, //是否可以点击选择
selectConnectedEdges: true, //选择节点后是否显示连接线
hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
zoomView: true //是否能缩放画布
},
};
let network = new Vis.Network(container, data, options);
}