最近业务开发遇到了组织结构的展示，多级不固定，改了三板第一版用了echarts，第二版自己用递归组件写了发现很局限不灵活，内容确定的还好点不固定的就很乱了，期间也看了几个相关的组件比如：vue-org-tree、vue-okr-tree,其实都挺不错的但就是不太符合我们产品需要实现的效果，最后采用了relation-graph 这个。

先说说需求，需要实现怎样的，大体就是下面这个图这样的，一般来说实现类似这样多级树结构的时候在vue中需要递归组件去实现了，但对于不同的节点需要不同的展现方式就需要很灵活了目前我没能实现有实现了的朋友可以踢下我，我学习学习

类似效果图

期间我发现highcharts的这个也不错，但不能商用，这个网站也挺不错，是一个用纯 JAVAScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

highcharts

下面说下采用的relation-graph 这个,这是一个Vue关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等

relation-graph.com

使用上也简单，分两步，设置配置项，加载数据

// 定义区域
<div style="height:calc(100vh - 200px);">
      <SeeksRelationGraph ref="seeksRelationGraph"
                          :options="graphOptions"
                          :on-node-click="onNodeClick"
                          :on-line-click="onLineClick" /></div>
// 导入组件
import SeeksRelationGraph from 'relation-graph'

data() {
    return {
      graphOptions: {
       ... 
        // 具体的配置项数据可从网站上可视化配置后获取
      }
    }
  }，
  mounted() {
    this.showSeeksGraph()
  }，
  methods:{
  	 showSeeksGraph() {
       const obj = {
        	rootId:0,// 根节点
         nodes:[],// 节点数据
         links: [],// 连接线数据
       }
       // 调用接口获取数据
       this.$refs.seeksRelationGraph.setJsonData(obj, (seeksRGGraph) => {
          // Called when the relation-graph is completed 
        })
     }
  }

具体的数据处理看实际的了，我说下我的数据处理，我接口得到的数据是多级的树结构数据，类似如下这样：

数据结构

所以需要先将数据进行扁平化处理下,利用reduce进行递归处理

export function flatTreeToArrayTable({
  data = [],
  keyChildren = "children",
  key = 'id',
  includeChildren = false
} = {}) {
  data.some(item => {
    item.parid = item.parid ? item.parid : 0
  })
  function maker(result, item) {
    result.push(includeChildren ? item : omit(item, [keyChildren]));
    if (hasChildren(item, keyChildren)) {
      item[keyChildren].some(ichi => {
        ichi.parid = item[key]
      })
      result = result.concat(item[keyChildren].reduce(maker, []));
    }
    return result;
  }
  return data.reduce(maker, []);
}

再说说节点处理，需要的格式是from->to 树节点中转化也就是parid -> id.

至此我的功能实现了具体效果就不放了（在公司项目中），在实现这个功能的过程中也考虑过几种方案比如d3,等一方面自己不会，再加上项目赶得及也没时间去深入学习使用，先实现效果具体深入优化只能放第二期了，下面我也放上实现此功能看到的相关的几个开源项目，挺不错的想学习的也可以去看看。

vue-okr-tree

开源地址: https://github.com/qq449245884/vue-okr-tree

文档地址：http://www.longstudy.club/vue-okr-tree-doc/index.html

开源协议：MIT

这个也是我一直关注的一个博客（@前端小智）写的，文档写的很全面，支持事件处理及节点过滤，也可以自定义节点，如果用过element-ui 的人就很容易上手，文档清晰。

vue-org-tree

开源地址: https://github.com/hukaibaihu/vue-org-tree

开源协议：MIT

vue-org-tree

Echarts

实例地址： https://echarts.Apache.org/examples/zh/editor.html?c=tree-legend

highcharts

实例地址： https://www.highcharts.com.cn/demo/highcharts/organization-chart

总结： 就这么多了如果你们有更好了也可以推荐给我学习学习下，最近有点忙也好长时间没写了，其实不是说真的没一点时间只是心情有点不好，天气变冷了，各位朋友们要加衣服了，也要加强锻炼了，听说冬天锻炼效果最好哦！