Echarts关系图（使用重力图）

首先展示一下该关系图效果

很简单的关系图，不过其中经历不少波折。

使用的是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