前台代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<link rel="stylesheet"href="../../framework/css/stationTopology.css">
</head>
<body>
<div class="topology">
<div class="right"
id="main">
</div>
</div>
</body>
<script src="../../framework/js/echarts.js?v=version"></script>
<script type="text/javascript">
var nodes = [{
x: '480',
y: '1000',
nodeName: '负载均衡1',
img: '1.png',
}, {
x: '480',
y: '890',
nodeName: 'WEB服务器',
img: '2.png'
},
{
x: '100',
y: '750',
nodeName: '负载均衡2',
img: '1.png',
},
{
x: '350',
y: '750',
nodeName: '负载均衡2',
img: '1.png',
alarm: '发生警告!'
},
{
x: '630',
y: '750',
nodeName: '负载均衡2',
img: '1.png',
},
{
x: '850',
y: '750',
nodeName: '负载均衡2',
img: '1.png',
},
{
x: '50',
y: '550',
nodeName: '查验网站\n微信公众号\n政务网站',
img: '3.png',
},
{
x: '150',
y: '550',
nodeName: '查验网站\n微信公众号\n政务网站',
img: '3.png',
},
{
x: '300',
y: '550',
nodeName: '电子票制作\n及存储中心',
img: '3.png',
},
{
x: '400',
y: '550',
nodeName: '电子票制作\n及存储中心',
img: '3.png',
},
{
x: '570',
y: '550',
nodeName: '票据服务器1\n(在线)',
img: '3.png',
},
{
x: '670',
y: '550',
nodeName: '票据服务器1\n(在线)',
img: '3.png',
},
{
x: '800',
y: '550',
nodeName: '电子制票\n及存储中心',
img: '3.png',
},
{
x: '900',
y: '550',
nodeName: '电子制票\n及存储中心',
img: '3.png',
},
{
x: '170',
y: '300',
nodeName: 'Inceptor1',
img: '3.png',
},
{
x: '270',
y: '300',
nodeName: 'Inceptor2',
img: '3.png',
},
{
x: '700',
y: '300',
nodeName: '票据Oracle\n数据库服务器',
img: '3.png',
},
{
x: '800',
y: '300',
nodeName: '票据Oracle\n数据库服务器',
img: '3.png',
}
]
var charts = {
nodes: [],
linesData: [{
remark: 'WEB服务器-->左边数起第1个负载均衡',
coords: [
[470, 890],
[100, 890],
[100, 780]
]
}, {
remark: 'WEB服务器-->左边数起第3个负载均衡',
coords: [
[510, 890],
[620, 890],
[620, 780]
]
}, {
remark: 'WEB服务器-->左边数起第4个负载均衡',
coords: [
[510, 890],
[840, 890],
[840, 780]
]
}, {
remark: '左边数起第1个负载均衡-->查验网站微信公众号政务网站1',
coords: [
[100, 723],
[50, 580]
]
}, {
remark: '左边数起第1个负载均衡-->查验网站微信公众号政务网站2',
coords: [
[100, 723],
[150, 580]
]
}, {
remark: '左边数起第2个负载均衡-->电子票制作及存储中心1',
coords: [
[350, 723],
[300, 580]
],
lineStyle: {
normal: {
color: '#DC143C'
}
},
effect: {
color: '#DC143C'
}
}, {
remark: '左边数起第2个负载均衡-->电子票制作及存储中心2',
coords: [
[350, 723],
[400, 580]
],
lineStyle: {
normal: {
color: '#DC143C'
}
},
effect: {
color: '#DC143C'
}
}, {
remark: '左边数起第3个负载均衡-->票据服务器1',
coords: [
[630, 723],
[570, 580]
]
}, {
remark: '左边数起第3个负载均衡-->票据服务器2',
coords: [
[630, 723],
[670, 580]
]
}, {
remark: '左边数起第4个负载均衡-->电子制票及存储中心1',
coords: [
[850, 723],
[800, 580]
]
}, {
remark: '左边数起第4个负载均衡-->电子制票及存储中心2',
coords: [
[850, 723],
[900, 580]
]
}, {
remark: '查验网站-->Inceptor1',
coords: [
[100, 450],
[100, 300],
[160, 300]
]
}, {
remark: '电子票制作及存储中心-->Inceptor2',
coords: [
[350, 450],
[350, 300],
[280, 300]
]
}, {
remark: '票据服务器-->票据Oracle数据库服务器',
coords: [
[620, 450],
[620, 300],
[690, 300]
]
}, {
remark: '电子制票及储存中心-->票据Oracle数据库服务器',
coords: [
[850, 450],
[850, 300],
[810, 300]
]
}]
}
for (var j = 0; j < nodes.length; j++) {
var x = parseInt(nodes[j].x)
var y = parseInt(nodes[j].y)
var node = {
nodeName: nodes[j].nodeName,
value: [x, y],
symbolSize: 50,
alarm: nodes[j].alarm,
symbol: 'image:///xxxx/resources/images/tp/' + nodes[j].img, //图片路径
itemStyle: {
normal: {
color: '#12b5d0',
}
}
}
charts.nodes.push(node)
}
var option = {
backgroundColor: "#0B1321",
xAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
yAxis: {
min: 0,
max: 1000,
show: false,
type: 'value'
},
series: [{
type: 'graph',
coordinateSystem: 'cartesian2d',
label: {
normal: {
show: true,
position: 'bottom',
color: '#00FFFF'
}
},
itemStyle: {
normal: {
label: {
show: true,
formatter: function(item) {
return item.data.nodeName
}
}
}
},
data: charts.nodes,
}, {
type: 'lines',
polyline: true,
coordinateSystem: 'cartesian2d',
lineStyle: {
normal: {
width: 2,
color: '#175064',
curveness: 0.3
}
},
effect: {
show: true,
trailLength: 0.1,
symbol: 'arrow',
color: '#00FFFF',
symbolSize: 8
},
data: charts.linesData
}]
};
// 基于准备好的dom，初始化echarts实例
var mainDom = document.getElementById('main');
var myChart = echarts.init(mainDom);
myChart.on('click', function (params) {
console.log(params);
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>css样式
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
.topology {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #2c2f58;
}
.right {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}实现效果
注意：node中的x,y 可以理解为其在一个坐标系内的左边，coords数组里的数据即为两个node之间连接的线所经历的拐点，如果想改变node节点之间的箭头转换，可以通过转换coords数组之内的元素达到目的。
7712