vue实现树形关系图

vue实现树形关系图的方法

使用第三方库d3.js

安装d3.js库：npm install d3

在Vue组件中引入d3：

import * as d3 from 'd3'

创建树形布局：

const treeLayout = d3.tree().size([width, height])
const root = d3.hierarchy(data)
const treeData = treeLayout(root)

绘制节点和连线：

// 绘制连线
svg.selectAll('.link')
   .data(treeData.links())
   .enter()
   .append('path')
   .attr('class', 'link')
   .attr('d', d3.linkVertical())

// 绘制节点
svg.selectAll('.node')
   .data(treeData.descendants())
   .enter()
   .append('circle')
   .attr('class', 'node')
   .attr('cx', d => d.x)
   .attr('cy', d => d.y)

使用vue-orgchart组件

安装vue-orgchart：npm install vue-orgchart

基本用法：

<template>
  <orgchart :datasource="treeData"></orgchart>
</template>

<script>
import OrgChart from 'vue-orgchart'
export default {
  components: { OrgChart },
  data() {
    return {
      treeData: {
        name: 'CEO',
        children: [
          { name: 'CTO' },
          { name: 'CFO' }
        ]
      }
    }
  }
}
</script>

自定义节点样式：

<orgchart :datasource="treeData" :pan="true" :zoom="true">
  <template slot-scope="{nodeData}">
    <div class="custom-node">
      {{nodeData.name}}
    </div>
  </template>
</orgchart>

使用vue-tree-chart组件

安装vue-tree-chart：npm install vue-tree-chart

基本实现：

<template>
  <tree-chart :json="treeData" />
</template>

<script>
import TreeChart from 'vue-tree-chart'
export default {
  components: { TreeChart },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { name: 'Child1' },
          { name: 'Child2' }
        ]
      }
    }
  }
}
</script>

自定义配置选项：

<tree-chart 
  :json="treeData"
  :custom-options="{
    nodeWidth: 150,
    nodeHeight: 80,
    direction: 'vertical'
  }"
/>

使用ECharts实现

安装ECharts：npm install echarts

基本树图实现：

<template>
  <div ref="treeChart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const chart = echarts.init(this.$refs.treeChart)
    const option = {
      series: [{
        type: 'tree',
        data: [{
          name: 'Root',
          children: [
            { name: 'Child1' },
            { name: 'Child2' }
          ]
        }]
      }]
    }
    chart.setOption(option)
  }
}
</script>

自定义树图样式：

const option = {
  series: [{
    type: 'tree',
    orient: 'vertical',
    symbol: 'roundRect',
    symbolSize: [60, 30],
    label: {
      position: 'inside',
      formatter: '{b}'
    },
    leaves: {
      label: {
        position: 'right'
      }
    },
    expandAndCollapse: true,
    animationDuration: 550,
    data: treeData
  }]
}

纯CSS实现简单树形图

使用CSS伪元素和flex布局：

<template>
  <div class="tree">
    <ul>
      <li>
        <span>Root</span>
        <ul>
          <li><span>Child1</span></li>
          <li><span>Child2</span></li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<style>
.tree ul {
  padding-left: 20px;
  position: relative;
}
.tree li {
  list-style-type: none;
  position: relative;
  padding-left: 20px;
}
.tree li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 100%;
  border-left: 1px solid #ccc;
}
.tree li::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 15px;
  border-top: 1px solid #ccc;
}
</style>

使用Vue递归组件实现

创建递归组件：

<template>
  <div class="node">
    {{ node.name }}
    <div v-if="node.children" class="children">
      <tree-node 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  }
}
</script>

主组件中使用：

<template>
  <div class="tree-container">
    <tree-node :node="treeData" />
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue'
export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { name: 'Child1' },
          { name: 'Child2' }
        ]
      }
    }
  }
}
</script>

这些方法提供了从简单到复杂的不同实现方案，可以根据项目需求选择合适的方案。第三方库通常提供更丰富的功能和更好的交互体验，而自定义实现则更加灵活可控。