本文在echart自带的focusnodeadjacency属性上进行修改。
1、效果
先上效果，原来是鼠标覆盖之后只显示节点名称不显示关系名称。
修改之后可以既显示节点名称又显示（自定义的）关系名称。
2、代码
html部分就这样。
<p id="main"></p>
js代码，使用了jquery和echarts.js，用的是源代码那版，因为待会要进源代码里修改……
echarts.js下载地址
其实js代码和echart官网demo的代码完全没区别……
普通的力图设置，只要加上focusnodeadjacency : true即可。
$(function() { showchart(); }); var mychart; option = { title : { text : '示例' }, animationdurationupdate : 1500, animationeasingupdate : 'quinticinout', series : [ { type : 'graph', layout : 'force', //data和edges里的内容在之后动态添加 data : [], edges : [], //这个label管的是data的label label : { emphasis : { position : 'right', show : true } }, force : { repulsion : 1000 }, roam : true, //将指定的节点以及其所有邻接节点高亮。 focusnodeadjacency : true, linestyle : { normal : { width : 0.5, curveness : 0.3, opacity : 0.7 } }, draggable : true } ] }; function showchart() { mychart = echarts.init(document.getelementbyid('main')); mychart.showloading(); $.ajax({ //我用struts2做了个小后台，这个url就是里面的一个action url : 'echartsdisplay', type : 'post', data : {}, datatype : 'json', success : function(data) { mychart.hideloading(); //data的结构在下面有截图，可以一一对应 option.series[0].data = data.nodes.map(function(node) { return { name : node.name, itemstyle : { normal : { color : node.color } }, symbolsize : node.size, }; }); option.series[0].edges = data.links.map(function(edge) { return { source : edge.source, target : edge.target, attribute : edge.value //除了api中规定的参数，也可以使用一些自定义的参数，这里的attribute就是自定义的。这个参数在改源码时会用到。 }; }); mychart.setoption(option, true); }, error : function(errormsg) { alert(请求数据失败!); } }); };
调用接口返回的data结构和内容如下：
nodes表示节点，放到option.series[0].data里。
nodes有三个参数，color表示节点的颜色，name为节点的名称(标签)，size为节点的大小。
links表示关系，放到option.series[0].edges里。
links有三个参数source为关系的起点(吧)，target为关系的终点(吧)，value是关系名称(标签)，在edges里放到attribute参数里。
要注意的是，要实现这种效果，一定不能在edges里给关系设置label参数。
3、修改源码中的focusnodeadjacency方法
很惭愧，因为我没在echart的api里找到能直接实现那种效果的方法，只能去echarts的源码里改了。
在echarts.js里搜一下focusnodeadjacency很快就能找到以下内容，然后只要添加下面有注释的三行代码，就能实现本文显示节点和关系名称的效果了。
focusnodeadjacency: function (seriesmodel, ecmodel, api, payload) { var data = this._model.getdata(); var dataindex = payload.dataindex; var el = data.getitemgraphicel(dataindex); if (!el) { return; } var graph = data.graph; var datatype = el.datatype; function fadeoutitem(item, opacitypath) { var opacity = getitemopacity(item, opacitypath); var el = item.getgraphicel(); if (opacity == null) { opacity = 1; } el.traverse(function (child) { child.trigger('normal'); if (child.type !== 'group') { child.setstyle('opacity', opacity * 0.1); } }); } function fadeinitem(item, opacitypath) { var opacity = getitemopacity(item, opacitypath); var el = item.getgraphicel(); el.traverse(function (child) { child.trigger('emphasis'); /** * 如果当前child是关系，显示标签，标签内容自定。 * 使用item.getmodel().get('xxx')，将xxx修改为对应的参数名称， * 可获得自带及自定义的所有内容。 * 这里get('attribute')的attribute为edge中自定义的参数。 */ if(child.type =='ec-line'){ child.setstyle('text',item.getmodel().get('attribute')); } /** * 结束，这里就增加上面两句。 */ if (child.type !== 'group') { child.setstyle('opacity', opacity); } }); } if (dataindex !== null && datatype !== 'edge') { graph.eachnode(function (node) { fadeoutitem(node, nodeopacitypath); }); graph.eachedge(function (edge) { fadeoutitem(edge, lineopacitypath); }); var node = graph.getnodebyindex(dataindex); fadeinitem(node, nodeopacitypath); zrutil.each(node.edges, function (edge) { if (edge.dataindex < 0) { return; } fadeinitem(edge, lineopacitypath); fadeinitem(edge.node1, nodeopacitypath); fadeinitem(edge.node2, nodeopacitypath); }); } }, unfocusnodeadjacency: function (seriesmodel, ecmodel, api, payload) { var graph = this._model.getdata().graph; graph.eachnode(function (node) { var opacity = getitemopacity(node, nodeopacitypath); node.getgraphicel().traverse(function (child) { child.trigger('normal'); if (child.type !== 'group') { child.setstyle('opacity', opacity); } }); }); graph.eachedge(function (edge) { var opacity = getitemopacity(edge, lineopacitypath); edge.getgraphicel().traverse(function (child) { child.trigger('normal'); if (child.type !== 'group') { child.setstyle('opacity', opacity); /** * 增加下面这一句话。 * 这个方法是鼠标从节点上移开时调用，取消高亮和标签显示的功能。 * 在这里会把关系的标签清空。 * 所以如果对关系直接设置了label的话，在这一步也会被清掉。 */ child.setstyle('text',''); } }); }); },
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue1与vue2获取dom元素步骤详解
vue快速复制内容到粘贴板（附代码）
以上就是echarts鼠标覆盖高亮显示节点关系数实现步骤的详细内容。