vue实现charts树形

Vue 实现树形图表

在 Vue 中实现树形图表，可以使用现成的图表库如 ECharts 或 D3.js。以下是两种常见的实现方式：

使用 ECharts 实现树形图

ECharts 提供了 tree 图表类型，可以轻松实现树形结构。安装 ECharts：

npm install echarts

在 Vue 组件中使用：

<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 = {
        series: [{
          type: 'tree',
          data: [{
            name: 'Root',
            children: [{
              name: 'Child 1',
              children: [{ name: 'Grandchild 1' }, { name: 'Grandchild 2' }]
            }, {
              name: 'Child 2',
              children: [{ name: 'Grandchild 3' }, { name: 'Grandchild 4' }]
            }]
          }],
          orient: 'vertical',
          symbol: 'circle',
          symbolSize: 10,
          label: {
            position: 'top',
            rotate: 0,
            verticalAlign: 'middle',
            align: 'center',
            fontSize: 12
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left'
            }
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750
        }]
      };

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

使用 D3.js 实现树形图

D3.js 提供了更灵活的树形图实现方式。安装 D3.js：

npm install d3

在 Vue 组件中使用：

<template>
  <svg ref="svg" width="600" height="400"></svg>
</template>

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const data = {
        name: 'Root',
        children: [{
          name: 'Child 1',
          children: [{ name: 'Grandchild 1' }, { name: 'Grandchild 2' }]
        }, {
          name: 'Child 2',
          children: [{ name: 'Grandchild 3' }, { name: 'Grandchild 4' }]
        }]
      };

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

      const g = svg.append('g')
        .attr('transform', `translate(40, ${height / 2})`);

      const treeLayout = d3.tree().size([width - 80, height - 40]);
      const root = d3.hierarchy(data);
      treeLayout(root);

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

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

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

      node.append('text')
        .attr('dy', 3)
        .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: 2px;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

.node text {
  font: 12px sans-serif;
}
</style>

使用 Vue-Tree-Chart 组件

如果希望使用更简单的 Vue 专用组件，可以尝试 vue-tree-chart：

npm install vue-tree-chart

在 Vue 组件中使用：

<template>
  <tree-chart :data="treeData" :options="options" />
</template>

<script>
import TreeChart from 'vue-tree-chart';

export default {
  components: { TreeChart },
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [{
          name: 'Child 1',
          children: [{ name: 'Grandchild 1' }, { name: 'Grandchild 2' }]
        }, {
          name: 'Child 2',
          children: [{ name: 'Grandchild 3' }, { name: 'Grandchild 4' }]
        }]
      },
      options: {
        nodeWidth: 140,
        nodeHeight: 100
      }
    };
  }
};
</script>

以上三种方法都可以在 Vue 中实现树形图表，选择取决于项目需求和技术偏好。ECharts 提供丰富的配置选项，D3.js 提供最大灵活性，而专用 Vue 组件则提供最简单快速的实现方式。