HTML5（canvase）拓扑图、关系图及vis.js关系图的使用

HTML5 （canvase）拓扑图、关系图：

vis.js⽹址：

vue项⽬中的使⽤：1、npm install vis

2、在关系图的页⾯引⼊vis 　

import vis from 'vis'; 或

const vis=require(\"vis\");

3、使⽤：

// 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); }