echarts鼠标覆盖高亮显示节点及关系名称详解

echarts鼠标覆盖高亮显示节点及关系名称详解

本文在echart自带的focusNodeAdjacency属性上进行修改。

1、效果

先上效果，原来是鼠标覆盖之后只显示节点名称不显示关系名称。

修改之后可以既显示节点名称又显示（自定义的）关系名称。

2、代码

html部分就这样。

js代码，使用了jquery和echarts.js，用的是源代码那版，因为待会要进源代码里修改……

echarts.js下载地址

其实js代码和echart官网demo的代码完全没区别……

普通的力图设置，只要加上focusNodeAdjacency : http://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('maihttp://n'));

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, futQILEwnction (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','');

}

});

});

},

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。