当前位置：首页 > VUE

vue实现charts树形

2026-01-16 08:30:23VUE

vue实现树形图表的方案

在Vue中实现树形图表，可以通过多种图表库来完成。以下是几种常见的实现方式：

使用ECharts实现树形图

ECharts提供了强大的树形图支持，能够展示层级关系数据。

安装ECharts：

npm install echarts --save

基础实现代码：

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

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: [{
              name: 'Root',
              children: [
                {
                  name: 'Child1',
                  children: [
                    { name: 'Grandchild1' },
                    { name: 'Grandchild2' }
                  ]
                },
                {
                  name: 'Child2',
                  children: [
                    { name: 'Grandchild3' },
                    { name: 'Grandchild4' }
                  ]
                }
              ]
            }],
            symbol: 'circle',
            symbolSize: 7,
            orient: 'vertical',
            expandAndCollapse: true,
            initialTreeDepth: 2,
            label: {
              position: 'top',
              rotate: 0,
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            animationDurationUpdate: 750
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

使用D3.js实现树形图

D3.js提供了更底层的树形图实现方式，适合需要高度自定义的场景。

安装D3.js：

npm install d3 --save

基础实现代码：

vue实现charts树形

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

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

export default {
  mounted() {
    this.drawTree();
  },
  methods: {
    drawTree() {
      const data = {
        name: 'Root',
        children: [
          {
            name: 'Child1',
            children: [
              { name: 'Grandchild1' },
              { name: 'Grandchild2' }
            ]
          },
          {
            name: 'Child2',
            children: [
              { name: 'Grandchild3' },
              { name: 'Grandchild4' }
            ]
          }
        ]
      };

      const width = 600;
      const height = 400;
      const margin = { top: 20, right: 90, bottom: 30, left: 90 };

      const svg = d3.select(this.$refs.container)
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`);

      const treeLayout = d3.tree().size([width - margin.left - margin.right, height - margin.top - margin.bottom]);
      const root = d3.hierarchy(data);
      treeLayout(root);

      // 绘制连线
      svg.selectAll('.link')
        .data(root.links())
        .enter()
        .append('path')
        .attr('class', 'link')
        .attr('d', d3.linkVertical()
          .x(d => d.x)
          .y(d => d.y));

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

      node.append('circle')
        .attr('r', 5);

      node.append('text')
        .attr('dy', '.31em')
        .attr('x', d => d.children ? -8 : 8)
        .style('text-anchor', d => d.children ? 'end' : 'start')
        .text(d => d.data.name);
    }
  }
};
</script>

<style>
.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}
</style>

使用Vue-OrgChart实现组织架构图

如果需要更简单的组织架构图实现，可以使用vue-orgchart库。

安装vue-orgchart：

npm install vue-orgchart --save

基础实现代码：

<template>
  <org-chart :datasource="treeData"></org-chart>
</template>

<script>
import OrgChart from 'vue-orgchart';
import 'vue-orgchart/dist/style.min.css';

export default {
  components: { OrgChart },
  data() {
    return {
      treeData: {
        name: 'CEO',
        children: [
          {
            name: 'Department 1',
            children: [
              { name: 'Team 1' },
              { name: 'Team 2' }
            ]
          },
          {
            name: 'Department 2',
            children: [
              { name: 'Team 3' },
              { name: 'Team 4' }
            ]
          }
        ]
      }
    };
  }
};
</script>