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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
详解vue 组件
Jun 11 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网站在线人数统计
2008/04/09 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
Javascript window对象详解
2014/11/12 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Python 切分数组实例解析
2019/11/07 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
大型会议接待方案
2014/03/01 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
刑事撤诉申请书
2015/05/18 职场文书
MySQL慢查询的坑
2021/04/28 MySQL