echart的关系图高亮_echarts鼠标覆盖高亮显示节点关系数实现步骤 - echart

本文主要介绍了jQuery插件echarts实现的去掉X轴、Y轴和网格线效果,结合实例形式分析了echarts插件绘制表格图及图形相关属性设置操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下，希望能帮助到大家。本文...

这次给大家带来echarts鼠标覆盖高亮显示节点关系数实现步骤，echarts鼠标覆盖高亮显示节点关系数实现的注意事项有哪些，下面就是实战案例，一起来看一下。

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

1、效果

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

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

2、代码

html部分就这样。

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 :