精选优质文档-倾情为你奉上HTML5实现的矢量卡片式组织结构图 组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时,不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构,今天就给大家带来一款用TWaver实现的组织结构图,提供多种布局方式,为了清晰呈现组织里每个人的职能,我们定制了名片样式来展示网元。首先来看下整体效果。先来一个经典的上下层级布局:再来一个圆形布局:这些布局用twaver来实现是非常的合适,实现起来也是很容易,twaver内部就提供了多种布局方式:自左向右,从下向上,具体可以看twaver官方文档介绍,这里就不多说了。今天我们着重说一下twaver如果实现上图中的网元。先放大看看效果:这里借用了女神的范冰冰头像。我们假设范冰冰为财务部出纳,我想范爷做为财务部主管也是当之无愧的,从刚开始的北漂到后来的一夜狂赚8千万。现在的社会,只要有钱投资了房产后半辈子就不用愁了,闲话不多扯。这里我们采用的是名片式的方式来呈现组织图上的每个网元,左侧一张图片,右侧是职称,这种矢量和位图