echarts 力导向布局图节点显示图片
前端（html）:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 系统关系图 </title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/admin/simpleui-x/elementui/theme-chalk/index.css">
<link rel="stylesheet" href="/static/admin/simpleui-x/fontawesome-free-5.8.1-web/css/all.min.css">
<link rel="stylesheet" href="/static/admin/simpleui-x/css/index.css?_=2.1.4.619">
<link rel="stylesheet" href="/static/admin/simpleui-x/waves/waves.min.css?_=2.1">
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/static/js/system_relation.js"></script>
<script type="text/javascript" src="/static/js/echarts/echarts.js"></script>
</head>
<body>
<span style="color: red">***根据IP和业务系统名称查询，同一IP地址多个业务系统名称合并***</span>
<div class="el-tabs__content">
<div id="home">
<div class="info-card el-row">
<div class="el-col el-col-12">
<div class="el-card box-card is-always-shadow" style="min-height: unset">
<div class="quick-wrap" style="width: 30%;border: unset">
<input type="text" id="main_ip" class="form-control" style="float: left" placeholder="输入IP地址" />
</div>
<div class="quick-wrap" style="float:left;width: 40%;border: unset">
<div class="col-lg-6">
<select id="sys_name" class="form-control" title="">
<option>请选择系统名称</option>
{% for item in asset %}
<option>{{ item.sys_name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="quick-wrap" style="float:left;width: 10%;border: unset">
<div class="col-lg-3">
<input class="btn btn-primary" id="query" type="button" style="float: left;margin-left: 5px"
value="查询"></div>
</div>
</div>
</div>
</div>
<div id="prem5">
<div id="option_prem5" style="height:800px;">
</div>
</div>
</body>
</html>
前端（js）:
$(function () {
let myChart;
option_prem5 = {
backgroundColor: '',
title: {
text: '',
subtext: '',
x: 'right',
y: 'bottom'
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
toolbox: {
show: true,
feature: {
restore: {show: false},
magicType: {show: false, type: ['force', 'chord']},
saveAsImage: {show: false}
}
},
legend: {
x: 'left',
data: [
//{name: '其他'}, {name: '农银E家'}, {name: '内容管理平台（ECM）'}, {name: 'UM'}, {name: '规则管理平台'}, {name: 'CIF'}, {name: 'CIP'}, {name: '负载均衡'}, {name: '中介平台'}, {name: '移动展业平台'}, {name: '统一互联网服务平台'}, {name: '自动化测试平台'}, {name: '网段'}, {name: '数据交换平台'}, {name: '呼叫中心'}
]
},
series: [
{
type: 'force',
name: "主机关系",
ribbonType: false,
categories: [],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#000000'
}
},
nodeStyle: {
brushType: 'both',
borderColor: 'rgba(255,215,0,0.4)',
borderWidth: 2
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle: {
//r: 30
},
linkStyle: {}
}
},
symbolSize: 30,
center: ['50%', '50%'],
//size: '400%',
//minRadius: 60,
//maxRadius: 120,
gravity: 0,
scaling: 2.5,
draggable: true,
linkSymbol: 'arrow',
steps: 50,
coolDown: 0.9,
useWorker: true,
large: true,
roam: true,
//preventOverlap: true,
nodes: [],
links: []
}
]
};
let ecConfig = echarts.config;
let jsonData;
$('#query').click(function () {
let sys_name = $('#sys_name option:selected').val();
let main_ip = $('#main_ip').val();
if (sys_name === '请选择系统名称') {
sys_name = ''
}
$.get("/admin/asset_app/system_relations_query",
{main_ip: main_ip, sys_name: sys_name},
function (result) {
let str = $.parseJSON(result);
jsonData = str;
if (str.status === 'fail') {
} else {
ipPage(str);
}
});
});
$('#btn_Grid_peiZhi').click(function () {
main_ip = $('#IP').val();
$.get("/admin/asset_app/system_relations_peizhi", {'main_ip': main_ip},
function (result) {
let str = $.parseJSON(result);
$('#system').attr('value', str.system);
$('#virt_type').attr('value', str.virt_type);
$('#kernel').attr('value', str.kernel);
$('#ram').attr('value', str.ram);
$('#cpu_type').attr('value', str.cpu_type);
$('#vcpus').attr('value', str.vcpus);
$('#disk_total').attr('value', str.disk_total);
$('#disk_free').attr('value', str.disk_free);
$('#peiZhi').modal();
$('#close_1').click();
})
});
$('#btn_Grid_comm').click(function () {
let data = {
data: {
main_ip: $('#IP').val(),
jsonData: jsonData
}
};
$.post("/admin/asset_app/system_relations_common", JSON.stringify(data),
function (result) {
$('#close_1').click();
let str = $.parseJSON(result);
if (str.status === 'success') {
ipPage(str);
} else {
$('#alert_info').text(str.value);
$('#tankuang').modal();
}
});
});
$('#btn_Grid_process').click(function () {
main_ip = $('#IP').val();
$.get("/admin/asset_app/system_relations_process", {'main_ip': main_ip},
function (result) {
$('#close_1').click();
let str = $.parseJSON(result);
if (str.status === 'success') {
$('#process_out').text(str.value);
$('#process').modal();
} else {
$('#alert_info').text(str.value);
$('#tankuang').modal();
}
})
});
$('#btn_Grid_version').click(function () {
main_ip = $('#IP').val();
$.get("/admin/asset_app/system_relations_version", {'main_ip': main_ip},
function (result) {
let str = $.parseJSON(result);
$('#close_1').click();
if (str.status === 'success') {
$('#version_out').text(str.value);
$('#version').modal();
} else {
$('#alert_info').text(str.value);
$('#tankuang').modal();
}
})
});
function ipPage(result) {
myChart = echarts.init(document.getElementById('option_prem5'), 'macarons');
let aaa = result.links;
let ccc = result.nodes;
let ddd = result.categories;
let bbb = ddd.substr(14, ddd.length);
let tema = eval('([' + aaa + '])');
let temb = eval('([' + bbb + '])');
let temc = eval('([' + ccc + '])');
let temd = eval('([' + ddd + '])');
console.log('temc:',temc);
//针对aaa的循环，两个IP相互指向，箭头颜色不同
Array.prototype.removeRepeat = function () {
let res = [this];
for (let i = 0; i < this.length; i++) {
let repeat = false;
for (let j = 1; j < this.length; j++) {
if (this[i].source === this[j].target && this[i].target === this[j].source && this[i].itemStyle.normal.color !== 'red') {
this[j].itemStyle.normal.color = 'red';
}
}
res.push(this[i]);
}
return res;
};
tema.removeRepeat();
if (temc.length > 100) {
option_prem5.series[0].size = '800%';
} else {
option_prem5.series[0].size = '100%';
}
option_prem5.series[0].links = tema;
option_prem5.legend.data = temb;
option_prem5.series[0].nodes = temc;
option_prem5.series[0].categories = temd;
// 将数据设置到Echart 中的 data
myChart.setOption(option_prem5, true);
//点击事件
myChart.on(ecConfig.EVENT.CLICK, focus);
myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {
//console.log(myChart.chart.force.getPosition());
});
window.onresize = function () {
myChart.resize();
}
}
function focus(param) {
let data = param.data;
console.log(data)
let links = option_prem5.series[0].links;
let nodes = option_prem5.series[0].nodes;
if (data.source != null && data.target != null) {
let sourceNode = nodes.filter(function (n) {
return n.name === data.source;
})[0];
let targetNode = nodes.filter(function (n) {
return n.name === data.target;
})[0];
console.log('11111')
console.log("选中了边" + sourceNode.name + ' -> ' + targetNode.name);
} else {
// 点击的是点
$('#IP').val(data.name);
$('#myModal').modal();
}
}
});
后端（django）:
def common(masterResult, loadResult, masterCategories, loadCategories):
categories = masterCategories + loadCategories
nodes = ""
categoriesArray = categories.split(",")
categoriesArray.pop()
categoriesArray = list(set(categoriesArray))
for master in masterResult:
for categor, j in enumerate(categoriesArray):
if master[1] == j:
nodes += "{category: " + str(
categor + 1) + ",name:'" + master[0] + "',value:250,draggable: true ,symbol: 'image://http://10.10.36.109:8000/static/echarts/img/MySQL.png'},,"
if master[3] == j:
nodes += "{category: " + str(
categor + 1) + ",name:'" + master[2] + "',value:250,draggable: true ,symbol: 'image://http://10.10.36.109:8000/static/echarts/img/redis.png'},,"
for load in loadResult:
for categor, j in enumerate(categoriesArray):
if load[1] == j:
nodes += "{category: " + str(
categor + 1) + ",name:'" + load[0] + "',value:250,draggable: true ,symbol: 'image://http://10.10.36.109:8000/static/echarts/img/oracle.png'},,"
if load[3] == j:
nodes += "{category: " + str(
categor + 1) + ",name:'" + load[2] + "',value:250,draggable: true ,symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'},,"
categories = "{name:'系统关系'},"
echerts API传送门：
https://echarts.apache.org/zh/option.html#xAxis.axisLine.symbolSize
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
