开发语言:PHP
需求:人物关系图
插件echarts
说明:实现功能 复杂功能请自行根据业务逻辑
echarts链接地址如下:http://echarts.baidu.com/echarts2/doc/example/force.html
粗略截图:
html 代码
首先引入echarts js文件
(路径替换成自己的)
建立关系书树的HTML容器
(注意ID是main)
接下来写script脚本
对应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);
}
简单效果图