Vue: treechart tree

Time:2022-5-6

1、 Lateral

1. Effect

 

2. Code

1) , treechart components

{{treeData.name}}
          
            
              
                
              
              
            
            {{treeData.name}}
          
        
        
      
    
    
      
        
      
    
  



export default {
  name: "TreeChart",
  props: ["json"],
  data() {
    return {
      treeData: {}
    }
  },
  watch: {
    json: {
      handler: function(Props){
        let extendKey = function(jsonData){
          jsonData.extend = (jsonData.extend===void 0 ? true: !!jsonData.extend);
          if(Array.isArray(jsonData.children)){
            jsonData.children.forEach(c => {
              extendKey(c)
            })
          }
          return jsonData;
        }
        if(Props){
          this.treeData = extendKey(Props);
        }
      },
      immediate: true
    }
  },
  methods: {
    toggleExtend: function(treeData){
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    }
  }
}



table{border-collapse: separate!important;border-spacing: 0!important;}
td{position: relative; vertical-align: top;padding:0 0 50px 0;text-align: center; }
.extend_handle{position: absolute;left:50%;bottom:30px; width:10px;height: 10px;padding:10px;transform: translate3d(-15px,0,0);cursor: pointer;}
.extend_handle:before{content:""; display: block; width:100%;height: 100%;box-sizing: border-box; border:2px solid;border-color:#ccc #ccc transparent transparent;
  transform: rotateZ(135deg);transform-origin: 50% 50% 0;transition: transform ease 300ms;}
