PHP+echarts 简单人物关系图

开发语言:PHP

需求:人物关系图

插件echarts

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

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

粗略截图:

html 代码

首先引入echarts js文件

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript" src="\_\_JS\_\_/jquery-2.1.3.min.js"></script>

(路径替换成自己的)

建立关系书树的HTML容器

(注意ID是main)

<div class="relationTree" id="main" style="height:400px"> 

接下来写script脚本

<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对象动态加载数据              <!-- myChart.setOption(option); -->                   $.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');                 }                 });        });  </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);
              
              
              
   }

简单效果图

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )