您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“echarts鼠標(biāo)覆蓋高亮顯示節(jié)點的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“echarts鼠標(biāo)覆蓋高亮顯示節(jié)點的示例分析”這篇文章吧。
本文在echart自帶的focusNodeAdjacency屬性上進(jìn)行修改。
1、效果
先上效果,原來是鼠標(biāo)覆蓋之后只顯示節(jié)點名稱不顯示關(guān)系名稱。
修改之后可以既顯示節(jié)點名稱又顯示(自定義的)關(guān)系名稱。
2、代碼
html部分就這樣。
<div id="main"></div>
js代碼,使用了jquery和echarts.js,用的是源代碼那版,因為待會要進(jìn)源代碼里修改……
echarts.js下載地址
其實js代碼和echart官網(wǎng)demo的代碼完全沒區(qū)別……
普通的力圖設(shè)置,只要加上focusNodeAdjacency : true即可。
$(function() { showChart(); }); var myChart; option = { title : { text : '示例' }, animationDurationUpdate : 1500, animationEasingUpdate : 'quinticInOut', series : [ { type : 'graph', layout : 'force', //data和edges里的內(nèi)容在之后動態(tài)添加 data : [], edges : [], //這個label管的是data的label label : { emphasis : { position : 'right', show : true } }, force : { repulsion : 1000 }, roam : true, //將指定的節(jié)點以及其所有鄰接節(jié)點高亮。 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的結(jié)構(gòu)在下面有截圖,可以一一對應(yīng) 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中規(guī)定的參數(shù),也可以使用一些自定義的參數(shù),這里的attribute就是自定義的。這個參數(shù)在改源碼時會用到。 }; }); myChart.setOption(option, true); }, error : function(errorMsg) { alert("請求數(shù)據(jù)失敗!"); } }); };
調(diào)用接口返回的data結(jié)構(gòu)和內(nèi)容如下:
nodes表示節(jié)點,放到option.series[0].data里。
nodes有三個參數(shù),color表示節(jié)點的顏色,name為節(jié)點的名稱(標(biāo)簽),size為節(jié)點的大小。
links表示關(guān)系,放到option.series[0].edges里。
links有三個參數(shù)source為關(guān)系的起點(吧),target為關(guān)系的終點(吧),value是關(guān)系名稱(標(biāo)簽),在edges里放到attribute參數(shù)里。
要注意的是,要實現(xiàn)這種效果,一定不能在edges里給關(guān)系設(shè)置label參數(shù)。
3、修改源碼中的focusNodeAdjacency方法
很慚愧,因為我沒在echart的api里找到能直接實現(xiàn)那種效果的方法,只能去echarts的源碼里改了。
在echarts.js里搜一下focusNodeAdjacency很快就能找到以下內(nèi)容,然后只要添加下面有注釋的三行代碼,就能實現(xiàn)本文顯示節(jié)點和關(guān)系名稱的效果了。
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'); /** * 如果當(dāng)前child是關(guān)系,顯示標(biāo)簽,標(biāo)簽內(nèi)容自定。 * 使用item.getModel().get('xxx'),將xxx修改為對應(yīng)的參數(shù)名稱, * 可獲得自帶及自定義的所有內(nèi)容。 * 這里get('attribute')的attribute為edge中自定義的參數(shù)。 */ if(child.type =='ec-line'){ child.setStyle('text',item.getModel().get('attribute')); } /** * 結(jié)束,這里就增加上面兩句。 */ 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); /** * 增加下面這一句話。 * 這個方法是鼠標(biāo)從節(jié)點上移開時調(diào)用,取消高亮和標(biāo)簽顯示的功能。 * 在這里會把關(guān)系的標(biāo)簽清空。 * 所以如果對關(guān)系直接設(shè)置了label的話,在這一步也會被清掉。 */ child.setStyle('text',''); } }); }); },
以上是“echarts鼠標(biāo)覆蓋高亮顯示節(jié)點的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。