vue+echarts树状图，点击逐层打开，请求，并关闭其他分支

源码：

<template>
  <div class="dashboard-container">
    <div id="main" ref="main" style="width: 100%;height: 900px;padding:30px" />
  </div>
</template>
<script>
const echarts = require('echarts')
export default {
  name: 'Dashboard',
  data() {
    return {
      myChart: '',
      arr: [],
      oneIndex: '',
      twoIndex: '',
      oneId: '', // 代理公司Id
      twoId: '', // 销售经理Id
      twoList: [], // 销售经理List
      datas: [
        {
          'name': '总部',
          'children': [
            {
              'name': '代理公司A',
              'level': 1,
              'id': 11,
              'children': []
            },
            {
              'name': '代理公司B',
              'level': 1,
              'id': 12,
              'children': []
            },
            {
              'name': '代理公司C',
              'level': 1,
              'id': 13,
              'children': []
            },
            {
              'name': '代理公司D',
              'level': 1,
              'id': 14,
              'children': []
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.drewTree()
  },
  methods: {
    clickFun(param) {
      const myChart = echarts.init(document.getElementById('main'))
      if (param.type === 'click') {
        // 如果当前节点是销售主管 return
        if (param.data.level === 3) {
          return
        }
        // 如果是展开状态，点击关闭，清空当前节点的children
        if (param.data.collapsed === false) {
          param.data.children = []
          param.data.collapsed = true
          return
        }
        // 点击代理公司层级
        if (param.data.level === 1) {
          const arr = this.datas[0].children
          this.oneId = param.data.id
          const id = param.data.id
          this.oneIndex = arr.findIndex(item => item.id === param.data.id)
          console.log('代理公司下标', this.oneIndex)
          for (var ix in arr) {
            // 点击当前点击的节点展开，其余节点收缩，清空其余节点的children
            if (arr[ix].id === id) {
              arr[ix].children = [
                {
                  'children': [],
                  'name': '销售经理A',
                  'level': 2,
                  'id': 21
                },
                {
                  'children': [],
                  'name': '销售经理B',
                  'level': 2,
                  'id': 22
                }
              ]
              this.twoList = arr[ix].children
              arr[ix].collapsed = false
            } else {
              arr[ix].children = []
              arr[ix].collapsed = true
            }
          }
        }
        // 点击销售经理层级
        if (param.data.level === 2) {
          const arr = this.datas[0].children[this.oneIndex].children
          const id = param.data.id
          this.twoIndex = arr.findIndex(item => item.id === param.data.id)
          console.log('销售经理下标', this.twoIndex)
          for (var i in arr) {
            // 点击当前点击的节点展开，其余节点收缩，清空其余节点的children
            if (arr[i].id === id) {
              arr[i].children = [
                {
                  'children': [],
                  'name': '销售主管A',
                  'level': 3
                },
                {
                  'children': [],
                  'name': '销售主管B',
                  'level': 3
                }
              ]
              arr[i].collapsed = false
            } else {
              arr[i].children = []
              arr[i].collapsed = true
            }
          }
        }
        myChart.clear()
        this.drewTree()
      }
    },
    drewTree() {
      const myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        // tooltip: {
        //   trigger: 'item',
        //   triggerOn: 'mousemove',
        //   title: '代理信息',
        //   formatter: function(params) {
        //     return params.data.name
        //     // var relVal = params[0].name
        //     // for (var i = 0, l = params.length; i < l; i++) {
        //     //   relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + parseMoney(params[i].value) + '元'
        //     // }
        //     // return relVal
        //   }
        // },
        series: [
          {
            type: 'tree',
            data: this.datas,
            initialTreeDepth: 1,
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              normal: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 12
              }
            },
            leaves: {
              label: {
                normal: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                }
              }
            },
            expandAndCollapse: true,
            animationDuration: 0,
            animationDurationUpdate: 0
          }
        ]
      })
      myChart.on('click', this.clickFun)
    }
  }
}
</script>

<style lang='scss' scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>