echarts关系图graph修改图片，自定义鼠标节点和线悬停，图片下载，拖拽，右键弹框等功能的实现 |
您所在的位置：网站首页 › 怎样将键盘背景设自定义图 › echarts关系图graph修改图片，自定义鼠标节点和线悬停，图片下载，拖拽，右键弹框等功能的实现 |
echarts关系图graph修改图片，自定义鼠标节点和线悬停，图片下载，拖拽，右键弹框等功能的实现
|
1.首先看一下效果图：
2.代码目录结构
3.参考地址：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 4.代码部分：（如果不懂，可以看我之前写的关于echarts树图tree部分的代码，步骤都比较清楚，所以这边我直接上全部代码了，就不拆分解释说明了） Title *{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{ color: #659bc5; } .menu ul li:last-child{ border-bottom: none; } 开关 通行 var myChart = echarts.init(document.getElementById('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", "flag":"true" }, { "id": 4, "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": 3 }, { "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'; } 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 } } }, color:['#09022C', '#040193', '#073CFE', '#0065C2'], series : [ {//图片配置 type : 'graph', //关系图 //name : "拓扑图", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 layout : 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。 hoverAnimation : true,//是否开启鼠标悬停节点的显示动画 coordinateSystem : null,//坐标系可选 xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项 yAxisIndex : 0, //y轴坐标 force: { repulsion: 450,//相距距离 edgeLength: [150, 200], layoutAnimation: true }, roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放 draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。 focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。 edgeSymbol : [ 'none', 'arrow' ],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow'] symbolSize:[40,40],//图形大小 edgeSymbolSize : 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 lineStyle : { //todo==========节点连线样式。 normal : { color : '#31354B', width : '1', type : 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线） curveness : 0, //线条的曲线程度，从0到1 opacity : 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5 }, emphasis : {//高亮状态 } }, label : { //todo=============图形上的文本标签(图片名称) normal : { show : true,//是否显示标签。 position : 'bottom',//标签的位置。['50%', '50%'] [x,y] 'inside' textStyle : { //标签的字体样式 color : '#2D2F3B', //字体颜色 fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜 fontWeight : 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400... fontFamily : 'sans-serif', //文字的字体系列 fontSize : 12, //字体大小 } }, emphasis : {//高亮状态 } }, data: data, links: links //edges是其别名代表节点间的关系数据。 } ] }; /** * 鼠标悬停时显示详情 */ function formatterHover(params){ // console.log(params); // console.log('data1',data); //todo 节点node悬停效果 if (params.dataType == "node") { var deviceType = params.data.type; var imgPath = params.data.symbol; //图片地址截取，因为echarts修改图片的时候有一个------image://---前缀，前缀后面的才是图片真正的地址 var imgPathSrc = imgPath.split("image://")[1]; // console.log('str',imgPathSrc); if (deviceType === 'Internet' || deviceType === 'hub'){ return " |
【本文地址】