echarts拓扑图

前台代码

<!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数组之内的元素达到目的。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页