下面我就为大家分享一篇echarts鼠标覆盖高亮显示节点及关系名称详解，具有很好的参考价值，希望对大家有所帮助。
本文在echart自带的focusnodeadjacency属性上进行修改。
1、效果
先上效果，原来是鼠标覆盖之后只显示节点名称不显示关系名称。
修改之后可以既显示节点名称又显示（自定义的）关系名称。
2、代码
html部分就这样。
07494ccee613f6e05ace54872fef001694b3e26ee717c64999d7867364b1b4a3
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','');
}
});
});
},
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue 实现的树形菜的实例代码
p5.js入门教程之键盘交互
vue重点问题总结
以上就是echarts鼠标覆盖高亮显示节点及关系名称详解的详细内容。