vue 实现antvx6组织架构图-CFANZ编程社区

Vue 实现 AntV X6 组织架构图

前言

AntV X6 是一款开源的 JavaScript 图表库，它提供了丰富的图表组件和工具，可用于构建各种类型的图表，包括组织架构图。Vue 是一款流行的前端框架，它能够轻松地和 AntV X6 集成，实现组织架构图的可视化展示和交互。

在本篇文章中，我们将使用 Vue 和 AntV X6 来创建一个简单的组织架构图，并向您介绍如何使用它们的核心功能。

准备工作

首先，我们需要安装 Vue 和 AntV X6。在终端中运行以下命令来创建一个新的 Vue 项目，并安装相关依赖：

$ vue create org-chart
$ cd org-chart
$ npm install @antv/x6-vue@latest

安装完成后，我们可以使用以下命令来启动开发服务器：

$ npm run serve

现在，我们已经准备好开始创建组织架构图了。

创建组织架构图

首先，我们需要在 Vue 的根组件中引入 AntV X6 的组件。打开 src/App.vue 文件，添加以下代码：

<template>
  <div id=app>
    <x6-graph :graph=graph style=width: 100%; height: 100vh; />
  </div>
</template>

<script>
import { Graph, Shape } from '@antv/x6-vue'

export default {
  name: 'App',

  components: {
    X6Graph: Graph,
    X6Shape: Shape,
  },

  data() {
    return {
      graph: null,
    }
  },

  mounted() {
    this.graph = new Graph({
      container: this.$el,
      grid: true,
    })
  },
}
</script>

在上述代码中，我们引入了 Graph 和 Shape 组件，并在 mounted 钩子中创建了一个新的 Graph 实例。这样，我们就可以在根组件中展示一个空的组织架构图了。

接下来，我们需要定义组织架构图的数据。在 mounted 钩子中，添加以下代码：

this.graph.fromJSON({
  nodes: [
    { id: 'CEO', shape: 'rect', x: 50, y: 50, width: 100, height: 50, label: 'CEO' },
    { id: 'CTO', shape: 'rect', x: 200, y: 50, width: 100, height: 50, label: 'CTO' },
    { id: 'CFO', shape: 'rect', x: 200, y: 150, width: 100, height: 50, label: 'CFO' },
  ],
  edges: [
    { source: 'CEO', target: 'CTO' },
    { source: 'CEO', target: 'CFO' },
  ],
})

在上述代码中，我们使用 fromJSON 方法将组织架构图的数据传递给 Graph 实例。数据中包含了三个节点（CEO、CTO 和 CFO），以及两个边（CEO 到 CTO 和 CEO 到 CFO）。

现在，我们可以在浏览器中看到一个包含了三个节点和两个边的组织架构图了。

定制组织架构图

AntV X6 提供了丰富的形状和样式选项，可以帮助我们定制组织架构图的外观和行为。例如，我们可以为节点添加样式、文本标签和交互行为。

在 mounted 钩子中，添加以下代码来定制组织架构图：

const rectStyle = {
  width: 100,
  height: 50,
  fill: '#1890ff',
  stroke: '#1890ff',
  rx: 8,
  ry: 8,
}

const rectLabelStyle = {
  fill: '#fff',
  fontSize: 14,
  fontWeight: 'bold',
  textAlign: 'center',
  textBaseline: 'middle',
}

this.graph.fromJSON({
  nodes: [
    { id: 'CEO', shape: 'rect', x: 50, y: 50, label