echarts 树状图展示，数据传递，递归传递数据

博主新人一枚，希望本文章对正在茫然的你有帮助，如果有需要整改的地方，欢迎大家给出积极意见，感谢。

---

一，递归传递数据

<template>
  <RadialTree :chart-data="chartObject" />
</template>

<script>
import RadialTree from '@/views/components/radial-tree.vue'
export default {
  components: {
    RadialTree,
  },
  data() {
    return {
      chartObject: null,
      //echarts树状图展示此策略 strategy
      strategyList: [
        {
          status: '普通策略',
          strategy: 'GD-MT-PE-QL',
          used: false,
        },
        {
          status: '普通策略',
          strategy: 'OP-WQ-TX-GS',
          used: false,
        },
        {
          status: '默认策略',
          strategy: 'OP-QS-CX',
          used: true,
        },
      ],
    }
  },
  mounted() {
    this.complete()
  },
  methods: {
    //全部引入
    complete() {
      let obj = {
        name: `全部`,
        children: [],
      }
      for (let item of this.strategyList) {
        obj.children.push({
          name: `50%`,
          children: [this.tree({}, item.strategy.split('-'), 0)],
        })
      }
      this.chartObject = obj
    },
    //引入单条
    alone() {
      let find = this.strategyList.find(item => {
        return item.used === true
      })
      if (find) {
        this.treeObj(find.strategy)
      }
    },
    treeObj(row) {
      let list = row.split('-')
      list.unshift(`api接口策略展示`)
      this.chartObject = this.tree({}, list, 0)
    },
    // 递归策略，进行echarts展示
    tree(obj, list, i) {
      if (!list[i]) return
      obj.name = list[i]
      if (list[i + 1]) {
        obj.children = []
        obj.children.push(this.tree({}, list, i + 1))
      }
      return obj
    },
  },
}
</script>

<style></style>

二、echarts树状组件

<template>
  <div id="chart"
       ref="chart"
       style="height:300px">
  </div>
</template>

<style>
.echarts {
  width: 100% !important;
  height: 100% !important;
}
</style>

<script>
// 引入 ECharts 主模块
import * as ECharts from 'echarts'
export default {
  props: {
    chartData: {
      type: Object
    }
  },
  methods: {
    echartTree() {
      ECharts.init(this.$refs.chart).setOption(
        (this.optionChart = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              data: this.seriesData,
              top: '1%',
              left: '7%',
              bottom: '1%',
              right: '20%',

              symbolSize: 7,

              label: {
                normal: {
                  verticalAlign: 'middle',
                  position: 'top',
                  align: 'middle',
                  fontSize: 9
                }
              },

              leaves: {
                label: {
                  normal: {
                    position: 'top',
                    verticalAlign: 'middle',
                    align: 'left'
                  }
                }
              },

              expandAndCollapse: true,
              initialTreeDepth: 6,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        })
      )
    }
  },
  mounted() {
    this.echartTree()
  },
  data() {
    return {
      seriesData: this.$props.chartData && [this.$props.chartData],
      optionChart: ''
    }
  },
  watch: {
    chartData(val) {
      if (val) {
        this.seriesData = [val]
      } else {
        this.seriesData = null
      }
      this.echartTree()
    }
  }
}
</script>

结果图展示