php链接echarts教程,PHP+echarts 简单人物关系图

开发语言：PHP

需求：人物关系图

插件echarts

说明：实现功能  复杂功能请自行根据业务逻辑

echarts链接地址如下：http://echarts.baidu.com/echarts2/doc/example/force.html

粗略截图：

html 代码

首先引入echarts js文件

(路径替换成自己的)

建立关系书树的HTML容器

(注意ID是main)

接下来写script脚本

/*关系树*/

// 路径配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

'echarts/chart/force'

],

//开始画图了

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'));

//图表显示提示信息

myChart.showLoading({

text: "站点关系图正在努力加载..."

});

myChart.hideLoading();

var option = {

title : {

text: '人物关系：山炮',

subtext: '数据来自人立方',

x:'right',

y:'bottom'

},

tooltip : {

trigger: 'item',

formatter: '{a} : {b}'

},

toolbox: {

show : true,

feature : {

restore : {show: true},

magicType: {show: true, type: ['force', 'chord']},

saveAsImage : {show: true}

}

},

legend: {

x: 'left',

data:[]

},

series : [

{

type:'force',

name : "人物关系",

ribbonType: false,

categories : [

{

name: '人物'

},

{

name: '家人',

symbol: 'diamond'

},

{

name:'朋友'

}

],

itemStyle: {

normal: {

label: {

show: true,

textStyle: {

color: '#333'

}

},

nodeStyle : {

brushType : 'both',

borderColor : 'rgba(255,215,0,0.4)',

borderWidth : 1

}

},

emphasis: {

label: {

show: true

// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE

},

nodeStyle : {

//r: 30

},

linkStyle : {}

}

},

minRadius : 15,

maxRadius : 25,

gravity: 1.1,

scaling: 1.2,

draggable: false,

linkSymbol: 'arrow',

steps: 10,

coolDown: 0.9,

//preventOverlap: true,

//人物关系的数据源  nodes 也就是图片中显示的个人人物(实际数据是从后台加载)

nodes:[

],

//人物关系的数据源  links  也就是连接各个人物之间的那些线条

links : [

],

draggable:true,

edgeLabel: {

normal: {

textStyle: {

fontSize: 20

}

}

},

}

]

};

var ecConfig = require('echarts/config');

//这一段是获取焦点时的操作 不写也可以画出来

/*function focus(param) {

var data = param.data;

var links = option.series[0].links;

var nodes = option.series[0].nodes;

if (

data.source != null

&& data.target != null

) { //点击的是边

var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];

var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];

console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');

} else { // 点击的是点

console.log("选中了" + data.name + '(' + data.value + ')');

}

}*/

/*myChart.on(ecConfig.EVENT.CLICK, focus)

myChart.on(ecConfig.EVENT.FORCE_LAYOUT_END, function () {

console.log(myChart.chart.force.getPosition());

});*/

// 为echarts对象动态加载数据

$.ajax({

//后台数据地址

url: "{:U('User/echartsDisplay')}",

type:'POST',

data:"{}",

dataType:'json',

success: function(data){

//成功时把数据赋给echarts

option.series[0].nodes=data.nodes;

option.series[0].links=data.links;

myChart.setOption(option);

},

error: function(){

alert('test');

}

});

});

对应PHP后台代码

对应数据库(注意我有数据库表前缀)

人物关系连接线对应的数据

CREATE TABLE IF NOT EXISTS `his_links` (

`id` smallint(12) NOT NULL,

`source` varchar(20) NOT NULL,

`target` varchar(20) NOT NULL,

`weight` smallint(11) NOT NULL,

`name` varchar(20) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--

-- 转存表中的数据 `his_links`

--

INSERT INTO `his_links` (`id`, `source`, `target`, `weight`, `name`) VALUES

(1, 'test', 'test1', 1, 'family'),

(2, 'test1', 'test', 2, 'family'),

(3, 'test2', 'test', 3, 'cooworker'),

(4, 'test3', 'test', 5, 'other'),

(0, 'test2', 'test1', 3, 'other2'),

(0, 'test4', 'test2', 5, 'other3');

人物关系 中各个人物对应的数据

CREATE TABLE IF NOT EXISTS `his_nodes` (

`id` smallint(12) NOT NULL,

`category` smallint(12) NOT NULL,

`name` varchar(20) NOT NULL,

`value` smallint(12) NOT NULL,

`user_id` smallint(12) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--

-- 转存表中的数据 `his_nodes`

--

INSERT INTO `his_nodes` (`id`, `category`, `name`, `value`, `user_id`) VALUES

(1, 0, 'test', 10, 1),

(2, 1, 'test1', 2, 1),

(3, 1, 'test2', 3, 1),

(4, 2, 'test4', 5, 1),

(5, 3, 'test5', 3, 1);

PHP代码

public function echartsDisplay(){

$arr=array();

/*说明：此处用的thinkPHP框架

简单查询nodes表所有的数据记录--存放到$arr['nodes']

简单查询nodes表所有的数据记录--存放到$arr['links']

D('nodes')->select();返回的是nodes数据表中所有记录()

*/

$arr['nodes']=D('nodes')->select();

$arr['links']=D('links')->select();

echo  json_encode($arr);

}

简单效果图