echarts拓扑图

最新推荐文章于 2024-07-11 17:57:24 发布

我是一个诗人

最新推荐文章于 2024-07-11 17:57:24 发布

阅读量6.2k

点赞数 5

分类专栏： echars JavaEE 文章标签： echarts 拓扑图

本文链接：https://blog.csdn.net/sinat_28761919/article/details/94441281

版权

本文介绍了如何利用Echarts库来实现拓扑图。通过调整node的x、y坐标和coords数组，可以定制节点之间的连接线路径，从而改变箭头方向。重点在于理解和操作coords数组来控制线条的转折点。

摘要由CSDN通过智能技术生成

前台代码

<!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',
		},
		{