欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱(chēng)詳解

 更新時(shí)間:2018年03月17日 09:43:02   作者:ueba  
下面小編就為大家分享一篇echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱(chēng)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

本文在echart自帶的focusNodeAdjacency屬性上進(jìn)行修改。

1、效果

先上效果,原來(lái)是鼠標(biāo)覆蓋之后只顯示節(jié)點(diǎn)名稱(chēng)不顯示關(guān)系名稱(chēng)。

修改之后可以既顯示節(jié)點(diǎn)名稱(chēng)又顯示(自定義的)關(guān)系名稱(chēng)。

2、代碼

html部分就這樣。

<div id="main"></div>

js代碼,使用了jquery和echarts.js,用的是源代碼那版,因?yàn)榇龝?huì)要進(jìn)源代碼里修改……

echarts.js下載地址

其實(shí)js代碼和echart官網(wǎng)demo的代碼完全沒(méi)區(qū)別……

普通的力圖設(shè)置,只要加上focusNodeAdjacency : true即可。

$(function() {
 showChart();
});
var myChart;
option = {
 title : {
 text : '示例'
 },
 animationDurationUpdate : 1500,
 animationEasingUpdate : 'quinticInOut',
 series : [ {
 type : 'graph',
 layout : 'force',
 //data和edges里的內(nèi)容在之后動(dòng)態(tài)添加
 data : [],
 edges : [],
 //這個(gè)label管的是data的label
 label : {
  emphasis : {
  position : 'right',
  show : true
  }
 },
 force : {
  repulsion : 1000
 },
 roam : true,
 //將指定的節(jié)點(diǎn)以及其所有鄰接節(jié)點(diǎn)高亮。
 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做了個(gè)小后臺(tái),這個(gè)url就是里面的一個(gè)action
 url : 'echartsDisplay',
 type : 'POST',
 data : "{}",
 dataType : 'json',
 success : function(data) {
  myChart.hideLoading();
  //data的結(jié)構(gòu)在下面有截圖,可以一一對(duì)應(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就是自定義的。這個(gè)參數(shù)在改源碼時(shí)會(huì)用到。
  };
  });
  myChart.setOption(option, true);
 },
 error : function(errorMsg) {
  alert("請(qǐng)求數(shù)據(jù)失敗!");
 }
 });
};

調(diào)用接口返回的data結(jié)構(gòu)和內(nèi)容如下:

nodes表示節(jié)點(diǎn),放到option.series[0].data里。

nodes有三個(gè)參數(shù),color表示節(jié)點(diǎn)的顏色,name為節(jié)點(diǎn)的名稱(chēng)(標(biāo)簽),size為節(jié)點(diǎn)的大小。

links表示關(guān)系,放到option.series[0].edges里。

links有三個(gè)參數(shù)source為關(guān)系的起點(diǎn)(吧),target為關(guān)系的終點(diǎn)(吧),value是關(guān)系名稱(chēng)(標(biāo)簽),在edges里放到attribute參數(shù)里。

要注意的是,要實(shí)現(xiàn)這種效果,一定不能在edges里給關(guān)系設(shè)置label參數(shù)。

3、修改源碼中的focusNodeAdjacency方法

很慚愧,因?yàn)槲覜](méi)在echart的api里找到能直接實(shí)現(xiàn)那種效果的方法,只能去echarts的源碼里改了。

在echarts.js里搜一下focusNodeAdjacency很快就能找到以下內(nèi)容,然后只要添加下面有注釋的三行代碼,就能實(shí)現(xiàn)本文顯示節(jié)點(diǎn)和關(guān)系名稱(chēng)的效果了。

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修改為對(duì)應(yīng)的參數(shù)名稱(chēng),
* 可獲得自帶及自定義的所有內(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);
 /**
 * 增加下面這一句話(huà)。
 * 這個(gè)方法是鼠標(biāo)從節(jié)點(diǎn)上移開(kāi)時(shí)調(diào)用,取消高亮和標(biāo)簽顯示的功能。
 * 在這里會(huì)把關(guān)系的標(biāo)簽清空。
 * 所以如果對(duì)關(guān)系直接設(shè)置了label的話(huà),在這一步也會(huì)被清掉。
 */
 child.setStyle('text','');
}
 });
 });
},

以上這篇echarts鼠標(biāo)覆蓋高亮顯示節(jié)點(diǎn)及關(guān)系名稱(chēng)詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法

    vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法

    下面小編就為大家?guī)?lái)一篇vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • Vue動(dòng)態(tài)生成表格的行和列

    Vue動(dòng)態(tài)生成表格的行和列

    這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)生成表格的行和列,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題

    vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題

    這篇文章主要介紹了vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過(guò)程及常見(jiàn)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue項(xiàng)目中使用Svg的方法

    vue項(xiàng)目中使用Svg的方法

    本文主要以 vue-cli3 搭建的項(xiàng)目為例,來(lái)聊一下如何在項(xiàng)目中更優(yōu)雅的使用 svg 。感興趣的朋友跟隨小編一起看看吧
    2018-10-10
  • vue3中$attrs的變化與inheritAttrs的使用詳解

    vue3中$attrs的變化與inheritAttrs的使用詳解

    $attrs現(xiàn)在包括class和style屬性。?也就是說(shuō)在vue3中$listeners不存在了,vue2中$listeners是單獨(dú)存在的,在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性,這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下
    2022-10-10
  • vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接

    vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接

    這篇文章主要介紹了vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接,文章圍繞主題的相關(guān)資料展開(kāi)詳細(xì)的內(nèi)容具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-06-06
  • vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式

    vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式

    這篇文章主要介紹了vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。
    2022-04-04
  • 淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(上)

    淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(上)

    這篇文章主要介紹了淺談Vue頁(yè)面級(jí)緩存解決方案feb-alive(上),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Sublime Text新建.vue模板并高亮(圖文教程)

    Sublime Text新建.vue模板并高亮(圖文教程)

    這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • vue項(xiàng)目中使用websocket的實(shí)現(xiàn)

    vue項(xiàng)目中使用websocket的實(shí)現(xiàn)

    本文主要介紹了vue項(xiàng)目中使用websocket的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01

最新評(píng)論