当前位置：首页 > VUE

vue实现树图

2026-02-18 14:43:31VUE

Vue 实现树形图

在 Vue 中实现树形图（Tree Graph）通常需要结合第三方库或自定义组件。以下是几种常见的方法：

使用 D3.js 实现树形图

D3.js 是一个强大的数据可视化库，适合实现复杂的树形图。

安装 D3.js：

npm install d3

示例代码：

<template>
  <div ref="treeContainer"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { name: 'Child 1' },
          { name: 'Child 2', children: [{ name: 'Grandchild' }] }
        ]
      }
    };
  },
  mounted() {
    this.drawTree();
  },
  methods: {
    drawTree() {
      const width = 800;
      const height = 600;

      const svg = d3.select(this.$refs.treeContainer)
        .append('svg')
        .attr('width', width)
        .attr('height', height);

      const treeLayout = d3.tree().size([width - 100, height - 100]);
      const root = d3.hierarchy(this.treeData);
      const treeNodes = treeLayout(root);

      svg.selectAll('.link')
        .data(treeNodes.links())
        .enter()
        .append('path')
        .attr('class', 'link')
        .attr('d', d3.linkHorizontal()
          .x(d => d.y)
          .y(d => d.x));

      const node = svg.selectAll('.node')
        .data(treeNodes.descendants())
        .enter()
        .append('g')
        .attr('class', 'node')
        .attr('transform', d => `translate(${d.y},${d.x})`);

      node.append('circle').attr('r', 5);
      node.append('text').text(d => d.data.name);
    }
  }
};
</script>

使用 ECharts 实现树形图

ECharts 是一个易用的图表库，支持多种图表类型包括树形图。

安装 ECharts：

npm install echarts

示例代码：

<template>
  <div ref="chart" style="width: 800px; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { name: 'Child 1' },
          { name: 'Child 2', children: [{ name: 'Grandchild' }] }
        ]
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        series: [{
          type: 'tree',
          data: [this.treeData],
          symbol: 'circle',
          symbolSize: 10,
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right'
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left'
            }
          },
          expandAndCollapse: true,
          animationDuration: 550
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

使用 Vue-Tree-Component

Vue-Tree-Component 是一个专门为 Vue 设计的树形组件库。

安装 Vue-Tree-Component：

npm install vue-tree-component

示例代码：

<template>
  <tree :data="treeData"></tree>
</template>

<script>
import { Tree } from 'vue-tree-component';

export default {
  components: { Tree },
  data() {
    return {
      treeData: {
        text: 'Root',
        children: [
          { text: 'Child 1' },
          { text: 'Child 2', children: [{ text: 'Grandchild' }] }
        ]
      }
    };
  }
};
</script>

自定义树形组件

如果需要完全自定义的树形图，可以递归渲染组件。

示例代码：

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

<script>
import TreeNode from './TreeNode.vue';

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          { name: 'Child 1' },
          { name: 'Child 2', children: [{ name: 'Grandchild' }] }
        ]
      }
    };
  }
};
</script>

<!-- TreeNode.vue -->
<template>
  <div class="node">
    <div @click="toggle">{{ node.name }}</div>
    <div v-if="expanded && node.children" class="children">
      <tree-node v-for="(child, index) in node.children" :key="index" :node="child"></tree-node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: ['node'],
  data() {
    return {
      expanded: false
    };
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    }
  }
};
</script>