php echarts 族谱关系树

最新推荐文章于 2020-12-20 19:15:35 发布
最新推荐文章于 2020-12-20 19:15:35 发布
阅读量1.4k 收藏 2
点赞数 1
文章标签： javascript php 后端 ViewUI
原文链接：https://my.oschina.net/u/3255899/blog/847125
版权

155014_kOm6_3255899.png

原始echarts 例子

http://echarts.baidu.com/echarts2/doc/example/tree1.html

155127_6Omm_3255899.png

原始图对应echarts 配置

option = {
    title : {
        text: '手机品牌',
        subtext: '线、节点样式'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b}: {c}"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,

    series : [
        {
            name:'树图',
            type:'tree',
            orient: 'horizontal',  // vertical horizontal
            rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 20,
            symbol: 'circle',
            symbolSize: 40,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            color: '#cc9999',
                            fontSize: 15,
                            fontWeight:  'bolder'
                        }
                    },
                    lineStyle: {
                        color: '#000',
                        width: 1,
                        type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            data: [
                {
                    name: '手机',
                    value: 6,
                    symbolSize: [90, 70],
                    symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            }
                        }
                    },
                    children: [
                        {
                            name: '小米',
                            value: 4,
                            symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                            symbolSize: [60, 60],
                            children: [
                                {
                                    name: '小米1',
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    value: 4,
                                    itemStyle: {
                                        normal: {
                                            color: '#fa6900',
                                            label: {
                                                show: true,
                                                position: 'right'
                                            },
                                            
                                        },
                                        emphasis: {
                                            label: {
                                                show: false
                                            },
                                            borderWidth: 0
                                        }
                                    }
                                },
                                {
                                    name: '小米2',
                                    value: 4,
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'right',
                                                formatter: "{b}"
                                            },
                                            color: '#fa6900',
                                            borderWidth: 2,
                                            borderColor: '#cc66ff'

                                        },
                                        emphasis: {
                                            borderWidth: 0
                                        }
                                    }
                                },
                                {
                                    name: '小米3',
                                    value: 2,
                                    symbol: 'circle',
                                    symbolSize: 20,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                position: 'right'
                                            },
                                            color: '#fa6900',
                                            brushType: 'stroke',
                                            borderWidth: 1,
                                            borderColor: '#999966',
                                        },
                                        emphasis: {
                                            borderWidth: 0
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name: '苹果',
                            symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',
                            symbolSize: [60, 60],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                    
                                }
                            },
                            value: 4
                        },
                        {
                            name: '华为',
                            symbol: 'image://http://market.huawei.com/hwgg/logo_cn/download/logo.jpg',
                            symbolSize: [60, 60],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                    
                                }
                            },
                            value: 2
                        },
                        {
                            name: '联想',
                            symbol: 'image://http://www.lenovo.com.cn/HomeUpload/Home001/6d94ee9a20140714.jpg',
                            symbolSize: [100, 40],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                    
                                }
                            },
                            value: 2
                        }
                    ]
                }
            ]
        }
    ]
};

重点数据是加背景那几个

实际html代码

<script src="http://echarts.baidu.com/build/dist/echarts.js">
    </script>

 

 <div class="home_tree">
            <div id="main" style="height:3860px;width:3960px"></div>
        </div>

 

<script> 

/*关系树*/ 
   /*关系树*/ 
      // 路径配置
    require.config({
      paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
      }
    });

