<! DOCTYPE html > < html> < head> < metacharset = " UTF-8" > < title> </ title> < scripttype = " text/javascript" src = " http://code.jquery.com/jquery-3.5.1.min.js" > </ script> < scriptsrc = " https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" > </ script> < scriptsrc = " https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js" > </ script> < style>
#box {
display : none;
background-color : lightgoldenrodyellow;
width : 200px;
height : 260px;
position : absolute;
right : 10px;
top : 150px;
}
#box-type {
display : block;
}
#box-name {
display : block;
}
table {
width : 200px;
margin : auto;
border : black 1px solid;
border-spacing : 0px;
border-collapse : collapse;
}
th {
border : black 1px solid;
}
td {
border : black 1px solid;
}
</ style> </ head> < body> < div> < labelfor = " send_content" > </ label> < inputid = " send1" type = " button" value = " 人物" > < inputid = " send2" type = " button" value = " 武器" > < inputid = " send3" type = " button" value = " 坐骑" > </ div> < div> < labelfor = " send_content" > </ label> < inputid = " send1_r" type = " button" value = " 属于关系" > < inputid = " send2_r" type = " button" value = " 兄弟关系" > < inputid = " send3_r" type = " button" value = " 君臣关系" > </ div> < div> < labelfor = " send_content" > </ label> < inputid = " send5" type = " button" value = " 人物及其武器" > </ div> < divid = " box" draggable = " true" > < tableboxtable > < tr> < tdstyle = " width : 80px; top : 30px" > </ td> < tdtyle = " top: 30px" > < spanid = " box-type" draggable = " true" > </ span> </ td> </ tr> < tr> < td> </ td> < td> </ td> </ tr> < tr> < tdstyle = " width : 80px; top : 0px" > </ td> < tdstyle = " top : 5px" > < spanid = " box-name" draggable = " true" > </ span> </ td> </ tr> </ table> </ div> < divid = " main" style = " width : 1800px; height : 900px" > </ div> < scripttype = " text/javascript" >
var myChart = echarts. init ( document. getElementById ( 'main' ) ) ;
var categories = [ { name : '人物' } , { name : '兵器' } , { name : '坐骑' } , { name : '属于关系' } , { name : '君臣关系' } , { name : '兄弟关系' } ] ;
option = {
title : {
text : 'ECharts 关系图'
} ,
tooltip : {
formatter : function ( x ) {
return x. data. des;
}
} ,
toolbox : {
show : true ,
feature : {
mark : {
show : true
} ,
restore : {
show : true
} ,
saveAsImage : {
show : true
}
}
} ,
legend : [
{
left : 'center' ,
data : categories. slice ( 0 , 3 ) . map ( function ( a ) {
return a. name;
}
) ,
} ,
{
top : 'center' ,
left : 20 ,
orient : 'vertical' ,
icon : 'diamond' ,
data : categories. slice ( 3 , ) . map ( function ( a ) {
return a. name;
} )
}
] ,
series : [ {
type : 'graph' ,
layout : 'force' ,
symbolSize : 60 ,
roam : true ,
edgeSymbol : [ 'circle' , 'arrow' ] ,
edgeSymbolSize : [ 2 , 10 ] ,
edgeLabel : {
normal : {
textStyle : {
fontSize : 15
}
}
} ,
force : {
repulsion : 2500 ,
edgeLength : [ 10 , 50 ]
} ,
draggable : true ,
lineStyle : {
normal : {
width : 2 ,
color : '#4b565b' ,
}
} ,
edgeLabel : {
normal : {
show : true ,
formatter : function ( x ) {
return x. data. name;
}
}
} ,
label : {
normal : {
show : true ,
formatter : function ( param ) {
console. log ( "text" , param)
let text = param. data. name;
if ( text. length < 18 ) {
if ( text. length <= 6 ) {
return text;
} else if ( text. length > 6 && text. length <= 12 ) {
return text = ` ${ text. slice ( 0 , 6 ) } \n ${ text. slice ( 6 ) } ` } else if ( text. length > 12 && text. length <= 18 ) {
return text = ` ${ text. slice ( 0 , 6 ) } \n ${ text. slice ( 6 , 12 ) } \n ${ text. slice ( 12 , 18 ) } \n ${ text. slice ( 18 ) } ` }
} else {
return ` ${ text. slice ( 0 , 6 ) } \n ${ text. slice ( 6 , 12 ) } \n ${ text. slice ( 12 , 18 ) } ` + '...' + '\n'
}
} ,
textStyle : { }
}
} ,
data : [
{ des : '赤兔马，一日千里 三国时期最著名的坐骑' ,
name : '赤兔马' ,
symbolSize : 50 ,
'category' : 2 } ,
{ des : '青龙偃月刀，关羽武器' ,
name : '青龙偃月刀' ,
symbolSize : 50 ,
'category' : 1 } ,
{ des : '五虎上将之首' ,
name : '关羽' ,
symbolSize : 50 ,
'category' : 0 } ,
{ des : '蜀国老大' ,
name : '刘备' ,
symbolSize : 50 ,
'category' : 0 } ,
{ des : '一身是胆，武艺绝伦' ,
name : '赵云' ,
'category' : 0 ,
symbolSize : 50 } ] ,
links : [ { source : '赤兔马' ,
target : '关羽' ,
des : '属于坐骑' ,
'category' : 3 ,
name : '属于关系' } ,
{ source : '青龙偃月刀' ,
target : '关羽' ,
des : '属于武器' ,
'category' : 3 ,
name : '属于关系' } ,
{ source : '关羽' ,
target : '刘备' ,
des : '的义兄' ,
'category' : 5 ,
name : '兄弟关系' } ,
{ source : '赵云' ,
target : '刘备' ,
des : '的主公' ,
'category' : 4 ,
name : '君臣关系' } ] ,
categories : categories,
} ]
} ;
myChart. setOption ( option) ;
myChart. on ( 'click' , function ( param ) {
console. log ( 'param---->' , param) ;
var arrayIndex = param. dataIndex;
console. log ( 'arrayIndex---->' , arrayIndex) ;
console. log ( 'name---->' , param. name) ;
console. log ( 'data---->' , categories[ param. data. category] [ 'name' ] ) ;
if ( param. dataType == 'node' ) {
var nodename = param. name;
$ ( '#box' ) . attr ( "style" , "display:block;" ) ;
$ ( "#box-type" ) . html ( categories[ param. data. category] [ 'name' ] ) ;
$ ( "#box-name" ) . html ( param. data. name) ;
} else {
alert ( "点击了边" + param. name)
}
} ) ;
</ script> </ body> </ html>
