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


Posted in Javascript onMarch 17, 2018

本文在echart自带的focusNodeAdjacency属性上进行修改。

1、效果

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

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

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

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

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

2、代码

html部分就这样。

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

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','');
}
 });
 });
},

以上这篇echarts鼠标覆盖高亮显示节点及关系名称详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 #Javascript
vue实现a标签点击高亮方法
Mar 17 #Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 #Javascript
Vue 实现双向绑定的四种方法
Mar 16 #Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 #Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 #Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
php 保留字列表
2012/10/04 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
Python中%r和%s的详解及区别
2017/03/16 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Python全排列操作实例分析
2018/07/24 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
PyTorch中permute的用法详解
2019/12/30 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python在不同条件下的输入与输出
2020/02/13 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
股东合作协议书
2014/04/14 职场文书
治安消防安全责任书
2014/07/23 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
Nginx跨域问题解析与解决
2022/08/05 Servers