這次帶給大家echarts滑鼠覆蓋高亮顯示節點關係數實現步驟，echarts滑鼠覆蓋高亮顯示節點關係數實現的注意事項有哪些，下面就是實戰案例，一起來看一下。
本文在echart自帶的focusNodeAdjacency屬性上進行修改。
1、效果
先上效果，原來是滑鼠覆蓋之後只顯示節點名稱不顯示關係名稱。
已修改後可以既顯示節點名稱又顯示（自訂的）關係名稱。
2、程式碼
#html部分就這樣。
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','');
}
});
});
},登入後複製
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
vue1與vue2取得dom元素步驟詳解
vue快速複製內容到貼上簿（附程式碼）
以上是echarts滑鼠覆蓋高亮顯示節點關係數實現步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！
