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

下面我就为大家分享一篇echarts鼠标覆盖高亮显示节点及关系名称详解,具有很好的参考价值,希望对大家有所帮助。

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

1、效果

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

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

2、代码

html部分就这样。

<p id="main"></p>

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的源码里改了。

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: