vue拓扑图、组织结构图插件使用(orgChart.js)

淡淡的烟草味﹌ 2022-01-06 09:07 3378阅读 0赞

今天使用orgChart没有找到合适的，所以今天来写篇使用文档。

OrgChart.js是什么？

基于ES6的组织结构图插件。

特征

支持本地数据和远程数据（JSON）。  
基于CSS3过渡的平滑扩展/折叠效果。  
将图表对齐为4个方向。  
允许用户通过拖放节点更改组织结构。  
允许用户动态编辑组织图并将最终层次结构保存为JSON对象。  
支持将图表导出为图片。  
支持平移和缩放  
用户可以采用多种解决方案来构建庞大的组织结构图（请参考多层或混合布局部分）  
支持触摸的移动设备插件

使用

<link rel="stylesheet" href="../css/jquery.orgchart.css">
    
    <script type="text/javascript" src="../js/jquery.orgchart.js"></script>

下载地址

https://github.com/dabeng/OrgChart

案例

1.本地直接生成

hrml代码

<div id="chart-container"></div>

js代码

(function($){
      $(function() {
        var datascource = {
          'name': 'Lao Lao',
          'title': 'general manager',
          'children': [
            { 'name': 'Bo Miao', 'title': 'department manager' },
            { 'name': 'Su Miao', 'title': 'department manager',
              'children': [
                { 'name': 'Tie Hua', 'title': 'senior engineer' },
                { 'name': 'Hei Hei', 'title': 'senior engineer',
                  'children': [
                    { 'name': 'Pang Pang', 'title': 'engineer' },
                    { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
                  ]
                }
              ]
            },
            { 'name': 'Yu Jie', 'title': 'department manager' },
            { 'name': 'Yu Li', 'title': 'department manager' },
            { 'name': 'Hong Miao', 'title': 'department manager' },
            { 'name': 'Yu Wei', 'title': 'department manager' },
            { 'name': 'Chun Miao', 'title': 'department manager' },
            { 'name': 'Yu Tie', 'title': 'department manager' }
          ]
        };
        $('#chart-container').orgchart({
          'data' : datascource, //数据
          'nodeContent': 'title' //内容对应的字段
        });
      });
    })(jQuery)

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDU5NzQy_size_16_color_FFFFFF_t_70]

Vue js 都可以使用；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDU5NzQy_size_16_color_FFFFFF_t_70]: /images/20211227/fe3b316fd52a4ad59f992be5a15d4af3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3378人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-org-tree 组织结构图组件应用及源码分析

需求：最近业务需要做类似思维导图的组织结构树功能，需要能动态增删改节点，且每层的节点样式并不相同 ![watermark_type_ZmFuZ3poZW5naGV...

客官°小女子只卖身不卖艺/ 2024年04月18日 10:14/ 0 赞/ 50 阅读

相关 Vue jTopo使用，绘制组织机构图

本篇讲述vue中使用jTopo绘制组织机构图,jTopo官网如下 [jTopo][] 1.jTopo引用在vue入口文件中引入 <script src=".

ゞ浴缸里的玫瑰/ 2023年06月24日 04:50/ 0 赞/ 358 阅读

相关 Vue中使用swiper插件实现轮播图

最终效果如图: ![20210623143509101.gif][] 为了更稳定不建议使用最新版本swiper 下载指定版本如下图: 用到vue-aweso

爱被打了一巴掌/ 2022年10月09日 02:56/ 0 赞/ 254 阅读

相关怎么利用js加html结构图,利用js实现组织架构流程图插件myflow.

特效描述：利用js实现组织架构流程图插件myflow.。利用js实现组织架构流程图插件myflow. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代

怼烎@/ 2022年10月06日 11:51/ 0 赞/ 242 阅读

相关 html5拓扑图插件汇总

1、Vis.js 官网：[vis.js - A dynamic, browser based visualization library.][vis.js - A dyna

「爱情、让人受尽委屈。」/ 2022年08月29日 12:49/ 0 赞/ 301 阅读

相关什么是拓扑结构_拓扑结构图

什么是拓扑结构? 　　首先我们来解释一下拓扑的含义，所谓“拓扑”就是把实体抽象成与其大小、形状无关的“点”，而把连接实体的线路抽象成“线”，进而以图的形式来表示这些点与线之

╰+攻爆jí腚メ/ 2022年05月13日 00:40/ 0 赞/ 339 阅读

相关帮助你生成组织结构图的jQuery插件 - jOrgChart

日期：2013-3-17 来源：[GBin1.com][] [![帮助你生成组织结构图的jQuery插件 - jOrgChart][jQuery_ - jOrgChart]

我就是我/ 2022年03月20日 03:56/ 0 赞/ 411 阅读

相关 vue拓扑图、组织结构图插件使用(orgChart.js)

今天使用orgChart没有找到合适的，所以今天来写篇使用文档。 OrgChart.js是什么？基于ES6的组织结构图插件。特征支持本地数据和远程

淡淡的烟草味﹌/ 2022年01月06日 09:07/ 0 赞/ 3379 阅读

相关 vue 插件(swiper)使用

两种方法: 1... 打开[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_d

本是古典何须时尚/ 2021年11月22日 14:52/ 0 赞/ 381 阅读

相关 vue 轮播图插件vue-awesome-swiper

在做vue项目时，咱们会经常遇到轮播图效果，那么这给大家介绍一个好用的轮播图插件vue-awesome-swiper，首先在github中搜索vue-awesome-swipe

女爷i/ 2021年09月18日 14:58/ 0 赞/ 1086 阅读