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

本文在echart自带的

属性上进行修改。

1、效果

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

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

2、代码

html部分就这样。

js代码，使用了jquery和echarts.js，用的是源代码那版，因为待会要进源代码里修改……

其实js代码和echart官网demo的代码完全没区别……

普通的力图设置，只要加上focusNodeAdjacency : true即可。

调用接口返回的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的源码里改了。

在echarts.js里搜一下focusNodeAdjacency很快就能找到以下内容，然后只要添加下面有注释的三行代码，就能实现本文显示节点和关系名称的效果了。

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