.extend_handle:hover:before{border-color:#333 #333 transparent transparent;}
/* .extend .extend_handle:before{transform: rotateZ(-45deg);} */
.extend::after{content: "";position: absolute;left:50%;bottom:15px;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::before{content: "";position: absolute;left:50%;bottom:100%;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::after{content: "";position: absolute;left:0;right:0;top:-15px;border-top:2px solid #ccc;}
.childLevel:first-child:before, .childLevel:last-child:before{display: none;}
.childLevel:first-child:after{left:50%;height:15px; border:2px solid;border-color:#ccc transparent transparent #ccc;border-radius: 6px 0 0 0;transform: translate3d(1px,0,0)}
.childLevel:last-child:after{right:50%;height:15px; border:2px solid;border-color:#ccc #ccc transparent transparent;border-radius: 0 6px 0 0;transform: translate3d(-1px,0,0)}
.childLevel:first-child.childLevel:last-child::after{left:auto;border-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)}
.node{position: relative; display: inline-block;margin: 0 1em;box-sizing: border-box; text-align: center;}
.node:hover{color: #2d8cf0;cursor: pointer;}
.node .person{position: relative; display: inline-block;z-index: 2;width:6em; overflow: hidden;}
.node .person .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;border:1px solid #ccc;box-sizing: border-box;}
.node .person .avat:hover{ border: 1px solid #2d8cf0;}
.node .person .avat img{width:100%;height: 100%;}
.node .person .name{height:2em;line-height: 2em;overflow: hidden;width:100%;}
.node.hasMate::after{content: "";position: absolute;left:2em;right:2em;top:2em;border-top:2px solid #ccc;z-index: 1;}
.node .paeson_name{transform: rotate(90deg);position: absolute; top: 68px;right: 39px;width: 88px;text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}


.landscape{transform:translate(-100%,0) rotate(-90deg);transform-origin: 100% 0;}
.landscape .node{text-align: left;height: 8em;width:8em;right: 18px;}
.landscape .person{position: absolute; transform: rotate(90deg);height: 4em;top:4em;left: 2.5em;}
.landscape .person .avat{position: absolute;left: 0;border-radius: 2em;border-width:2px;}
.landscape .person .name{height: 4em; line-height: 4em;}
.landscape .hasMate{position: relative;}
.landscape .hasMate .person{position: absolute; }
.landscape .hasMate .person:first-child{left:auto; right:-4em;}
.landscape .hasMate .person:last-child{left: -4em;margin-left:0;}

2) Use components

introduce

import TreeChart from '@/components/TreeChart'

register

components: { TreeChart },

use

array

data: {
        Name: 'level 1',
        image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
        class: ["rootNode"],
        children: [
          {
            Name: 'level 1-1',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
          },
          {
            Name: 'level 1-2',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
            children: [
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-3',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              }
            ]
          }
        ]
      }

style

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app .avat {
  border-radius: 2em;
  border-width: 2px;
}

#app .name {
  font-weight: 700;
}

Complete code

import TreeChart from '@/components/TreeChart'
export default {
  name: 'app',
  components: { TreeChart },
  data() {
    return {
      data: {
        Name: 'level 1',
        image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
        class: ["rootNode"],
        children: [
          {
            Name: 'level 1-1',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
          },
          {
            Name: 'level 1-2',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
            children: [
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-3',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              }
            ]
          }
        ]
      }
    }
  },
  created(){

  },
  methods: {
  }
}



#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app .avat {
  border-radius: 2em;
  border-width: 2px;
}

#app .name {
  font-weight: 700;
}

2、 Vertical

1. Effect

2. Code

1) , components

{{treeData.name}}
          
          
            
              
              
            
            {{treeData.mate.name}}
          
        
        
      
    
    
      
        
      
    
  



export default {
  name: "TreeChart",
  props: ["json"],
  data() {
    return {
      treeData: {},
      // image_url: require('@/assets/tasly-logo03.png')
    }
  },
  watch: {
    json: {
      handler: function(Props){
        let extendKey = function(jsonData){
          jsonData.extend = (jsonData.extend===void 0 ? true: !!jsonData.extend);
          if(Array.isArray(jsonData.children)){
            jsonData.children.forEach(c => {
              extendKey(c)
            })
          }
          return jsonData;
        }
        if(Props){
          this.treeData = extendKey(Props);
        }
      },
      immediate: true
    }
  },
  methods: {
    toggleExtend: function(treeData){
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    }
  }
}



table{border-collapse: separate!important;border-spacing: 0!important;}
td{position: relative; vertical-align: top;padding:0 0 20px 0;text-align: center; }

.extend_handle{position: absolute;left:50%;bottom:10px; width:10px;height: 10px;padding:10px;transform: translate3d(-15px,0,0);cursor: pointer;}
.extend_handle:before{content:""; display: block; width:100%;height: 100%;box-sizing: border-box; border:2px solid;border-color:#ccc #ccc transparent transparent;
  transform: rotateZ(135deg);transform-origin: 50% 50% 0;transition: transform ease 300ms;}
.extend_handle:hover:before{border-color:#333 #333 transparent transparent;}
.extend .extend_handle:before{transform: rotateZ(-45deg);}

.extend::after{content: "";position: absolute;left:50%;bottom:15px;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.extend:last-child:after{height: 0px}
.childLevel::before{content: "";position: absolute;left:50%;bottom:100%;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::after{content: "";position: absolute;left:0;right:0;top:-15px;border-top:2px solid #ccc;}
.childLevel:first-child:before, .childLevel:last-child:before{display: none;}
.childLevel:first-child:after{left:50%;height:15px; border:2px solid;border-color:#ccc transparent transparent #ccc;border-radius: 6px 0 0 0;transform: translate3d(1px,0,0)}
.childLevel:last-child:after{right:50%;height:15px; border:2px solid;border-color:#ccc #ccc transparent transparent;border-radius: 0 6px 0 0;transform: translate3d(-1px,0,0)}
.childLevel:first-child.childLevel:last-child::after{left:auto;border-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)}

.node{position: relative; display: inline-block;width: 13em;box-sizing: border-box; text-align: center;}
.node .person{position: relative; display: inline-block;z-index: 2;width:200px; overflow: hidden;}
.node .person .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;border:1px solid #ccc;box-sizing: border-box;}
.node .person .avat img{width:100%;height: 100%;}
.node .person .name{height:2em;line-height: 2em;overflow: hidden;width:100%;}
.node.hasMate::after{content: "";position: absolute;left:2em;right:2em;top:2em;border-top:2px solid #ccc;z-index: 1;}
.node.hasMate .person:last-child{margin-left:1em;}

.landscape{transform: rotate(-90deg); padding:0 4em;}
.landscape .node{text-align: left;height: 8em;width:8em;}
.landscape .person{position: relative; transform: rotate(90deg);padding-left: 4.5em;height: 4em;top:4em;left: -1em;}
.landscape .person .avat{position: absolute;left: 0;}
.landscape .person .name{height: 4em; line-height: 4em;}
.landscape .hasMate{position: relative;}
.landscape .hasMate .person{position: absolute; }
.landscape .hasMate .person:first-child{left:auto; right:-4em;}
.landscape .hasMate .person:last-child{left: -4em;margin-left:0;}

introduce

import TreeChart from '@/components/TreeChart'

register

components: { TreeChart },

use

Complete code

landscape.length}" />
  



import TreeChart from '@/components/TreeChart'
export default {
  name: 'showChart2',
  components: { TreeChart },
  data() {
    return {
   <span style="color: rgba(255, 0, 0, 1)">   landscape: [],
      data: {
        Name: < / span > 'level 1',
        image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
        class: ["rootNode"],
        children: [
          {
            Name: 'level 1-1',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
          },
          {
            Name: 'level 1-2',
            image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg",
            children: [
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-2',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              },
              {
                Name: 'level 1-1-3',
                image_url: "http://localhost:8888/20220407/a3214bd4-77c5-4c76-8ffc-06e7363e1419.jpg"
              }
            ]
          }
        ]
      }
    }
  },
  created(){

  },
  methods: {
  }
}



#treeDiv {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 5px;
}

#treeDiv .avat {
  border-radius: 2em;
  border-width: 2px;
}

#treeDiv .name {
  font-weight: 700;
}

Note: to change the horizontal direction of effect 1 into vertical direction, modify as follows:

:class="{landscape: landscape.length}"