首先展示一下该关系图效果
很简单的关系图，不过其中经历不少波折。
使用的是echarts2。
现在贴出代码：
1 function dos(){ 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=new Array(); 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 :ObjLink 99 } 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可以动态显示以及隐藏
首先选择了Echarts作为工具制作这个图表。这个工具官网贴出来：http://echarts.baidu.com/demo.html#line-marker