JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了echarts鼠标覆盖高亮显示节点及关系名称详解大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

本文在echart自带的

属性上进行修改。

1、效果

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

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

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

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

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

2、代码

html部分就这样。

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

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

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

调用接口返回的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很快就能找到以下内容,然后只要添加下面有注释的三行代码,就能实现本文显示节点和关系名称的效果了。

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

大佬总结

以上是大佬教程为你收集整理的echarts鼠标覆盖高亮显示节点及关系名称详解全部内容,希望文章能够帮你解决echarts鼠标覆盖高亮显示节点及关系名称详解所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: