Display organizational tree using charts in Vue3.

Displaying Organizational Chart Using relation-graph in Vue3

Example Online Link: https://www.relation-graph.com/#/demo/vue2?id=layout-folder

Example Online Link: https://www.relation-graph.com/#/demo/vue2?id=layout-folder2

In enterprise management systems, an organizational chart is an essential feature that helps visualize the company's structure and employee hierarchy. This article will explain how to use the relation-graph component library in a Vue3 environment to create a dynamic organizational chart.

Project Setup and Dependency Installation

First, make sure Vue3 is set up in your development environment. Then, install the relation-graph component library via npm. This library provides powerful charting capabilities, supporting various chart types and custom layouts.

npm install relation-graph-vue3

Component Configuration and Initialization

Import relation-graph in the Vue component and configure the graph. We will use the "folder" layout, suitable for displaying hierarchical data like an organizational chart.

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import RelationGraph from 'relation-graph-vue3';
import type { RGOptions, RelationGraphComponent } from 'relation-graph-vue3';

const graphRef = ref<RelationGraphComponent>();

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'folder',
        from: 'left',
        min_per_width: 50,
        min_per_height: 40
    },
    defaultNodeShape: 1,
    defaultNodeWidth: 100,
    defaultLineShape: 41,
    defaultJunctionPoint: 'lr',
    defaultNodeColor: 'rgba(0, 206, 209, 1)',
    defaultLineColor: 'rgba(0, 186, 189, 1)',
    reLayoutWhenExpandedOrCollapsed: true
};
</script>

Data Loading and Graph Rendering

An organizational chart typically consists of multiple nodes and relationships between these nodes. We can simulate an organizational structure by defining hierarchical JSON data:

const setGraphData = async () => {
    const rootNodeJson = [
        {
            id: '1', text: 'CEO',
            children: [
                { id: '2', text: 'CTO',
                  children: [
                      { id: '3', text: 'Dev Manager' },
                      { id: '4', text: 'QA Manager' }
                  ]
                },
                { id: '5', text: 'CFO' },
                { id: '6', text: 'COO' }
            ]
        }
    ];
    const graphInstance = graphRef.value.getInstance();
    await graphInstance.flatNodeData(rootNodeJson, null);
    await graphInstance.doLayout();
    await graphInstance.playShowEffect();
};

Enhancing Interactivity

Nodes in an organizational chart often need to respond to click events to display more detailed information or perform operations like expanding or collapsing child nodes.

const onNodeClick = (node) => {
    console.log('Clicked node:', node.text);
    // Handle node expansion or collapse logic here
};

Component Template and Styling

In the Vue template, use the RelationGraph component to render the chart and add custom description text or control panels using slots.

<template>
  <div style="height:calc(100vh);">
    <RelationGraph ref="graphRef" :options="graphOptions" />
    <div class="c-my-panel">
      <div class="c-option-name">
        This is an example of an organizational chart, demonstrating how to build hierarchical organizational structures using relation-graph.
      </div>
    </div>
  </div>
</template>

<style scoped>
.c-my-panel {
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #efefef;
    padding: 20px;
}
</style>

Conclusion

With Vue3 and relation-graph, creating dynamic and interactive organizational charts becomes easy. These charts not only visually represent the company's hierarchy but also provide enhanced business logic handling through interactions like viewing detailed employee information or dynamically managing departments. By leveraging the rich configuration and layout options of relation-graph, developers can customize organizational charts to fit various business needs.

More Resources:

• GitHub Repository
• Official Website
• Online Examples
• Documentation

Explore these resources to dive deeper into the functionality of relation-graph and kickstart your project development. By using these tools, you can add powerful data visualization support to your business or application.

All node contents can be fully customized to any desired appearance:
https://www.relation-graph.com/#/demo/vue2?id=layout-folder2

Additionally, you can completely define node positions and set node coordinates as desired:
https://www.relation-graph.com/#/demo/vue2?id=layout-diy