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

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

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

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

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

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结构和内容如下:

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

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入门教程之键盘交互