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;
}
echarts拓扑图(graph，力导向布局图)的更多相关文章
- ECharts之force力导向布局图——数据源说明及后端API约定
Echarts ? 关于 Echarts 请移步这里 force 力导向图 实现方式,如: function require_EC () { require( [ 'echarts', //载入for ...
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...
- 使用百度Echarts制作力导向图
最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...
- D3.js系列——布局：饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...
- D3.js 力导向图
花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...
- d3.js（v5.7）力导向图（关系图谱）
先上图,后面再一一解释: ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的<n ...
- D3.js力导向图中新增节点及新增关系连线示例
大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...
随机推荐
- rm: cannot remove `libtoolT’: No such file or directory
安装源码包第一步./configure检测是否可编译时,检测出问题rm: cannot remove `libtoolT’: No such file or directory 解决方案:将confi ...
- List<object> 转 List<T>
List<TAXIWAY_CENTER_LINE> kk = allObjs.Where(c => c.ToString() == "AMXM.TAXIWAY_CENTER ...
- javascript实现html中关键字查询
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 设置select和option的文字居中
select{ width: auto; padding: 0 1%; //左右一定要设置 margin: 0; } option{ text-align:center; }
- Python 基础02 基本数据类型
简单的数据类型以及赋值 变量不需要声明 Python的变量不需要声明,你可以直接输入: >>> a = 10 那么你的内存里就有了一个变量a,它的值是10,它的类型是 integer ...
- SPOJ 8073 The area of the union of circles （圆并入门）
Sphere Online Judge (SPOJ) - Problem CIRU [求圆并的若干种算法,圆并扩展算法]_AekdyCoin的空间_百度空间 参考AekdyCoin的圆并算法解释,根据 ...
- js中setInterval与setTimeout用法 实现实时刷新每秒刷新
setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: ...
- mysql数据库之windows版本
安装 第一步:打开网址,http://www.mysql.com.点击downloads之后跳转到http://www.mysql.com/downloads/选择Community选项 第二步:按 ...
- php三目运算计算三个数最大值最小值
文章地址:https://www.cnblogs.com/sandraryan/ $x = 10; $y = 45; $z = 3; //求出三个数字中最大值最小值 //先比较x y,如果x> ...
- 2015年NOIP普及组复赛题解
题目涉及算法: 金币:入门题: 扫雷游戏:入门题: 求和:简单数学推导: 推销员:贪心. 金币 题目链接:https://www.luogu.org/problem/P2669 入门题,直接开一个循环 ...