效果图如下:
下面直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GraphVis基础使用示例</title>
<script src="http://media.graphvis.cn/libs/jquery-3.3.1.min.js"></script>
<!-- 界面引入GraphVis可视化核心组件库 -->
<script src="http://media.graphvis.cn/libs/graphvis.20220327.min.js"></script>
</head>
<body>
<!-- 定义画布展示元素,id将被用来设置可视化区域,需要指定width和height样式 -->
<div id="graph-panel" style="width:100%;height:calc(100vh - 16px);background-color:#efefef;"></div>
<script type="text/javascript">
//GraphVis可视化对象通用配置项
var config = {
node: { //节点的默认配置
label: { //标签配置
show: true, //是否显示
color: '20,20,20', //字体颜色
font: 'normal 14px KaiTi', //字体大小及类型
textPosition: 'Bottom_Center', //文字位置 Top_Center,Bottom_Center,Middle_Right,Middle_Center
},
shape: 'circle', //rect,circle,star
size:50,
color: '80,200,255' //节点颜色
},
link: { //连线的默认配置
label: { //连线标签
show: true, //是否显示
color: '50,50,50', //字体颜色
font: 'normal 13px Arial', //字体大小及类型
},
lineType: 'direct', //连线类型,direct,curver,vlink,hlink,vbezier,hbezier,bezier
color: '80,200,255', //连线颜色
showArrow: true //显示连线箭头
},
wheelZoom: 0.8, //开启鼠标滚轮缩放
highLightNeiber: false //相邻节点高亮开关
};
//1、创建GraphVis对象,进行方法调用
var visgraph = new VisGraph(document.getElementById('graph-panel'), config);
visgraph.switchAnimate(true);//开启无限重绘模式,动画流畅,但大数据量时影响性能
//2、添加节点
var nodeA = visgraph.addNode({id:1,label:"电网",x:10,y:200});
nodeA.fillColor = visgraph.randomColor();
var nodeB = visgraph.addNode({id:2,label:"逆变器",x:400,y:300});
nodeB.fillColor = visgraph.randomColor();
var nodeC = visgraph.addNode({id:3,label:"电池",x:800,y:500});
nodeC.fillColor = visgraph.randomColor();
var nodeD = visgraph.addNode({id:4,label:"电池",x:10,y:500});
var nodeE = visgraph.addNode({id:5,label:"家电",x:800,y:200});
//3、添加关系连线 source和target对应node的id
var linkA = visgraph.addEdge({source:1,target:2,label:'关系1'});
linkA.lineDash=[3,8,5];//虚线
linkA.animate=true;//开启连线流动动画(性能消耗高)
linkA.strokeColor = linkA.fontColor = visgraph.randomColor();
/*var linkB = visgraph.addEdge({source:1,target:3,label:'关系2'});
linkB.animate=true;//开启连线流动动画(性能消耗高)
linkB.animateBallColor='120,120,240';//流动球体颜色
linkB.animateBallSize=4;//流动球体大小
linkB.strokeColor = linkB.fontColor = visgraph.randomColor();
linkB.lineType='bezier';
linkB.showArrow=false;*/
var linkC = visgraph.addEdge({source:2,target:3,label:'关系3'});
linkC.lineDash=[3,5,3];//虚线
linkC.arrowType='triangle';//箭头设为三角
linkC.animate=true;//开启连线流动动画(性能消耗高)
linkC.strokeColor = linkC.fontColor = visgraph.randomColor();
/*var linkD = visgraph.addEdge({source:3,target:4,label:'关系4'});
linkD.animate=true;
linkD.strokeColor = linkD.fontColor = visgraph.randomColor();*/
var linkE = visgraph.addEdge({source:4,target:2,label:'关系5'});
linkE.lineDash=[3,5,3];//虚线
linkE.animate=true;
var linkF = visgraph.addEdge({source:2,target:5,label:'关系5'});
linkF.lineDash=[3,5,3];//虚线
linkF.arrowType='triangle';//箭头设为三角
linkF.animate=true;//开启连线流动动画(性能消耗高)
linkF.strokeColor = linkF.fontColor = visgraph.randomColor();
visgraph.moveCenter(); //居中
</script>
</body>
</html>