如何在Vue项目中实现与表格搭配的拓扑图插件？

Question

求助拓扑图插件？
使用的框架是vue3+ElemntPlus
可以与表格搭配使用的
或者有没有实现这种功能的思路？

在网上找了一些插件 如Vue-D3-Network等 但是都没办法和表格配合使用

Answer 1

蚂蚁G6和X6，还有GoJS和mxGraph/diagrams.net

<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="10">
        <!-- 左侧表格 -->
        <el-table :data="tableData" @row-click="handleRowClick">
          <!-- 表格列定义 -->
        </el-table>
      </el-col>
      <el-col :span="14">
        <!-- 右侧拓扑图 -->
        <div ref="graphContainer" class="graph-container"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { Graph } from '@antv/g6'

const tableData = ref([
  {
    id: '1',
    name: '关于xxxx的工作',
    description: 'xxxx的任务'
  },
  //...
])

// 拓扑图数据
const graphData = reactive({
  nodes: [],
  edges: []
})

// 图实例
let graph = null
const graphContainer = ref(null)

// 初始化图
onMounted(() => {
  initGraph()
  // 初始化时加载数据
  loadGraphData()
})

// 初始化图实例
const initGraph = () => {
  const container = graphContainer.value
  const width = container.scrollWidth
  const height = container.scrollHeight || 500
  
  graph = new Graph({
    container,
    width,
    height,
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'drag-node']
    },
    layout: {
      type: 'dagre',
      rankdir: 'TB', // 从上到下布局
      nodesep: 50,
      ranksep: 70
    },
    defaultNode: {
      type: 'rect',
      size: [180, 60],
      style: {
        radius: 5,
        fill: '#C6E5FF',
        stroke: '#5B8FF9',
        lineWidth: 1
      },
      labelCfg: {
        style: {
          fill: '#000',
          fontSize: 12
        }
      }
    },
    defaultEdge: {
      type: 'polyline',
      style: {
        radius: 5,
        offset: 30,
        endArrow: true,
        lineWidth: 1,
        stroke: '#C2C8D5'
      }
    }
  })
}

const loadGraphData = () => {

  const data = {
    nodes: [
      { id: 'node1', label: '关于xxxx工作的执行\nxxxxxxxx的任务', style: { fill: '#C6E5FF' } },
      { id: 'node2', label: '关于xxxx工作的执行\nxxxxxxxx的任务', style: { fill: '#95DE64' } },
      { id: 'node3', label: '关于xxxx工作的执行\nxxxxxxxx的任务', style: { fill: '#5B8FF9' } }
    ],
    edges: [
      { source: 'node1', target: 'node2' },
      { source: 'node2', target: 'node3' }
    ]
  }
  
  graphData.nodes = data.nodes
  graphData.edges = data.edges
  
  graph.data(data)
  graph.render()
  graph.fitView()
}


const handleRowClick = (row) => {

  const nodeId = `node${row.id}` 
  graph.setItemState(nodeId, 'selected', true)
  
  graph.focusItem(nodeId)
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.graph-container {
  height: 600px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>