// 使用
require(
    [
      'echarts',
      'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
      'echarts/chart/force',
      'echarts/chart/tree'
    ],
    function (ec) {
      // 基于准备好的dom，初始化echarts图表
      var myChart = ec.init(document.getElementById('main'));
     //图表显示提示信息
 
        myChart.showLoading({ 
        text: "站点关系图正在努力加载..."
        });
        myChart.hideLoading();
      var option = {
    title : {
        text: '关系族谱',
        subtext: '线、节点样式'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b}: {c}"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,

    series : []
};
      var ecConfig = require('echarts/config');
      
       $.ajax({    
                   url: "/html_css/ajax/index/display_data",   
                               
                    type:'POST',
                   // data:"{}",
                    dataType:'json',                
                    success: function(result){
                    //alert(data); 
                    //option.series[0].data = data.data; 
                    //option.series[0].data.children.data= data.data; 
                    //alert(data.data); 
                     
                    //myChart.setOption(option);                    
                     myChart.setOption({ 
                                        series: [
                                                    {
                                                        name:'树图',
            type:'tree',
            orient: 'horizontal',  // vertical horizontal
            rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 20,
            symbol: 'circle',
            symbolSize: 40,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            color: '#cc9999',
                            fontSize: 15,
                            fontWeight:  'bolder'
                        }
                    },
                    lineStyle: {
                        color: '#000',
                        width: 1,
                        type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            data:[
                                                            {
                                                                name: "{$account_data_['account_name']}",
                                                                value: 6,
                                                                 
                                                                symbol: "image://{$account_data_['account_photo']}",
                                                                 
                                                                children: result.data
                                                            }
                                                        ]
                                                    }
                                        ]
                        });
                  },            
 
                  error: function(){
 
                  }
                  
        });  
                //$("#formImg").submit();
                // 异步加载数据 
    });
</script>

 

 

对应数据  ajax 交互后台

 

先是数据库

