echart的关系图高亮_echarts鼠标覆盖高亮显示节点及关系名称详解

本文在echart自带的

1、效果

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

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

2、代码

html部分就这样。

js代码，使用了jquery和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

}<