之前项目需要我搞一个组织架构图，用大约一周时间挑选了框架并开发，最后用orgchart搞出来了，先上结果图
orgchart下载地址 ：https://github.com/dabeng/OrgChart
打开下载的压缩包，如下图
然后可以打开demo目录，里面是例子，我们可以根据例子来修改成我们自己的样式，先来看一下他的基本样式
打开之后我们就可以根据他的例子来进行修改，我的组织结构图的主要代码如下：
<%--Created by IntelliJ IDEA.User: mzDate: 2018/10/18Time: 10:45To change this template use File | Settings | File Templates.
--%><%--------之前有些无关紧要的部分略过----------%><%--3-1，股权结构图的结构图部分--%><div id="chart-container"></div><%--3-2，结构图的脚本部分--%><script type="text/javascript">$(function () {var datascource = {'name': '德玛西亚','rate': '','childnum': '','className': 'motherC','children': [{'name': '子公司', 'childnum': '子公司数：2家', 'rate': '', 'className': 'childC','children': [{'name': '<br>德<br>吗<br>西<br>亚','childnum': '2家','rate': '100%','className': 'leafC','children': [{'name': '<br>德<br>吗<br>西<br>亚','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>德<br>吗<br>西<br>亚', 'childnum': '0家', 'rate': '100%', 'className': 'leafC'}]},{'name': '<br>德<br>吗<br>西<br>亚','childnum': '2家','rate': '100%','className': 'leafC','children': [{'name': '<br>德<br>吗<br>西<br>亚','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>德<br>吗<br>西<br>亚', 'childnum': '0家', 'rate': '100%', 'className': 'leafC'}]}]},{'name': '分公司', 'childnum': '分公司数：0家', 'rate': '', 'className': 'branchC'},{'name': '控股公司', 'childnum': '控股公司数：3家', 'rate': '', 'className': 'joinC','children': [{'name': '<br>李<br>润<br>石<br>风<br>投<br>1','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>李<br>润<br>石<br>风<br>投<br>2','childnum': '0家','rate': '100%','className': 'leafC'},{'name': '<br>李<br>润<br>石<br>风<br>投<br>3','childnum': '0家','rate': '100%','className': 'leafC'}]}]};var nodeTemplate = function (data) {var str = '';str += '<div class="name" style="color: white">'+data.name+'</div>';str += '<div class="rate" style="color: white">'+data.rate+'</div>';str += '<div class="childnum" style="color: white">'+data.childnum+'</div>';return str;<%--return '--%><%--<div class="name" >${data.name}</div> <div class="childnum">${data.childnum}</div><div class="rate">${data.rate}</div>--%><%--';--%>};var oc = $('#chart-container').orgchart({'data': datascource,'nodeTemplate': nodeTemplate,'toggleSiblingsResp': false,'direction': 'T2B',// visibleLevel【number】：默认展开几级'visibleLevel': 3,parentNodeSymbol: null});});</script></div>下面是官网给的一些参数，我们可以根据这些参数来修改组织架构图的样式
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| data | json or string | yes | datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent. | |
| pan | boolean | no | false | Users could pan the orgchart by mouse drag&drop if they enable this option. |
| zoom | boolean | no | false | Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option. |
| zoominLimit | number | no | 7 | Users are allowed to set a zoom-in limit. |
| zoomoutLimit | number | no | 0.5 | Users are allowed to set a zoom-out limit. |
| direction | string | no | "t2b" | The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left"). |
| verticalLevel | integer(>=2) | no | Users can make use of this option to align the nodes vertically from the specified level. | |
| toggleSiblingsResp | boolean | no | false | Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow. |
| ajaxURL | json | no | It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent. | |
| visibleLevel | positive integer | no | 999 | It indicates the level that at the very beginning orgchart is expanded to. |
| nodeTitle | string | no | "name" | It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option. |
| parentNodeSymbol | string | no | "fa-users" | Using font awesome icon to imply that the node has child nodes. |
| nodeContent | string | no | It sets one property of datasource as text content of content section of orgchart node. | |
| nodeId | string | no | "id" | It sets one property of datasource as unique identifier of every orgchart node. |
| nodeTemplate | function | no | It's a template generation function used to customize any complex internal structure of node. It recieves only one parameter: "data" stands for json datasoure which will be use to render one node. | |
| createNode | function | no | It's a callback function used to customize every orgchart node. It recieves two parameters: "$node" stands for jquery object of single node div; "data" stands for datasource of single node. | |
| exportButton | boolean | no | false | It enable the export button for orgchart. |
| exportFilename | string | no | "Orgchart" | It's filename when you export current orgchart as a picture. |
| exportFileextension | string | no | "png" | Available values are png and pdf. |
| chartClass | string | no | "" | when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them. |
| draggable | boolean | no | false | Users can drag & drop the nodes of orgchart if they enable this option. **Note**: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API. |
| dropCriteria | function | no | Users can construct their own criteria to limit the relationships between dragged node and drop zone. Furtherly, this function accept three arguments(draggedNode, dragZone, dropZone) and just only return boolen values. | |
| initCompleted | function | no | It can often be useful to know when your table has fully been initialised, data loaded and rendered, particularly when using an ajax data source. It recieves one parament: "$chart" stands for jquery object of initialised chart. |
我们最主要关注的是下面几个属性：
//传数据的，可以是json或者string
'data' : datascource,
//通过单击左/右箭头分别显示/隐藏左/右兄弟节点，
'toggleSiblingsResp': false,
//控制结构图的方向，String 默认是t2b，T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
'direction':'T2B',
// visibleLevel：默认展开几级
'visibleLevel':3,// 是否可以通过鼠标拖动组织架构图
// 'pan':true,
// 是否可以通过滚轮放大缩小组织架构图，以及放大缩小的比例
// 'zoom':true,
// 'zoominLimit':7
// 'zoomoutLimit':0.5
// 是否可以拖动和删除OrgChart节点
// 'draggable':true,
// 父节点的左上是否有个图标来说明有子节点parentNodeSymbol:null,
// createNode': function($node, data) 目前没用到，还不清楚用途
// nodeTemplate,目前用到的最重要的一个属性，用来自定义结点最开始使用orgchart的时候因为他可以四个方向隐藏，所以可能有点迷，而且我的项目基本上只用得到向下隐藏，因此我在js文件中把其他三个方向的隐藏语句都注释掉了，此外我还自定义一些css以修饰组织架构图，使其符合我的要求
/*---------------------------------------------------------------------------------------------------------*/
/*----下面开始是结构图的样式-----------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------*//*这个类可以控制结构图的背景*/
.orgchart {background: #CDE6FA;height: 1000px;width: calc(100%);}/*自定义的颜色和结构，用来修饰结构图的整体颜色和大小*//*母公司------------------------------------------------------------------------------------------------------*//*设置根节点的样式*/
.orgchart .motherC{width: 195px;
}.orgchart .motherC .name {background-color: #034273;border-color: #034273;width: 195px;height: 40px;line-height: 40px;font-size: 17px;font-weight: bold;vertical-align: middle;border-radius: 4px;margin:0px auto;
}.orgchart .motherC .childnum, .orgchart .motherC .rate {width: 0px;height: 0px;margin:0px auto;
}/*子公司，控股公司，分公司三个块------------------------------------------------------------------------------*/
/*子公司-------------------------------------*/
.orgchart .childC{width: 195px;
}
.orgchart .childC .name {background-color: #f15a00;border-color: #f15a00;width: 195px;height: 37px;line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/border-top-left-radius: 4px;border-top-right-radius: 4px;margin:0px auto;
}.orgchart .childC .childnum {background-color: #f15a00;border-color: #f15a00;width: 195px;height: 20px;font-size: 15px;text-align: center; /*水平居中*/border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;margin:0px auto;
}.orgchart .childC .rate {background-color: #f15a00;border-color: #f15a00;width: 0px;height: 0px;margin:0px auto;
}/*分公司--------------------------------------*/
.orgchart .branchC{width: 195px;
}
.orgchart .branchC .name {background-color: #3079bf;border-color: #3079bf;width: 195px;height: 37px;line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/border-top-left-radius: 4px;border-top-right-radius: 4px;margin:0px auto;
}.orgchart .branchC .childnum {background-color: #3079bf;border-color: #3079bf;width: 195px;height: 20px;font-size: 15px;text-align: center; /*水平居中*/border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;margin:0px auto;
}.orgchart .branchC .rate {background-color: #3079bf;border-color: #3079bf;width: 0px;height: 0px;margin:0px auto;
}/*参股公司-------------------------------------------*/
.orgchart .joinC{width: 195px;
}.orgchart .joinC .name {background-color: #2e77be;border-color: #2e77be;width: 195px;height: 37px;line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/line-height: 37px;font-size: 17px;font-weight: bold;vertical-align: middle;text-align: center; /*水平居中*/border-top-left-radius: 4px;border-top-right-radius: 4px;margin:0px auto;
}.orgchart .joinC .childnum {background-color: #2e77be;border-color: #2e77be;width: 195px;height: 20px;font-size: 15px;text-align: center; /*水平居中*/border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;margin:0px auto;
}.orgchart .joinC .rate {background-color: #2e77be;border-color: #2e77be;width: 0px;height: 0px;margin:0px auto;
}/*二级公司的叶子，也就是三级公司-----------------------------------------*/.orgchart .leafC .name {background-color: #004500;border-color: #004500;/*border-bottom-color: white;*/border-top-left-radius: 4px;border-top-right-radius: 4px;width: 41px;height: 137px;font-size: 12px;margin:0px auto;
}.orgchart .leafC .childnum {background-color: #004500;border-color: blue;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;font-size: 12px;/*border-top-color: white;*/width: 41px;height: 25px;margin:0px auto;
}.orgchart .leafC .rate {background-color: #004500;border-color: blue;/*border-top-color: white;*//*border-bottom-color: white;*/font-size: 12px;width: 41px;height: 35px;margin:0px auto;
}/*-其他关于块的配置-------------------------------------------------------------------*/.orgchart .leafC, .orgchart .joinC, .orgchart .motherC, .orgchart .childC, .orgchart .branchC {padding-top: 0px;padding-bottom: 0px;
}/*-线条的配置-目前基本没动-------------------------------------------------------------------------------*/
.orgchart .lines:nth-child(3) td {box-sizing: border-box;height: 20px;
}
.orgchart .lines .topLine {border-top: 2px solid rgba(217, 83, 79, 0.8);
}.orgchart .lines .rightLine {border-right: 1px solid rgba(217, 83, 79, 0.8);float: none;border-radius: 0;
}.orgchart .lines .leftLine {border-left: 1px solid rgba(217, 83, 79, 0.8);float: none;border-radius: 0;
}.orgchart .lines .downLine {background-color: rgba(217, 83, 79, 0.8);margin: 0 auto;height: 20px;width: 2px;float: none;
}
/*----关于按钮的配置-----------------------------------------------------------------*/基本就这些，自己琢磨一些东西并完成还是很有成就感的
![Python＆OpenCV自动人脸打马赛克＆调色系统[源码＆UI操作界面＆部署教程]](https://img-blog.csdnimg.cn/img_convert/998e08f64c706d6f78d7fdef3b837218.png)
