echarts 关系图 参数_Echarts关系图（使用重力图）

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

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

使用的是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可以动态显示以及隐藏