echarts拓扑图(graph，力导向布局图)
echarts连接：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H
讲解：https://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html
代码：
jsp：
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> <div id="resourceShow" style="width:100%; height: 92%;"></div>
js1(比js2省去了node的遍历添加属性步骤)：
$(function () { getChart(); }) function getChart() { /*var nodes = [{ name: \'服务器\', }, { name: \'存储设备1\', img: \'data-1547632686885-o5Rfi3tyk.png\' }, { name: \'存储设备2\', }, { name: \'防火墙\', }, { name: \'网络设备1\', }, { name: \'网络设备2\', } ] var links = [{ source: \'存储设备2\', target: \'服务器\', name: \'数据传输\' }, { source: \'存储设备1\', target: \'服务器\', name: \'数据传输\' }, { source: \'服务器\', target: \'防火墙\', name: \'访问\' }, { source: \'防火墙\', target: \'网络设备1\', name: \'访问\' }, { source: \'防火墙\', target: \'网络设备2\', name: \'访问\' } ]*/ //把点换成图片在文件里搜索img var myChart = echarts.init(document.getElementById(\'resourceShow\')); //数据1 var nodes = new Array(); var links = new Array(); //数据2，可以比数据1多设置一些属性 var nodess = new Array(); var linkss = new Array(); var id = 0; //通过ID保证点不重复和连接关系 var zones = new Array(); //区域的点ID var clusters = new Array(); //集群的点ID var hosts = new Array(); //宿主机的点ID //获取区域，唯一 $.ajax({ url:"resource/getChartZoneData", dataType:"json", type:"POST", async: false, beforeSend:function(){ // layerIndex = showMessage("配置中....",0, false); }, success:function(data){ data = eval(data.info); var itemStyle = { normal: { color: \'#09022C\', } }; nodes.push({"id":id,"name":data[0].name,"category":0,"symbol":"diamond", "symbolSize":80,"type":"zone","itemStyle":itemStyle}); zones.push(id); id = id + 1; }, error:function(e){ showAlert("对不起，获取区域出错了！"); return; } }); //获取集群 $.ajax({ url:"resource/getChartClusterData", dataType:"json", type:"POST", async: false, beforeSend:function(){ // layerIndex = showMessage("配置中....",0, false); }, success:function(data) { if(!isEmpty(data.info)){ data = eval(data.info); for (var i = 0; i < data.length; i++) { var itemStyle = { normal: { color: \'#040193\', } }; nodes.push({"id":id,"name": data[i].name,"category":1,"symbol":"rect", "symbolSize":50,"type":"cluster","itemStyle":itemStyle}); links.push({"source": zones[0], "target": id}); clusters.push(id); id = id + 1; //获取宿主 $.ajax({ url: "resource/getChartHostData", dataType: "json", type: "POST", data: {"paramsMap.clusterId": data[i].id}, async: false, beforeSend: function () { // layerIndex = showMessage("配置中....",0, false); }, success: function (cdata) { if (!isEmpty(cdata.info)) { cdata = eval(cdata.info); for (var j = 0; j < cdata.length; j++) { var itemStyle = { normal: { color: \'#073CFE\', } }; nodes.push({"id":id,"name": cdata[j].name,"category":2,"symbol":"roundRect","symbolSize":40,"type":"host", "hostCpuCoreNum": cdata[j].hostCpuCoreNum, "hostCpuUsed": cdata[j].hostCpuUsed, "hostCpuLost": cdata[j].hostCpuLost, "hostRamSize": cdata[j].hostRamSize,"hostRamUsedSize": cdata[j].hostRamUsedSize, "hostRamAvailableSize": cdata[j].hostRamAvailableSize,"hostRamUsed": cdata[j].hostRamUsed, "hostDiskTotalCapacityKB": cdata[j].hostDiskTotalCapacityKB,"hostDiskUsedKB": cdata[j].hostDiskUsedKB, "hostDiskAvailableKB": cdata[j].hostDiskAvailableKB,"hostDiskUsed": cdata[j].hostDiskUsed, "roleName":cdata[j].roleName,"businessCnt":cdata[j].businessCnt,"itemStyle":itemStyle}); links.push({"source": clusters[i], "target": id}); hosts.push(id); id = id + 1; //获取vm(云主机) $.ajax({ url: "resource/getChartVmData", dataType: "json", type: "POST", data: {"paramsMap.hostId": cdata[j].id}, async: false, beforeSend: function () { // layerIndex = showMessage("配置中....",0, false); }, success: function (vdata) { if (!isEmpty(vdata.info)) { vdata = eval(vdata.info); for (var k = 0; k < vdata.length; k++) { var itemStyle = { normal: { color: \'#0065C2\', } }; nodes.push({"id":id,"name": vdata[k].name,"category":3,"symbol":"circle","symbolSize":30,"type":"vm", "comment":vdata[k].comment,"systemType":vdata[k].systemType, "applicationName":vdata[k].applicationName, "vmCpuCoreNum":vdata[k].vmCpuCoreNum,"vmRam":vdata[k].vmRam, "vmTotalDiskCapacity":vdata[k].vmTotalDiskCapacity, "instanceName":vdata[k].instanceName,"state":vdata[k].state,"itemStyle":itemStyle}); links.push({"source": hosts[j], "target": id}); id = id + 1; } } }, error: function (e) { showAlert("对不起，获取云主机出错了！"); return; } }); } } }, error: function (e) { showAlert("对不起，获取宿主机出错了！"); return; } }); } } }, error:function(e){ showAlert("对不起，获取集群出错了！"); return; } }); //线条配置 for (var i = 0; i < links.length; i++) { var link = { source: links[i].source, target: links[i].target, label: { normal: { show: false, //线条上是否有字 formatter: links[i].name } }, lineStyle: { normal: { //color: \'#17FFF3\' } } } linkss.push(link); } option = { //backgroundColor: \'#000F1F\', tooltip: {//弹窗 trigger: \'item\', formatter: function(params) { //根据值是否为空判断是点还是线段 if(!isEmpty(params.data.source)){//如果鼠标移动到线条 }else{//如果鼠标移动到点 if(params.data.type == "zone"){ return params.data.name + "：<br>" + " " + "配置状态：启用"; }else if(params.data.type == "cluster"){ return params.data.name + "：<br>" + " " + "配置状态：启用"; }else if(params.data.type == "host"){ var msg = ""; msg += params.data.name + "：<br>" + " " + "配置状态：启用" + "<br>"; if(!isEmpty(params.data.roleName)){ msg += " " + "宿主角色：" + params.data.roleName + "<br>"; } msg += " " + "业务数量：" + params.data.businessCnt + "<br>"; if(!isEmpty(params.data.hostCpuCoreNum)){ msg += " " + "CPU核心数：" + params.data.hostCpuCoreNum + "核<br>"; } if(!isEmpty(params.data.hostRamSize)){ msg += " " + "内存总容量：" + (params.data.hostRamSize/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostRamUsedSize)){ msg += " " + "内存已用量：" + (params.data.hostRamUsedSize/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostRamAvailableSize)){ msg += " " + "内存可用量：" + (params.data.hostRamAvailableSize/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostRamUsed)){ msg += " " + "内存占用百分比：" + (params.data.hostRamUsed*100).toFixed(2) + "%<br>"; } if(!isEmpty(params.data.hostDiskTotalCapacityKB)){ msg += " " + "磁盘总容量：" + (params.data.hostDiskTotalCapacityKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskUsedKB)){ msg += " " + "磁盘已用量：" + (params.data.hostDiskUsedKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskAvailableKB)){ msg += " " + "硬盘可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskUsed)){ msg += " " + "硬盘可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskUsed)){ msg += " " + "磁盘占用百分比：" + (params.data.hostDiskUsed*100).toFixed(2) + "%<br>"; } return msg; }else if(params.data.type == "vm"){ var msg = ""; msg += params.data.name + "：<br>" + " " + "配置状态：启用" + "<br>"; if(!isEmpty(params.data.instanceName)){ msg += " " + "实例名称：" + params.data.instanceName + "<br>"; } if(!isEmpty(params.data.comment)){ msg += " " + "说明：" + params.data.comment + "<br>"; } if(!isEmpty(params.data.applicationName)){ msg += " " + "归属应用：" + params.data.applicationName + "<br>"; } if(!isEmpty(params.data.vmCpuCoreNum)){ msg += " " + "CPU核心数：" + params.data.vmCpuCoreNum + "核<br>"; } if(!isEmpty(params.data.vmRam)){ msg += " " + "内存大小：" + (params.data.vmRam/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.vmTotalDiskCapacity)){ msg += " " + "磁盘总容量：" + (params.data.vmTotalDiskCapacity/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.systemType)){ msg += " " + "系统：" + params.data.systemType + "<br>"; } if(!isEmpty(params.data.state)){ msg += " " + "电源状态：" + params.data.state + "<br>"; } return msg; } } } }, color:[\'#09022C\', \'#040193\', \'#073CFE\', \'#0065C2\'], legend: { //=========小图标，圖表控件 data: [{ name: \'区域\', icon: \'diamond\' //\'circle\', \'rect\', \'roundRect\', \'triangle\', \'diamond\', \'pin\', \'arrow\' //icon:\'image://./images/icon1.png\' //如果用图片img，格式为\'image://+icon文件地址\'，其中image::后的//不能省略 }, { name: \'集群\', icon: \'rect\' }, { name: \'宿主机\', icon: \'roundRect\' }, { name: \'云主机\', icon: \'circle\' } ] }, series : [ {//图片配置 type : \'graph\', //关系图 //name : "拓扑图", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 layout : \'force\', //图的布局，类型为力导图，\'circular\' 采用环形布局，见示例 Les Miserables legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。 hoverAnimation : true,//是否开启鼠标悬停节点的显示动画 coordinateSystem : null,//坐标系可选 xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项 yAxisIndex : 0, //y轴坐标 force: { repulsion: 750,//相距距离 edgeLength: [150, 200], layoutAnimation: true }, /*force : { //力引导图基本配置 //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点 repulsion : 200,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。 gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。 edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长 layoutAnimation : true //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。 },*/ roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 \'scale\' 或者 \'move\'。设置成 true 为都开启 nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放 draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。 focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。 //symbol:\'roundRect\',//关系图节点标记的图形。ECharts 提供的标记类型包括 \'circle\'(圆形), \'rect\'（矩形）, \'roundRect\'（圆角矩形）, \'triangle\'（三角形）, \'diamond\'（菱形）, \'pin\'（大头针）, \'arrow\'（箭头） 也可以通过 \'image://url\' 设置为图片，其中 url 为图片的链接。\'path:// 这种方式可以任意改变颜色并且抗锯齿 //symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array //symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 \'arrow\' 时会忽略 symbolRotate 强制设置为切线的角度。 //symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, \'50%\'] edgeSymbol : [ \'none\', \'arrow\' ],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: [\'circle\', \'arrow\'] symbolSize: 50,//图形大小 edgeSymbolSize : 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 itemStyle : {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 normal : { //默认样式 label : { show : true }, //borderType : \'solid\', //图形描边类型，默认为实线，支持 \'solid\'（实线）, \'dashed\'(虚线), \'dotted\'（点线）。 //borderColor : \'rgba(255,215,0,0.4)\', //设置图形边框为淡金色,透明度为0.4 //borderWidth : 2, //图形的描边线宽。为 0 时无描边。 // opacity : 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5 }, emphasis : {//高亮状态 } }, lineStyle : { //==========关系边的公用线条样式。 normal : { color : \'#31354B\', width : \'1\', type : \'solid\', //线的类型 \'solid\'（实线）\'dashed\'（虚线）\'dotted\'（点线） curveness : 0, //线条的曲线程度，从0到1 opacity : 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5 }, emphasis : {//高亮状态 } }, label : { //=============图形上的文本标签 normal : { show : true,//是否显示标签。 position : \'bottom\',//标签的位置。[\'50%\', \'50%\'] [x,y] \'inside\' textStyle : { //标签的字体样式 color : \'#2D2F3B\', //字体颜色 fontStyle : \'normal\',//文字字体的风格 \'normal\'标准 \'italic\'斜体 \'oblique\' 倾斜 fontWeight : \'bolder\',//\'normal\'标准\'bold\'粗的\'bolder\'更粗的\'lighter\'更细的或100 | 200 | 300 | 400... fontFamily : \'sans-serif\', //文字的字体系列 fontSize : 12, //字体大小 } }, emphasis : {//高亮状态 } }, edgeLabel : {//==============线条的边缘标签 normal : { show : false }, emphasis : {//高亮状态 } }, //别名为nodes name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小 //label:标签样式。 //数据 data : nodes, links : links,//edges是其别名代表节点间的关系数据。 categories: [ //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效 { name: \'区域\', symbol: \'diamond\', label: { //标签样式 } }, { name: \'集群\', symbol: \'rect\' }, { name: \'宿主机\', symbol: \'roundRect\' }, { name: \'云主机\', symbol: \'circle\' } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } //判断字符是否为空的方法 function isEmpty(obj){ if(typeof obj == "undefined" || obj == null || obj == ""){ return true; }else{ return false; } } //判断数组是否有重复的 function in_array(stringToSearch, arrayToSearch) { for (s = 0; s < arrayToSearch.length; s++) { thisEntry = arrayToSearch[s].toString(); if (thisEntry == stringToSearch) { return true; } } return false; }
js2:
$(function () { getChart(); }) function getChart() { /*var nodes = [{ name: \'服务器\', }, { name: \'存储设备1\', img: \'data-1547632686885-o5Rfi3tyk.png\' }, { name: \'存储设备2\', }, { name: \'防火墙\', }, { name: \'网络设备1\', }, { name: \'网络设备2\', } ] var links = [{ source: \'存储设备2\', target: \'服务器\', name: \'数据传输\' }, { source: \'存储设备1\', target: \'服务器\', name: \'数据传输\' }, { source: \'服务器\', target: \'防火墙\', name: \'访问\' }, { source: \'防火墙\', target: \'网络设备1\', name: \'访问\' }, { source: \'防火墙\', target: \'网络设备2\', name: \'访问\' } ]*/ //把点换成图片在文件里搜索img var myChart = echarts.init(document.getElementById(\'resourceShow\')); //数据1 var nodes = new Array(); var links = new Array(); //数据2，可以比数据1多设置一些属性 var nodess = new Array(); var linkss = new Array(); var id = 0; //通过ID保证点不重复和连接关系 var zones = new Array(); //区域的点ID var clusters = new Array(); //集群的点ID var hosts = new Array(); //宿主机的点ID //获取区域，唯一 $.ajax({ url:"resource/getChartZoneData", dataType:"json", type:"POST", async: false, beforeSend:function(){ // layerIndex = showMessage("配置中....",0, false); }, success:function(data){ data = eval(data.info); var itemStyle = { normal: { color: \'#09022C\', } }; nodes.push({"id":id,"name":data[0].name,"category":0,"symbol":"diamond", "symbolSize":80,"type":"zone","itemStyle":itemStyle}); zones.push(id); id = id + 1; }, error:function(e){ showAlert("对不起，获取区域出错了！"); return; } }); //获取集群 $.ajax({ url:"resource/getChartClusterData", dataType:"json", type:"POST", async: false, beforeSend:function(){ // layerIndex = showMessage("配置中....",0, false); }, success:function(data) { if(!isEmpty(data.info)){ data = eval(data.info); for (var i = 0; i < data.length; i++) { var itemStyle = { normal: { color: \'#040193\', } }; nodes.push({"id":id,"name": data[i].name,"category":1,"symbol":"rect", "symbolSize":50,"type":"cluster","itemStyle":itemStyle}); links.push({"source": zones[0], "target": id}); clusters.push(id); id = id + 1; //获取宿主 $.ajax({ url: "resource/getChartHostData", dataType: "json", type: "POST", data: {"paramsMap.clusterId": data[i].id}, async: false, beforeSend: function () { // layerIndex = showMessage("配置中....",0, false); }, success: function (cdata) { if (!isEmpty(cdata.info)) { cdata = eval(cdata.info); for (var j = 0; j < cdata.length; j++) { var itemStyle = { normal: { color: \'#073CFE\', } }; nodes.push({"id":id,"name": cdata[j].name,"category":2,"symbol":"roundRect","symbolSize":40,"type":"host", "hostCpuCoreNum": cdata[j].hostCpuCoreNum, "hostCpuUsed": cdata[j].hostCpuUsed, "hostCpuLost": cdata[j].hostCpuLost, "hostRamSize": cdata[j].hostRamSize,"hostRamUsedSize": cdata[j].hostRamUsedSize, "hostRamAvailableSize": cdata[j].hostRamAvailableSize,"hostRamUsed": cdata[j].hostRamUsed, "hostDiskTotalCapacityKB": cdata[j].hostDiskTotalCapacityKB,"hostDiskUsedKB": cdata[j].hostDiskUsedKB, "hostDiskAvailableKB": cdata[j].hostDiskAvailableKB,"hostDiskUsed": cdata[j].hostDiskUsed, "roleName":cdata[j].roleName,"businessCnt":cdata[j].businessCnt,"itemStyle":itemStyle}); links.push({"source": clusters[i], "target": id}); hosts.push(id); id = id + 1; //获取vm(云主机) $.ajax({ url: "resource/getChartVmData", dataType: "json", type: "POST", data: {"paramsMap.hostId": cdata[j].id}, async: false, beforeSend: function () { // layerIndex = showMessage("配置中....",0, false); }, success: function (vdata) { if (!isEmpty(vdata.info)) { vdata = eval(vdata.info); for (var k = 0; k < vdata.length; k++) { var itemStyle = { normal: { color: \'#0065C2\', } }; nodes.push({"id":id,"name": vdata[k].name,"category":3,"symbol":"circle","symbolSize":30,"type":"vm", "comment":vdata[k].comment,"systemType":vdata[k].systemType, "applicationName":vdata[k].applicationName, "vmCpuCoreNum":vdata[k].vmCpuCoreNum,"vmRam":vdata[k].vmRam, "vmTotalDiskCapacity":vdata[k].vmTotalDiskCapacity, "instanceName":vdata[k].instanceName,"state":vdata[k].state,"itemStyle":itemStyle}); links.push({"source": hosts[j], "target": id}); id = id + 1; } } }, error: function (e) { showAlert("对不起，获取云主机出错了！"); return; } }); } } }, error: function (e) { showAlert("对不起，获取宿主机出错了！"); return; } }); } } }, error:function(e){ showAlert("对不起，获取集群出错了！"); return; } }); //节点配置 多了itemStyle属性，可以在上面加入，请看js1 for (var j = 0; j < nodes.length; j++) { if(nodes[j].type == "host"){ var node = { id: nodes[j].id, name: nodes[j].name, category:nodes[j].category, symbol:nodes[j].symbol, //symbol: \'image://./images/\' + nodes[j].img,//图片路径 symbolSize:nodes[j].symbolSize, type: nodes[j].type, //cpu hostCpuCoreNum: nodes[j].hostCpuCoreNum, hostCpuUsed: nodes[j].hostCpuUsed, hostCpuLost: nodes[j].hostCpuLost, //内存 hostRamSize: nodes[j].hostRamSize, hostRamUsedSize: nodes[j].hostRamUsedSize, hostRamAvailableSize: nodes[j].hostRamAvailableSize, hostRamUsed: nodes[j].hostRamUsed, //磁盘 hostDiskTotalCapacityKB: nodes[j].hostDiskTotalCapacityKB, hostDiskUsedKB: nodes[j].hostDiskUsedKB, hostDiskAvailableKB: nodes[j].hostDiskAvailableKB, hostDiskUsed: nodes[j].hostDiskUsed, roleName: nodes[j].roleName, businessCnt: nodes[j].businessCnt, itemStyle: { normal: { //color: \'#12b5d0\', } } } }else if(nodes[j].type == "vm"){ var node = { id: nodes[j].id, name: nodes[j].name, category:nodes[j].category, symbol:nodes[j].symbol, //symbol: \'image://./images/\' + nodes[j].img,//图片路径 symbolSize:nodes[j].symbolSize, type: nodes[j].type, comment: nodes[j].comment, applicationName: nodes[j].applicationName, vmCpuCoreNum: nodes[j].vmCpuCoreNum, vmRam: nodes[j].vmRam, vmTotalDiskCapacity: nodes[j].vmTotalDiskCapacity, systemType: nodes[j].systemType, instanceName: nodes[j].instanceName, state: nodes[j].state, itemStyle: { normal: { //color: \'#12b5d0\', } } } }else{ var node = { id: nodes[j].id, name: nodes[j].name, category:nodes[j].category, symbol:nodes[j].symbol, //symbol: \'image://./images/\' + nodes[j].img,//图片路径 symbolSize:nodes[j].symbolSize, type: nodes[j].type, itemStyle: { normal: { //color: \'#12b5d0\', } } } } nodess.push(node); } //线条配置 for (var i = 0; i < links.length; i++) { var link = { source: links[i].source, target: links[i].target, label: { normal: { show: false, //线条上是否有字 formatter: links[i].name } }, lineStyle: { normal: { //color: \'#17FFF3\' } } } linkss.push(link); } option = { //backgroundColor: \'#000F1F\', tooltip: {//弹窗 trigger: \'item\', formatter: function(params) { //根据值是否为空判断是点还是线段 if(!isEmpty(params.data.source)){//如果鼠标移动到线条 return params.name; }else{//如果鼠标移动到点 if(params.data.type == "zone"){ return params.data.name + "：<br>" + " " + "配置状态：启用"; }else if(params.data.type == "cluster"){ return params.data.name + "：<br>" + " " + "配置状态：启用"; }else if(params.data.type == "host"){ var msg = ""; msg += params.data.name + "：<br>" + " " + "配置状态：启用" + "<br>"; if(!isEmpty(params.data.roleName)){ msg += " " + "宿主角色：" + params.data.roleName + "<br>"; } msg += " " + "业务数量：" + params.data.businessCnt + "<br>"; if(!isEmpty(params.data.hostCpuCoreNum)){ msg += " " + "CPU核心数：" + params.data.hostCpuCoreNum + "核<br>"; } if(!isEmpty(params.data.hostRamSize)){ msg += " " + "内存总容量：" + (params.data.hostRamSize/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostRamUsedSize)){ msg += " " + "内存已用量：" + (params.data.hostRamUsedSize/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostRamAvailableSize)){ msg += " " + "内存可用量：" + (params.data.hostRamAvailableSize/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostRamUsed)){ msg += " " + "内存占用百分比：" + (params.data.hostRamUsed*100).toFixed(2) + "%<br>"; } if(!isEmpty(params.data.hostDiskTotalCapacityKB)){ msg += " " + "磁盘总容量：" + (params.data.hostDiskTotalCapacityKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskUsedKB)){ msg += " " + "磁盘已用量：" + (params.data.hostDiskUsedKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskAvailableKB)){ msg += " " + "硬盘可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskUsed)){ msg += " " + "硬盘可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.hostDiskUsed)){ msg += " " + "磁盘占用百分比：" + (params.data.hostDiskUsed*100).toFixed(2) + "%<br>"; } return msg; }else if(params.data.type == "vm"){ var msg = ""; msg += params.data.name + "：<br>" + " " + "配置状态：启用" + "<br>"; if(!isEmpty(params.data.instanceName)){ msg += " " + "实例名称：" + params.data.instanceName + "<br>"; } if(!isEmpty(params.data.comment)){ msg += " " + "说明：" + params.data.comment + "<br>"; } if(!isEmpty(params.data.applicationName)){ msg += " " + "归属应用：" + params.data.applicationName + "<br>"; } if(!isEmpty(params.data.vmCpuCoreNum)){ msg += " " + "CPU核心数：" + params.data.vmCpuCoreNum + "核<br>"; } if(!isEmpty(params.data.vmRam)){ msg += " " + "内存大小：" + (params.data.vmRam/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.vmTotalDiskCapacity)){ msg += " " + "磁盘总容量：" + (params.data.vmTotalDiskCapacity/1024/1024).toFixed(2) + "GB<br>"; } if(!isEmpty(params.data.systemType)){ msg += " " + "系统：" + params.data.systemType + "<br>"; } if(!isEmpty(params.data.state)){ msg += " " + "电源状态：" + params.data.state + "<br>"; } return msg; } } } }, legend: { //=========小图标，圖表控件 show: true, data: [{ name: \'区域\', icon: \'diamond\' //\'circle\', \'rect\', \'roundRect\', \'triangle\', \'diamond\', \'pin\', \'arrow\' //icon:\'image://./images/icon1.png\' //如果用图片img，格式为\'image://+icon文件地址\'，其中image::后的//不能省略 }, { name: \'集群\', icon: \'rect\' }, { name: \'宿主机\', icon: \'roundRect\' }, { name: \'云主机\', icon: \'circle\' } ] }, series : [ {//图片配置 type : \'graph\', //关系图 //name : "拓扑图", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 layout : \'force\', //图的布局，类型为力导图，\'circular\' 采用环形布局，见示例 Les Miserables legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。 hoverAnimation : true,//是否开启鼠标悬停节点的显示动画 coordinateSystem : null,//坐标系可选 xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项 yAxisIndex : 0, //y轴坐标 force: { repulsion: 750,//相距距离 edgeLength: [150, 200], layoutAnimation: true }, /*force : { //力引导图基本配置 //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点 repulsion : 200,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。 gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。 edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长 layoutAnimation : true //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。 },*/ roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 \'scale\' 或者 \'move\'。设置成 true 为都开启 nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放 draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。 focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。 //symbol:\'roundRect\',//关系图节点标记的图形。ECharts 提供的标记类型包括 \'circle\'(圆形), \'rect\'（矩形）, \'roundRect\'（圆角矩形）, \'triangle\'（三角形）, \'diamond\'（菱形）, \'pin\'（大头针）, \'arrow\'（箭头） 也可以通过 \'image://url\' 设置为图片，其中 url 为图片的链接。\'path:// 这种方式可以任意改变颜色并且抗锯齿 //symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array //symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 \'arrow\' 时会忽略 symbolRotate 强制设置为切线的角度。 //symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, \'50%\'] edgeSymbol : [ \'none\', \'arrow\' ],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: [\'circle\', \'arrow\'] symbolSize: 50,//图形大小 edgeSymbolSize : 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 itemStyle : {//===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 normal : { //默认样式 label : { show : true }, //borderType : \'solid\', //图形描边类型，默认为实线，支持 \'solid\'（实线）, \'dashed\'(虚线), \'dotted\'（点线）。 //borderColor : \'rgba(255,215,0,0.4)\', //设置图形边框为淡金色,透明度为0.4 //borderWidth : 2, //图形的描边线宽。为 0 时无描边。 // opacity : 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5 }, emphasis : {//高亮状态 } }, lineStyle : { //==========关系边的公用线条样式。 normal : { color : \'#31354B\', width : \'1\', type : \'solid\', //线的类型 \'solid\'（实线）\'dashed\'（虚线）\'dotted\'（点线） curveness : 0, //线条的曲线程度，从0到1 opacity : 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5 }, emphasis : {//高亮状态 } }, label : { //=============图形上的文本标签 normal : { show : true,//是否显示标签。 position : \'bottom\',//标签的位置。[\'50%\', \'50%\'] [x,y] \'inside\' textStyle : { //标签的字体样式 color : \'#2D2F3B\', //字体颜色 fontStyle : \'normal\',//文字字体的风格 \'normal\'标准 \'italic\'斜体 \'oblique\' 倾斜 fontWeight : \'bolder\',//\'normal\'标准\'bold\'粗的\'bolder\'更粗的\'lighter\'更细的或100 | 200 | 300 | 400... fontFamily : \'sans-serif\', //文字的字体系列 fontSize : 12, //字体大小 } }, emphasis : {//高亮状态 } }, edgeLabel : {//==============线条的边缘标签 normal : { show : false }, emphasis : {//高亮状态 } }, //别名为nodes name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小 //label:标签样式。 //数据 data : nodess, links : linkss,//edges是其别名代表节点间的关系数据。 categories: [ //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效 { name: \'区域\', symbol: \'diamond\', label: { //标签样式 } }, { name: \'集群\', symbol: \'rect\' }, { name: \'宿主机\', symbol: \'roundRect\' }, { name: \'云主机\', symbol: \'circle\' } ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } //判断字符是否为空的方法 function isEmpty(obj){ if(typeof obj == "undefined" || obj == null || obj == ""){ return true; }else{ return false; } } //判断数组是否有重复的 function in_array(stringToSearch, arrayToSearch) { for (s = 0; s < arrayToSearch.length; s++) { thisEntry = arrayToSearch[s].toString(); if (thisEntry == stringToSearch) { return true; } } return false; }
版权声明：本文为raitorei原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。