vue拓撲圖組件
- 介紹
- 技術棧
- 功能特性
- 快速開始
- 安裝依賴
- 開發調試
- 構建部署
- 使用示例
- 演示截圖
- 組件源碼
介紹
一個基于 Vue3 的拓撲圖組件，具有以下特點：
1.基于 vue-flow 實現，提供流暢的拓撲圖展示體驗
2.支持傳入 JSON 對象自動生成拓撲結構
3.自動計算節點位置，無需手動布局
4.支持節點拖拽、縮放、居中等交互操作
5.提供全屏查看模式
6.支持多種架構展示：微服務、云平臺、大數據平臺等
7.完全組件化封裝，使用方便
技術棧
1.Vue 3
2.Vue Flow
功能特性
- 自動布局：根據數據結構自動計算節點位置
- 交互控制：
- 支持畫布拖拽
- 支持節點拖動
- 支持畫布縮放
- 支持畫布居中
- 支持全屏查看
- 可視化增強：
- 節點懸浮效果
- 連線動畫
- 層級顏色區分
- 迷你導航圖
- 組件化設計：
- 可獨立使用的拓撲圖組件
- 支持 JSON 數據驅動
- 提供完整的類型定義
快速開始
安裝依賴
npm install
開發調試
npm run serve
構建部署
npm run build
使用示例
<template><TopologyMap :topology="topologyData" />
</template><script setup>
import TopologyMap from '@/components/TopologyMap.vue'const topologyData = [{id: 'root',label: '根節點',children: [{id: 'child1',label: '子節點1'},{id: 'child2',label: '子節點2'}]}
]
</script>
演示截圖
1.首頁
2.微服務架構-拓撲圖
3.云平臺架構-拓撲圖
4.大數據平臺-拓撲圖
組件源碼
vue拓撲圖組件
