首先展示一下该关系图效果
很简单的关系图，不过其中经历不少波折。
使用的是echarts2。
现在贴出代码：
1 functiondos(){2 var name=document.getElementById("name").value;3 $.post("GetChartData",{name:name},function(data){4 //路径配置
5 require.config({6 paths: {7 echarts: 'http://echarts.baidu.com/build/dist'
8 }9 });10 require(11 [12 'echarts',13 'echarts/chart/force' //使用重力图加载模块，按需加载
14 ],15 function(ec) {16 var strArray=newArray();17 strArray=data.split("***");18 var node=strArray[0];19 var link=strArray[1];20 var ObjNode=eval("("+node+")");21 var ObjLink=eval("("+link+")");22 //基于准备好的dom，初始化echarts图表
23 var myChart = ec.init(document.getElementById('main'));24 var option ={25 title : {26 text: '关联关系图',27 x:'right',28 y:'bottom'
29 },30 tooltip : {31 show:true,32 trigger: 'item',33 formatter: '{a} : {b}'
34 },35 toolbox: {36 show : true,37 feature : {38 restore : {show: true},39 magicType: {show: true, type: ['force', 'chord']},40 saveAsImage : {show: true}41 }42 },43 legend: {44 x: 'left',45 data:[46 {name:'企业',icon:'rect'},47 {name:'个人'}48 ]49 },50 series : [51 {52 type:'force',53 name : "关系",54 ribbonType: false,55 categories : [56 {57 name: '企业'
58 },59 {60 name:'个人'
61 }62 ],63 itemStyle: {64 normal: {65 label: {66 show: true,67 textStyle: {68 color: '#333'
69 }70 },71 nodeStyle : {72 brushType : 'both',73 borderColor : 'rgba(255,215,0,0.4)',74 borderWidth : 1
75 }76 },77 emphasis: {78 label: {79 show: false
80 },81 nodeStyle : {82 //r: 30
83 },84 linkStyle : {}85 }86 },87 symbolSize: 15,88 minRadius : 15,89 maxRadius : 25,90 gravity: 1.1,91 scaling: 1.2,92 draggable: true,93 linkSymbol: 'arrow',94 steps: 10,95 coolDown: 0.9,96 //preventOverlap: true,
97 nodes:ObjNode,98 links :ObjLink99 }100 ]101 };102
103 //为echarts对象加载数据
104 myChart.setOption(option);105 }106 );107
108 }, "Json");109 }
上面这个dos()方法是我通过点击按钮生成图表不必在意。
之后使用post请求从后台调用图表所用数据，是一个json串这个可以根据
实际需求删掉更改。
还有就是你需要自己写一个固定长宽的div并附上id。
从图中可以看出当我鼠标放在节点上时，左侧相应的出现该节点信息(注意不是点击)
这个操作就是节点的hover事件，获取节点值传到后台获取数据后显示在页面上。
配置如下：
var ecConfig=require('echarts/config');//在上面代码22行加入
myChart.on(ecConfig.EVENT.HOVER,***);//***代表方法名，自定
同时53和54行加入：mouseable:true,
这样你就可以在请求后台信息返回前台了。
注意：该方法必须写在echarts的方法中，即最上面代码的108行后面，例如***方法名为example,
则在108行后写获取该节点名称的方法：
function example(param){//注意param是echarts的图表对象
var name=param.name;
}
还有就是节点的点击事件了，
myChart.on(ecConfig.EVENT.CLICK,***);//***代表方法名，自定,在上面代码22行加入
同时53和54行加入：clickable:true,
其中图例以及节点都可以使用图片作为节点样式。
还有就是lengend可以动态显示以及隐藏
