echarts关系图graph修改图⽚，⾃定义⿏标节点和线悬停，图⽚下载，拖拽，右键弹框等。。。
1.⾸先看⼀下效果图：
2.代码⽬录结构
4.代码部分：（如果不懂，可以看我之前写的关于echarts树图tree部分的代码，步骤都⽐较清楚，所以这边我直接上全部代码了，就不拆
分解释说明了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引⼊ echarts.js -->
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmU    <script type="text/javascript" src="js/j
query-1.12.4.min.js"></script>
<script type="text/javascript" src="js/echars.js"></script>
<style>
*{padding: 0;margin: 0;}
.menu{
/*这个样式不写，右键弹框会⼀直显⽰在画布的左下⾓*/
position: absolute;
background: rgba(3,3,3,0.6);
border-radius: 5px;
left: -99999px;
top: -999999px;
}
.menu ul{list-style: none}
.menu ul li{
padding: 5px 10px;
color: #ffff;
border-bottom: 1px dashed #ffffff;
font-size: 14px;
cursor: pointer;
}
.menu ul li:hover{
border-bottom: none;
}
</style>
</head>
<body>
<!-- 为ECharts准备⼀个具备⼤⼩（宽⾼）的Dom -->
<div class="tree-container">
<div id="main" ></div>
</div>
<!--右键弹出菜单-->
<div id="rightMenu" class="menu" >
<ul>
<li><span class="glyphicon glyphicon-off" aria-hidden="true"></span> 开关</li>        <li><span class="glyphicon glyphicon-road" aria-hidden="true"></span> 通⾏</li>    </ul>
</div>
<script>
var myChart = echarts.ElementById('main'));
//todo  节点信息
var data = [
{
"id": 0,
"name": "外部⽹络",
"type": "Internet",
"ip":"1.1.1.1",
"port":"未知",
"ignore":"false",
"flag":"true"
}, {
"id": 1,
"name": "交换机",
"type": "switch",
"ip":"192.168.30.125",
"mac":"48:de:3d:e2:49:a8",
"model":"H3C",
"uptime":"2020-09-03 10:50:50",
"port":"22",
"ignore":"true",
"flag":"true"
}, {
"id": 2,
"name": "交换机",
"type": "switch",
"ip":"192.168.1.8",
"mac":"cd:bd:3d:e2:55:55",
"model":"pf",
"uptime":"2020-09-03 10:50:50",
"port":"33",
"ignore":"true",
"flag":"true"
}, {
"id": 3,
"name": "计算机",
"type": "computer",
"ip":"192.168.1.8",
"mac":"dv:bd:fd:e2:df:fd",
"model":"pf",
"uptime":"2020-09-03 10:50:50",
"account":"xiaox",
"location":"xianm",
"port":"44",
"ignore":"true",
"name": "路由器",
"type": "rooter",
"ip":"192.168.1.8",
"mac":"ds:bd:3d:e2:ds:55",
"model":"pf",
"uptime":"2020-09-03 10:50:50",
"account":"xiaox",
"location":"xianm",
"port":"55",
"ignore":"true",
"flag":"true"
}, {
"id": 5,
"name": "服务器",
"type": "service",
"ip":"192.168.1.8",
"mac":"vf:eq:dd:e2:55:55",
"model":"pf",
"uptime":"2020-09-03 10:50:50",
"account":"xiaox",
"location":"xianm",
"port":"66",
"ignore":"true",
"flag":"true"
}, {
"id":6,
"name": "打印机",
"type": "print",
"ip":"192.168.1.8",
"mac":"ss:bd:3d:ju:55:55",
"model":"pf",
"uptime":"2020-09-03 10:50:50",
"account":"xiaox",
"location":"xianm",
"port":"77",
"ignore":"true",
"flag":"true"
}, {
"id": 7,
"name": "⼿机",
"type": "phone",
"ip":"192.168.1.8",
"mac":"ju:ju:3d:e2:55:uy",
"model":"pf",
"uptime":"2020-09-03 10:50:50",
"account":"xiaox",
"location":"xianm",
"port":"88",
"ignore":"true",
"flag":"true"
}
]
;
//todo 连线信息(线条中的source和target都对应节点data数据中的id指向)    //todo 我看了其他例⼦，好像也可以是其它的字段，不⼀定是id
var links = [{
"source": 0,
"target": 1
}, {
"source": 1,
"target": 2
}, {
"source": 1,
"target": 4
}, {
"source": 1,
"target": 5
}, {
"source": 2,
"target": 6
}, {
"source": 2,
"target": 7
}];
/**
* ⾃定义图⽚
*/
for (var i = 0;i < data.length;i++){
if (data[i].type == 'Internet'){
data[i].symbol = 'image://image/internet.png';
data[i].symbolSize = 70;
}
if (data[i].type == 'switch'){
data[i].symbol = 'image://image/switch.png';
}
jquery弹出div窗口
if (data[i].type == 'hub'){
data[i].symbol = 'image://image/hub.png';
}
if (data[i].type == 'computer'){
data[i].symbol = 'image://image/computer.png';
}
if (data[i].type == 'rooter'){
data[i].symbol = 'image://image/rooter.png';
}
if (data[i].type == 'service'){
data[i].symbol = 'image://image/service.png';
}
if (data[i].type == 'print'){
data[i].symbol = 'image://image/print.png';
}
if (data[i].type == 'phone'){
data[i].symbol = 'image://image/phone.png';
}
}
// var categoryName = [];
// var categoryStatus = {'外部⽹络':true,'交换机':true,'hub':true};
// var categories =  [ {name : '外部⽹络'}, {name : '交换机'}, {name : 'hub'}];
var option = {
tooltip: {//弹窗
enterable:true,//⿏标是否可进⼊提⽰框浮层中
formatter:formatterHover,//修改⿏标悬停显⽰的内容
},
toolbox: {
show: true,
top:20,
left:20,
feature: {
restore: {
title:'刷新'//刷新echarts图标
},
saveAsImage: {
title:'下载图⽚',//⿏标悬停在下载图标上时，显⽰的⽂字
name:'network-topology'//下载图⽚的⽂件名为network-topology.png                }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。