vue项目树状图的实现

1.实现背景

项目需要直观的展示元素之间的关系，需要实现一个树状图

数据可视化可以用Echarts HighCharts,但是相关树状图的示例不够直观，且不美观

几种工具之间比较，选择了蚂蚁金服的G6来实现（在开发期间有树状图的示例，之后再看发现这个例子没有了）

2.相关技术介绍

G6图可视化引擎（蚂蚁数据可视化 G6）

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

3.项目集成

3.1树状图渲染公共方法

因为页面有多处用到了树状图的逻辑，所以将方法封装成了公共的方法

文件路径 /src/utils/treeNode.js

3.1.2handleTree 处理渲染数据

主要用于将后端返回的数据处理为可以成功渲染树状图的数据格式

具体逻辑解释见代码中注释

export function handleTree(data,currentComponent){
  // 判断数据类型 根节点只有一个，不是数组
  if(Array.isArray(data)){
    data.forEach(item => {
      // data是后端返回数据 处理为有 id label style键值的对象,主要根据这几个值渲染树状图