vue 关系图谱组件

2020-11-23

最近业务开发遇到了组织结构的展示，多级不固定，改了三板第一版用了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.