下面我就為大家分享一篇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',''); } }); }); },
以上是echarts滑鼠覆蓋高亮顯示節點及關係名稱詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!