element-vue+echarts 竖状树形图，组织机构图组合

需求：用element-vue + echarts（5.0.2）搞一个竖状树形图，实现展示组织机构。大概如图1-1：

代码可能会比较乱，因为想把能遇到的各种情况都展示一下，给以后善忘的自己做个笔记。代码由https://www.jb51.net/article/205503.htm这位博主（简称A大哥）的示例简单改动而来，感谢A大哥示例。A大哥的效果是曲线的，但是我升级了一下echarts的版本，加了个属性就改成了上图这种直角。

我实在是前端小白，每次都是临阵上场救个急，这次稍微接触类型多点，记录一下，不至于以后再忘。 朋友们参考的时候看下自己的echarts版本，比这个低的话可能有的属性方法不支持。可以升级一下版本哈，很快的~

知识点：

1. echarts symbol的类型，可圆形，可矩形，可三角，可图片等等，参考地址：echarts 中 symbol 自定义图片 - 南方有梦，远方有止 - 博客园

2.echarts 树形图所需的数据结构，是上面A大哥代码中的 treeDataTwo。熟悉一下所需数据结构，根据实际情况改动自己获取到的列表，我这里用了一种笨方法，不停写循环，其实是有那个点击节点的方法的去取值的，急等效果没时间研究了，俺就没用。

。。。

没空细写了，太忙，暂时先直接贴代码吧。大家了解一下echarts树形图所需要的树形结构数据类型，基本看这个都可以看懂的。数据结构参考上面提到的A大哥，还挺清晰的，我这边大概有五六层结构吧，每层设了不同的颜色之类的。

注：看不懂我的数据data没关系，可以注释掉，直接用A大哥的数据源就好啦~ 

2021-10-22：之前的代码段删掉了。因为放的一塌糊涂，先放一段setOption里tree的关键属性设置吧~~再立个Flag，有空来补全部实现的代码【狗头】

 series: [
     {
      name: "组织机构图",
      type: "tree",
      orient: "TB", //竖向或水平  TB代表竖向 LR代表水平
      top: '10%',
      initialTreeDepth: 1, //树图初始展开的层级（深度）
      expandAndCollapse: true,  //点击节点时不收起子节点，default: true
      symbol: 'roundRect',
      edgeShape: 'polyline',//折线polyline，曲线curve
      symbolSize: [150, 50],
      image:"",
      itemStyle: {
    //    color: 'transparent',
    //    borderWidth: 0,
    //    borderRadius: 5,
       
                color: '#FFF',//'transparent',
                borderWidth:2,
                borderRadius:1,
                borderColor: '#ffc22e'

      },
      lineStyle: {
       color: '#003399',
       width: 1,
       curveness: 1,
      },
      data: [data]//传过来的数据
     }
    ]