vue实现树形数据矩形嵌套横向展现

在公司开发中遇到了树行数据实现矩形树图的展现,给的效果如下图

子节点高度刚好对应父节点高度并位置刚好为与父节点之后

在echarts官网查找了很久,echarts现有的矩形树图是采用大矩形框嵌套小矩形框的关系 最后的末节点才根据value的比例来画框

我们需要的是每层的嵌套关系向右扩展

我采用的方案是递归组件来实现

每个节点有一个value值代表其后面的子节点的个数,如果没有那么value值为1,固定value为一时框的高度,得到每个节点高度,每一列的宽度固定

<div class="z" v-for="(item,index) in list" :key="index"  :style="{height: (item.value*25) + 'px'}">
        <p>{
  {name(item.name)}}</p>
      <tree-menus v-if="item.children.length > 0" :list="item.children"></tree-menus>
    </div>

.treeMenus .z {