|
|
@@ -0,0 +1,85 @@
|
|
|
+## 📌 拓扑图选型
|
|
|
+
|
|
|
+拓扑图（Topology Graph）是一种用于展示网络结构、系统架构或流程的图形化工具。在前端开发中，选择合适的库来绘制和操作拓扑图至关重要。以下是一些流行的 JavaScript 库及其简要介绍：
|
|
|
+
|
|
|
+### 📈 ECharts
|
|
|
+
|
|
|
+- 简介: 百度开源的可视化库，提供关系图、图表等丰富组件。
|
|
|
+- 背景: 百度，国产
|
|
|
+- 官网: <https://echarts.apache.org/zh/index.html>
|
|
|
+
|
|
|
+### 📈 maotu-webtopo
|
|
|
+- 简介: 基于Vue3开发的开源Web组态引擎库。
|
|
|
+- 背景: 国产，开源
|
|
|
+- 官网: <https://mt-edit.yaolm.top/>
|
|
|
+- 仓库: <https://gitee.com/yaolunmao/maotu-webtopo>
|
|
|
+
|
|
|
+### 📚 hightopo ⭐
|
|
|
+
|
|
|
+> 闭源商用。如果有授权或能够使用这个库，这是最直接的方案
|
|
|
+
|
|
|
+- 简介: 高性能的拓扑图绘制库，支持大规模数据渲染。
|
|
|
+- 背景: 个人开发，国产
|
|
|
+- 官网: <http://www.hightopo.com/>
|
|
|
+- 示例: <http://www.hightopo.cn/demo/electric-bling/index.html> 、<https://www.hightopo.com/demo/2deditor/HT-2D-Editor.html>
|
|
|
+
|
|
|
+### 🐜 AntV G6 ⭐⭐
|
|
|
+
|
|
|
+> 社区强、文档好；布局 & 拓扑 + 交互强；可以自定义节点样式。
|
|
|
+
|
|
|
+- 简介: 图可视化引擎，提供绘制、布局、分析、交互、动画等基础能力。
|
|
|
+- 背景: 蚂蚁金服 AntV，国产
|
|
|
+- 官网: <https://g6.antv.antgroup.com/>
|
|
|
+- 示例: <https://g6.antv.antgroup.com/examples>
|
|
|
+
|
|
|
+### 🔌 jsPlumb
|
|
|
+
|
|
|
+- 简介: 强大的绘图组件，主要用于连接网页上的元素。
|
|
|
+- 背景: 个人，国外
|
|
|
+- 官网: <https://jsplumbtoolkit.com/>
|
|
|
+- GitHub: <https://github.com/jsplumb/community-edition>
|
|
|
+- 中文案例整理: <https://github.com/wangduanduan/jsplumb-chinese-tutorial>
|
|
|
+- 二次封装:
|
|
|
+ - [easy-flow](https://github.com/BiaoChengLiu/easy-flow)
|
|
|
+ - [vue-jsplumb-editor](https://github.com/fangyang921017/vue-jsplumb-editor)
|
|
|
+
|
|
|
+### 🖊️ Le5le-topology ⭐⭐⭐⭐
|
|
|
+
|
|
|
+> 电气 /组态 /拓扑类支持好；TypeScript 支持；易于自定义元件样式。
|
|
|
+
|
|
|
+- 简介: 可视化在线绘图工具，基于 Canvas + TypeScript。支持拓扑图、UML、微服务架构、SCADA 等场景。
|
|
|
+- 背景: 个人，国产
|
|
|
+- 官网: <https://le5le.com/enterprise/solution>
|
|
|
+- 仓库: [GitHub](https://github.com/le5le-com/meta2d.js)
|
|
|
+
|
|
|
+### 🎨 jTopo
|
|
|
+
|
|
|
+- 简介: jTopo (Javascript Topology library) 是一款完全基于 HTML5 Canvas 的关系、拓扑图形化界面开发工具包。
|
|
|
+- 背景: 个人开发，国产
|
|
|
+- 官网: <http://www.jtopo.com>
|
|
|
+- 示例: <https://github.com/fivge/jTopo>、<https://github.com/wenyuan/jtopo_topology>
|
|
|
+
|
|
|
+### WebTopo
|
|
|
+
|
|
|
+- 简介: 基于VUE的web组态（组态，拓扑图，拓扑编辑器）
|
|
|
+- 背景: 个人、国外
|
|
|
+- GitHub: <https://github.com/phynos/WebTopo>
|
|
|
+
|
|
|
+### 🌐 Vis.js
|
|
|
+
|
|
|
+- 简介: 基于 HTML5 Canvas 的动态可视化库，支持大规模数据、交互与动态操作。
|
|
|
+- 背景: Almende B.V，国外
|
|
|
+- 官网: <https://visjs.org/>
|
|
|
+- 示例: <https://visjs.github.io/vis-network/examples/>
|
|
|
+
|
|
|
+### 🔗 JointJS
|
|
|
+
|
|
|
+- 简介: 开源前端框架，支持流程图、工作流图等。商业版 Rappid 提供增强插件。
|
|
|
+- 背景: 国外公司
|
|
|
+- 官网: <https://www.jointjs.com/>
|
|
|
+
|
|
|
+### 📊 D3.js
|
|
|
+
|
|
|
+- 简介: 数据驱动文档 (Data-Driven Documents)，强大的可视化库。
|
|
|
+- 特点: 几乎需要完全手写实现，灵活度极高。
|
|
|
+- 官网: <https://d3js.org/>
|