CREATE TABLE IF NOT EXISTS `his_zupu_data` (

`symbol` varchar(220) NOT NULL DEFAULT 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
  `id` smallint(12) NOT NULL AUTO_INCREMENT,
  `user_id` smallint(12) DEFAULT NULL COMMENT '用户ID',
  `pid` smallint(12) NOT NULL DEFAULT '1' COMMENT '对应上级人物id',
  `pname` varchar(22) NOT NULL DEFAULT '上级关系姓名' COMMENT '对应上级关系人物的姓名',
  `rela_id` smallint(12) DEFAULT '0' COMMENT '对应关系 0=》家人 1=》朋友 2=》同事 3=》其他',
  `rela_rela` varchar(12) NOT NULL DEFAULT '家人' COMMENT '对应人物关系',
  `name` varchar(12) NOT NULL,
  `value` varchar(12) NOT NULL DEFAULT '2',
  `path` varchar(220) NOT NULL DEFAULT '0' COMMENT '对应关系path',
  `photo_` varchar(80) NOT NULL DEFAULT '/html_css/Public/img/example.png',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;

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

INSERT INTO `his_zupu_data` (`symbol`, `id`, `user_id`, `pid`, `pname`, `rela_id`, `rela_rela`, `name`, `value`, `path`, `photo_`) VALUES
('image://http://www.010beijing.com/html_css/Public/img/example.png', 1, 1, 0, '上级关系姓名', 0, '家人', '张三山(FRIEND)', '2', '0', '/html_css/Public/img/example.png'),
('image://http://www.010beijing.com/html_css/Public/img/example.png', 6, 2, 1, '上级关系姓名', 3, '其他', '张四山(FRIEND)', '2', '0-1', '/html_css/Public/img/example.png'),
('image://http://www.010beijing.com/html_css/Public/img/example.png', 7, 1, 1, '上级关系姓名', 1, '朋友', '李三山(FAMILY)', '2', '0-1', '/html_css/Public/img/example.png'),
('image://http://www.010beijing.com/html_css/Public/img/example.png', 8, 3, 6, '上级关系姓名', 0, '家人', '李四山(FAMILY)', '2', '0-1-6', '/html_css/Public/img/example.png'),
('image://http://www.010beijing.com/html_css/Public/img/example.png', 9, 1, 7, '上级关系姓名', 0, '家人', '王老五(COO-W)', '2', '0-1-7', '/html_css/Public/img/example.png'),
('image://http://www.010beijing.com/html_css/Public/img/example.png', 10, 3, 8, '上级关系姓名', 0, '家人', '王老六(COO-W)', '2', '0-1-6-8', '/html_css/Public/img/example.png'),
('image://http://www.010beijing.com/html_css/Public/img/example.png', 11, 1, 9, '上级关系姓名', 2, '同事', 'tom(OTHER)', '2', '0-1-6', '/html_css/Public/img/example.png'),
('image://http://www.010beijing.com/html_css/Public/img/example.png', 12, 3, 10, '上级关系姓名', 2, '同事', 'tom2(OTHER)', '2', '0-1-7', '/html_css/Public/img/example.png');

数据库说明---

其实就是递归取到上一级的关系者，只是需要加一个中间层，告诉是朋友家人同事等关系里的哪一种；

两种思路实现---一个是大家用的加pid；只是处理起来需要两次循环；

还有一种是在数据库加上path---->   查的时候直接like path就可以了；

id name pid path 1 电脑 0 0 2 手机 0 0 3 笔记本 1 0-1 4 超级本 3 0-1-3 5 游戏本 3 0-1-3

 

 

path字段记录了从根分类到上一级父类的路径，用id+'-'表示。

这种方式，假设我们要查询电脑下的所有后代分类，只需要一条sql语句：

 

select id,name,path from category where path like (select concat(path,'-',id,'%') as path from category where id=1);

+----+-----------+-------+ | id | name | path | +----+-----------+-------+ | 3 | 笔记本 | 0-1 | | 4 | 超级本 | 0-1-3 | | 5 | 游戏本 | 0-1-3 | +----+-----------+-------+

（这是csdn还是哪的大神给的两种无限分类，地址忘了，有需要可以百度“”“两种方式实现PHP+Mysql无限分类”）

ajax需要的数据形式

 

{"data":[{"id":"1","pid":"0","name":"\u5f20\u4e09\u5c71(FRIEND)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"0","children":[{"name":"\u5bb6\u4eba","symbol":"circle"},{"name":"\u670b\u53cb","symbol":"circle","children":[{"id":"7","pid":"1","name":"\u674e\u4e09\u5c71(FAMILY)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"1","children":[{"name":"\u5bb6\u4eba","symbol":"circle","children":[{"id":"9","pid":"7","name":"\u738b\u8001\u4e94(COO-W)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"0","children":[{"name":"\u5bb6\u4eba","symbol":"circle"},{"name":"\u670b\u53cb","symbol":"circle"},{"name":"\u540c\u4e8b","symbol":"circle","children":[{"id":"11","pid":"9","name":"tom(OTHER)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"2","children":[{"name":"\u5bb6\u4eba","symbol":"circle"},{"name":"\u670b\u53cb","symbol":"circle"},{"name":"\u540c\u4e8b","symbol":"circle"},{"name":"\u5176\u4ed6","symbol":"circle"}]}]},{"name":"\u5176\u4ed6","symbol":"circle"}]}]},{"name":"\u670b\u53cb","symbol":"circle"},{"name":"\u540c\u4e8b","symbol":"circle"},{"name":"\u5176\u4ed6","symbol":"circle"}]}]},{"name":"\u540c\u4e8b","symbol":"circle"},{"name":"\u5176\u4ed6","symbol":"circle","children":[{"id":"6","pid":"1","name":"\u5f20\u56db\u5c71(FRIEND)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"3","children":[{"name":"\u5bb6\u4eba","symbol":"circle","children":[{"id":"8","pid":"6","name":"\u674e\u56db\u5c71(FAMILY)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"0","children":[{"name":"\u5bb6\u4eba","symbol":"circle","children":[{"id":"10","pid":"8","name":"\u738b\u8001\u516d(COO-W)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"0","children":[{"name":"\u5bb6\u4eba","symbol":"circle"},{"name":"\u670b\u53cb","symbol":"circle"},{"name":"\u540c\u4e8b","symbol":"circle","children":[{"id":"12","pid":"10","name":"tom2(OTHER)","value":"2","symbol":"image:\/\/http:\/\/www.010beijing.com\/html_css\/Public\/img\/example.png","rela_id":"2","children":[{"name":"\u5bb6\u4eba","symbol":"circle"},{"name":"\u670b\u53cb","symbol":"circle"},{"name":"\u540c\u4e8b","symbol":"circle"},{"name":"\u5176\u4ed6","symbol":"circle"}]}]},{"name":"\u5176\u4ed6","symbol":"circle"}]}]},{"name":"\u670b\u53cb","symbol":"circle"},{"name":"\u540c\u4e8b","symbol":"circle"},{"name":"\u5176\u4ed6","symbol":"circle"}]}]},{"name":"\u670b\u53cb","symbol":"circle"},{"name":"\u540c\u4e8b","symbol":"circle"},{"name":"\u5176\u4ed6","symbol":"circle"}]}]}]}]}

对应数组形式

array(1) {
  ["data"] => array(1) {
    [0] => array(7) {
      ["id"] => string(1) "1"
      ["pid"] => string(1) "0"
      ["name"] => string(17) "张三山(FRIEND)"
      ["value"] => string(1) "2"
      ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
      ["rela_id"] => string(1) "0"
      ["children"] => array(4) {
        [0] => array(2) {
          ["name"] => string(6) "家人"
          ["symbol"] => string(6) "circle"
        }
        [1] => array(3) {
          ["name"] => string(6) "朋友"
          ["symbol"] => string(6) "circle"
          ["children"] => array(1) {
            [0] => &array(7) {
              ["id"] => string(1) "7"
              ["pid"] => string(1) "1"
              ["name"] => string(17) "李三山(FAMILY)"
              ["value"] => string(1) "2"
              ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
              ["rela_id"] => string(1) "1"
              ["children"] => array(4) {
                [0] => array(3) {
                  ["name"] => string(6) "家人"
                  ["symbol"] => string(6) "circle"
                  ["children"] => array(1) {
                    [0] => &array(7) {
                      ["id"] => string(1) "9"
                      ["pid"] => string(1) "7"
                      ["name"] => string(16) "王老五(COO-W)"
                      ["value"] => string(1) "2"
                      ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
                      ["rela_id"] => string(1) "0"
                      ["children"] => array(4) {
                        [0] => array(2) {
                          ["name"] => string(6) "家人"
                          ["symbol"] => string(6) "circle"
                        }
                        [1] => array(2) {
                          ["name"] => string(6) "朋友"
                          ["symbol"] => string(6) "circle"
                        }
                        [2] => array(3) {
                          ["name"] => string(6) "同事"
                          ["symbol"] => string(6) "circle"
                          ["children"] => array(1) {
                            [0] => &array(7) {
                              ["id"] => string(2) "11"
                              ["pid"] => string(1) "9"
                              ["name"] => string(10) "tom(OTHER)"
                              ["value"] => string(1) "2"
                              ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
                              ["rela_id"] => string(1) "2"
                              ["children"] => array(4) {
                                [0] => array(2) {
                                  ["name"] => string(6) "家人"
                                  ["symbol"] => string(6) "circle"
                                }
                                [1] => array(2) {
                                  ["name"] => string(6) "朋友"
                                  ["symbol"] => string(6) "circle"
                                }
                                [2] => array(2) {
                                  ["name"] => string(6) "同事"
                                  ["symbol"] => string(6) "circle"
                                }
                                [3] => array(2) {
                                  ["name"] => string(6) "其他"
                                  ["symbol"] => string(6) "circle"
                                }
                              }
                            }
                          }
                        }
                        [3] => array(2) {
                          ["name"] => string(6) "其他"
                          ["symbol"] => string(6) "circle"
                        }
                      }
                    }
                  }
                }
                [1] => array(2) {
                  ["name"] => string(6) "朋友"
                  ["symbol"] => string(6) "circle"
                }
                [2] => array(2) {
                  ["name"] => string(6) "同事"
                  ["symbol"] => string(6) "circle"
                }
                [3] => array(2) {
                  ["name"] => string(6) "其他"
                  ["symbol"] => string(6) "circle"
                }
              }
            }
          }
        }
        [2] => array(2) {
          ["name"] => string(6) "同事"
          ["symbol"] => string(6) "circle"
        }
        [3] => array(3) {
          ["name"] => string(6) "其他"
          ["symbol"] => string(6) "circle"
          ["children"] => array(1) {
            [0] => &array(7) {
              ["id"] => string(1) "6"
              ["pid"] => string(1) "1"
              ["name"] => string(17) "张四山(FRIEND)"
              ["value"] => string(1) "2"
              ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
              ["rela_id"] => string(1) "3"
              ["children"] => array(4) {
                [0] => array(3) {
                  ["name"] => string(6) "家人"
                  ["symbol"] => string(6) "circle"
                  ["children"] => array(1) {
                    [0] => &array(7) {
                      ["id"] => string(1) "8"
                      ["pid"] => string(1) "6"
                      ["name"] => string(17) "李四山(FAMILY)"
                      ["value"] => string(1) "2"
                      ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
                      ["rela_id"] => string(1) "0"
                      ["children"] => array(4) {
                        [0] => array(3) {
                          ["name"] => string(6) "家人"
                          ["symbol"] => string(6) "circle"
                          ["children"] => array(1) {
                            [0] => &array(7) {
                              ["id"] => string(2) "10"
                              ["pid"] => string(1) "8"
                              ["name"] => string(16) "王老六(COO-W)"
                              ["value"] => string(1) "2"
                              ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
                              ["rela_id"] => string(1) "0"
                              ["children"] => array(4) {
                                [0] => array(2) {
                                  ["name"] => string(6) "家人"
                                  ["symbol"] => string(6) "circle"
                                }
                                [1] => array(2) {
                                  ["name"] => string(6) "朋友"
                                  ["symbol"] => string(6) "circle"
                                }
                                [2] => array(3) {
                                  ["name"] => string(6) "同事"
                                  ["symbol"] => string(6) "circle"
                                  ["children"] => array(1) {
                                    [0] => &array(7) {
                                      ["id"] => string(2) "12"
                                      ["pid"] => string(2) "10"
                                      ["name"] => string(11) "tom2(OTHER)"
                                      ["value"] => string(1) "2"
                                      ["symbol"] => string(65) "image://http://www.010beijing.com/html_css/Public/img/example.png"
                                      ["rela_id"] => string(1) "2"
                                      ["children"] => array(4) {
                                        [0] => array(2) {
                                          ["name"] => string(6) "家人"
                                          ["symbol"] => string(6) "circle"
                                        }
                                        [1] => array(2) {
                                          ["name"] => string(6) "朋友"
                                          ["symbol"] => string(6) "circle"
                                        }
                                        [2] => array(2) {
                                          ["name"] => string(6) "同事"
                                          ["symbol"] => string(6) "circle"
                                        }
                                        [3] => array(2) {
                                          ["name"] => string(6) "其他"
                                          ["symbol"] => string(6) "circle"
                                        }
                                      }
                                    }
                                  }
                                }
                                [3] => array(2) {
                                  ["name"] => string(6) "其他"
                                  ["symbol"] => string(6) "circle"
                                }
                              }
                            }
                          }
                        }
                        [1] => array(2) {
                          ["name"] => string(6) "朋友"
                          ["symbol"] => string(6) "circle"
                        }
                        [2] => array(2) {
                          ["name"] => string(6) "同事"
                          ["symbol"] => string(6) "circle"
                        }
                        [3] => array(2) {
                          ["name"] => string(6) "其他"
                          ["symbol"] => string(6) "circle"
                        }
                      }
                    }
                  }
                }
                [1] => array(2) {
                  ["name"] => string(6) "朋友"
                  ["symbol"] => string(6) "circle"
                }
                [2] => array(2) {
                  ["name"] => string(6) "同事"
                  ["symbol"] => string(6) "circle"
                }
                [3] => array(2) {
                  ["name"] => string(6) "其他"
                  ["symbol"] => string(6) "circle"
                }
              }
            }
          }
        }
      }
    }
  }
}

 

后台php处理

用的thinkPHP框架，版本，3.2

 

 public function display_data() {

   // 取到族谱所有数据

$data_all    = D('zupu_data')->field('id,pid,name,value,symbol,rela_id')->select();

}

$tree = array();
                                                //第一步，将分类id作为数组key,并创建children单元
                                                foreach($data_all as $category){
                                                    $tree[$category['id']] = $category;
                                                    $tree[$category['id']]['children'] = array(
                                                                                                0=>array('name'=>'家人','symbol'=>'circle'),
                                                                                                1=>array('name'=>'朋友','symbol'=>'circle'),
                                                                                                2=>array('name'=>'同事','symbol'=>'circle'),
                                                                                                3=>array('name'=>'其他','symbol'=>'circle'),
                                                                                                    
                                                        );
                                                } 
                                                
                                                //第二部，利用引用，将每个分类添加到父类children数组中，这样一次遍历即可形成树形结构。
                                                foreach ($tree as $k=>$item) {
                                                    if ($item['pid'] != 0) {
                                                        $tree[$item['pid']]['children'][$item['rela_id']]['children'][] = &$tree[$k];
                                                    }
                                                }

 

$new_new=array();
                                                $new_new['data'][]=$tree[1];
                                                //dump($new_new);
                                                echo json_encode($new_new);

 

 

 

 

转载于:https://my.oschina.net/u/3255899/blog/847125

chenshi1874
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么是m叉树_树、二叉树、二叉搜索树的实现和特性
weixin_39573598的博客
11-20 3590
❝点赞再看，养成习惯，微信搜一搜【一角钱小助手】关注更多原创技术文章。回复「文章」获取系列完整文章，本文 org_hejianhui/JavaStudy 已经收录，欢迎Star。❞前言本篇先回顾树、二叉树、二叉搜索树的实现和特性，《AVL 树和红黑树的实现和特性》可以阅读这篇。另外，树的面试题解法一般都是递归 为什么? 我们在后面总结。「一维结构」：数组、链表、跳表、栈、队列等，这些结构都是 「线...
php实现echarts任务关系图,react中使用echarts（人物关系图）
weixin_29108051的博客
03-18 204
项目中有时会用到echarts，可能不同的框架中语法稍有变通，前几天在react项目中遇到，写此篇以作记录。不同的charts语法跟支持不同，本篇"echarts": "^4.2.0-rc.2"前期准备cnpm i -S echartsimport echarts from 'echarts/lib/echarts'; //必须import "echarts/lib/chart/graph"...
使用echars制作家谱图
m0_47703222的博客
06-20 1789
使用echars制作家谱图 首次工作的第一周，项目大哥让我制作项目中的h5页面：接收后端数据渲染家谱图；各种百度发现并没有很好的解决办法，在掉头发的两天研究echars后终于解决，虽然没发完全还原ui图但也能正常使用，一下是我的解决办法： 1.首先需要引入echars，这个直接去官网学习即可 2.这个表中需要后端计算并返回每个家谱人物的x，y坐标，大概的实施方法是：在创建家谱人物时前端需要传递一个方位参数（left,right,top,bottom），表示创建的人物和本人的关系top，bottom方向为长辈
ECharts 实现人民的名义关系图谱 代码开源
dingding5205205200的博客
06-07 2118
1、什么是ECharts ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。 官网http://echarts.baidu.com/ 2、开始简单配置关系图 1、首先配置series的type为graph。 2、layout为force，layout可以选择none、circul...
家谱树(gentree)
weixin_30872499的博客
02-17 770
【题目描述】 有个人的家族很大，辈分关系很混乱，请你帮整理一下这种关系。 给出每个人的孩子的信息。 输入一个序列，使得每个人的后辈都比那个人后列出。 【输入】 第一行一个整数（1<=N<=100），表示家族的人数。 接下来N行，第I行表示第I个人的儿子。 每行最后是0表示描述完毕。 【输出】 输出一个序列，使得每个人的后辈都比那个人后列出。 如果有多解输出任意一解。...
node sqlite 插入数据_数据结构中关于树的一切（java版）
weixin_39585378的博客
11-20 101
当我还是一个年轻男孩的时候画的一张关于树的画。当你第一次学习编码时，大部分人都是将数组作为主要数据结构来学习。之后，你将会学习到哈希表。如果你是计算机专业的，你肯定需要选修一门数据结构的课程。上课时，你又会学习到链表，队列和栈等数据结构。这些都被统称为线性的数据结构，因为它们在逻辑上都有起点和终点。当你开始学习树和图的数据结构时，你会觉得它是如此的混乱。因为它的存储方式不是线性的，它们都...
CSS生成的族谱树结构
12-09
"CSS生成的族谱树结构"这个主题探讨的就是如何使用CSS技术来构建一个可视化的关系网络，如家谱，展示家庭成员之间的关系。 家谱树通常以图形的形式展示个人与其直系亲属的连接，包括父母、子女、配偶等。在网页上，...
纯CSS族谱树形结构
04-19
本文将深入探讨如何使用纯CSS来创建一个可无限扩展的族谱树形结构，适用于HTML5、PHP以及Web开发等多个领域，并提供关于如何进行二次开发以适应个人需求的指导。 首先，CSS（Cascading Style Sheets）是一种样式表...
jQuery树插件演示族谱Family tree和日程安排
09-15
在"jQuery树插件演示族谱Family tree"中，我们可以看到如何利用这些特性来呈现家庭成员间的亲缘关系。 二、构建族谱——Family Tree 1. 数据结构：首先，我们需要一个合适的数据结构来存储家族成员的信息，如姓名、...
带树状结构的源码（适合族谱树）
04-19
带树状结构的源码（适合族谱树），结构清晰明了，家族族谱、画结构图等等
家谱图（vue版本，参考readme）.rar
06-11
vue用d3插件绘制的家谱图，有两种图形，参考readme.txt，在vue 2.5.2上运行。其他插件版本参考package.json
家谱文化网 网站源码
02-03
家谱文化网 网站源码
MyFamily Tree 族谱编制
07-25
MyFamily Tree 族谱编制，树状结构族谱.......................................................................................................................
家谱族谱网站ASP源代码
02-18
家谱族谱网站源代码
ftree.js:使用 HTML 画布元素创建家谱的 javascript 库
05-29
ftree.js 一个使用HTML canvas元素创建家谱JavaScript库。
FamilyGem:族谱树的Android应用
05-18
与您的亲戚分享一棵树，让他们改善亲戚并收到更新。 然后，您可以选择是否接受它们。 支持的最低版本为Android 4.4 KitKat（API 19），最高为Android 11 R（API 30）。 目的是使数据结构尽可能地遵循GEDCOM标准的...
echarts做企业关系图谱_echarts实现group关系图案例
weixin_39622643的博客
12-20 673
自己在项目中实现了两个group图：1.先看实现效果，两个数据量不同，代码基本上相同2.实现代码2.1.后台代码的实现，主要实现节点和关系线的封装，注意：nodes.name不能重复，图形中显示的是nodes.value值group图的数据结构如下：{"nodes":[{"name":"1210089292475469826","value":"网状结果指标"}],"links":[{"dec":...
一致性hash算法原理及php实现
qw790707988的博客
10-14 251
在使用分布式存储时我们要考虑如何将数据均匀分布在多个节点库中？并且也要方便后期的数据查找。 hash取模 假设有N个存储节点，根据用户传入的key（key具有唯一性），index = hash(key) % N计算出将数据存储在哪一个节点上。 一致性hash 为什么不直接使用hash取模的方式，主要原因是：hash取模在容错性和扩展性上较差，如果新增一个节点，或者删除一个节点，那么所有的几点都要重新计算一遍。显然不符合实际实际生产环境。 什么是一致性hash？ 通过一致性hash算法可以把key的has
echarts绘制百家姓饼状图
yf19990720的博客
08-18 329
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 效果图 进去随机加载6个，每个姓的数值随机 点击右侧的图例，显示隐藏饼状图 代码分析 先设置一个容器 <style> div {
家庭族谱管理系统c语言树结构
最新发布
05-19
家庭族谱管理系统可以使用树结构来实现，以下是一个简单的C语言实现示例： ```c #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX_NAME_LEN 20 // 定义家庭成员结构体 typedef struct _family_member { char name[MAX_NAME_LEN]; struct _family_member *father; struct _family_member *mother; struct _family_member *spouse; struct _family_member *children; } FamilyMember; // 创建一个家庭成员 FamilyMember *createMember(char *name) { FamilyMember *member = (FamilyMember *)malloc(sizeof(FamilyMember)); strcpy(member->name, name); member->father = NULL; member->mother = NULL; member->spouse = NULL; member->children = NULL; return member; } // 添加父亲 void addFather(FamilyMember *member, FamilyMember *father) { member->father = father; } // 添加母亲 void addMother(FamilyMember *member, FamilyMember *mother) { member->mother = mother; } // 添加配偶 void addSpouse(FamilyMember *member, FamilyMember *spouse) { member->spouse = spouse; } // 添加子女 void addChild(FamilyMember *member, FamilyMember *child) { FamilyMember *children = member->children; if (children == NULL) { member->children = child; } else { while (children->children != NULL) { children = children->children; } children->children = child; } } // 打印家庭成员 void printMember(FamilyMember *member) { printf("name: %s\n", member->name); if (member->father != NULL) { printf("father: %s\n", member->father->name); } if (member->mother != NULL) { printf("mother: %s\n", member->mother->name); } if (member->spouse != NULL) { printf("spouse: %s\n", member->spouse->name); } if (member->children != NULL) { printf("children:\n"); FamilyMember *child = member->children; while (child != NULL) { printf("%s\n", child->name); child = child->children; } } } int main() { // 创建家庭成员 FamilyMember *grandfather = createMember("grandfather"); FamilyMember *grandmother = createMember("grandmother"); FamilyMember *father = createMember("father"); FamilyMember *mother = createMember("mother"); FamilyMember *son1 = createMember("son1"); FamilyMember *son2 = createMember("son2"); FamilyMember *daughter = createMember("daughter"); // 添加关系 addFather(father, grandfather); addMother(father, grandmother); addSpouse(father, mother); addChild(father, son1); addChild(father, son2); addChild(father, daughter); // 打印家庭成员 printf("grandfather:\n"); printMember(grandfather); printf("\n"); printf("grandmother:\n"); printMember(grandmother); printf("\n"); printf("father:\n"); printMember(father); printf("\n"); printf("mother:\n"); printMember(mother); printf("\n"); printf("son1:\n"); printMember(son1); printf("\n"); printf("son2:\n"); printMember(son2); printf("\n"); printf("daughter:\n"); printMember(daughter); printf("\n"); return 0; } ``` 在上面的示例中，我们定义了一个家庭成员结构体，包含了成员的姓名、父亲、母亲、配偶和子女等信息。我们可以使用 `createMember` 函数来创建一个新的成员，然后使用 `addFather`、`addMother`、`addSpouse` 和 `addChild` 函数来添加成员之间的关系。最后，我们可以使用 `printMember` 函数来打印成员的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值