antv-orgtree v2.0.1

antv-orgtree

安装

$ npm i antv-orgtree

引用

说明，以vue项目为主

import orgTree from 'antv-orgtree'
export default {
  data () {
    return {
      treeData: {
        id: 'root',
        label: 'root',
        labelDes: '说明：根节点,最顶层元素, 最高级',
        value: '1576211',
        color: 'red',
        children: [
          {
            id: 'c1',
            label: 'c1',
            color: 'yellow',
            children: [
              {
                id: 'c1-1',
                label: 'c1-1'
              },
              {
                id: 'c1-2',
                label: 'c1-2',
                children: [
                  {
                    id: 'c1-2-1',
                    label: 'c1-2-1'
                  },
                  {
                    id: 'c1-2-2',
                    label: 'c1-2-2'
                  }
                ]
              }
            ]
          },
          {
            id: 'c2',
            label: 'c2'
          }
        ]
      }
    }
  },
  mounted () {
    let T = new orgTree({
      id: 'tree',
      data: this.treeData
    })
    T.initTree()
  }

效果

配置项

参数属性

nodeStyle属性

lineStyle属性

textStyle属性

事件方法

实例

创建

新建对象let T = new orgTree(config)，T就是树的实例
初始化 T.initTree()
config是配置实例的属性

参数属性配置

new orgTree({
  id: 'treeID',
  data: treeData,
  direction: 'RL',
  treeType: 3,
  quotaName: '总资产',
  quotaUnit: '万元'
})

事件绑定

获取点击节点事件返回内容 T.getNodeName(callBaclk(data))

动态设置层级 T.EventSetLevel(level)

搜索树 T.EventSearchTree(key)

方向树 T.setDirection(data)

data的数据格式

默认类型

treeData: {
  id: 'root',
  label: 'root',
  children: [{
    id: 'c1',
    label: 'c1'
  }]
}

treeType =2 类型

treeData: {
  id: 'root',
  label: 'root',
  labelDes: '这是根节点', // 描述文字
  children: [{
    id: 'c1',
    label: 'c1',
    labelDes: '这是节点C1',
  }]
}

treeType =3 类型

treeData: {
  id: 'root',
  label: 'root',
  value: '1576211',, // 指标值
  children: [{
    id: 'c1',
    label: 'c1',
    value: '618391',
  }]
}

具体案例

• （1） typeTree =1 方向树，默认TB，可以自己动态配置，调用 T.setDirection(data)

• （2）typeTree =2

  typeTree =3

• （3）树展开的层级设置，可以设置默认或者调用方法动态设置

• （4）搜索树,设置T.EventSearchTree(key)

设置highLightColor属性，配置高亮的颜色

• （5）插件minimap: true, minimapId: 'miniMapDomId'

• （6）属性

	levelColorList: ['#91d5ff', '#99CCCC', '#FFCCCC', '#0099CC', '#99CC66'],
     edgeColor: '#ccc'

• （7）自定义dom 案例1

  defindNode: true,
         nodeHtml: ` 
         <div class="aaa" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: 120px; height: 40px; display: flex;">
           <div style="height: 100%; width: 33%; background-color: #CDDDFD;display: flex;
             align-items: center;justify-content: center;">
             <img alt="img" src="https://gw.alipayobjects.com/mdn/rms_8fd2eb/afts/img/A*sxK0RJ1UhNkAAAAAAAAAAABkARQnAQ" />
           </div>
           <span style="margin: auto; color: #5B8FF9"> %{id}%  </span>
         </div>
         `

  

案例2

defindNode: true,
      nodeHtml: `
      <div class="aaa" style="padding: 0 10px; box-sizing:border-box;background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: 160px; height: 80px; display: flex;flex-direction: column;">
        <div style="height: 50%; display: flex;align-items: center;">
          <img alt="img" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" style="width: 30px;height: 30px;" />
          <span style="margin: auto; color: #5B8FF9"> %{id}% 节点 </span>
        </div>
        <div style="flex: 1;display: flex;align-items: center;justify-content: space-between; ">
          <span> 188802 元</span>
          <span>占比 10%</span>
        </div>
        <div style="background-color: #ccc; width: 100%; height: 5px;margin-bottom: 2px">
          <div style="background-color: red; width: 50%; height: 5px;"></div>
        </div>
      </div>`