uni-app 小程序、app端用拓扑图

在uni-app中实现拓扑图展示，可以利用一些第三方库来简化开发过程。一个常用的库是 G6，它是蚂蚁金服开源的一款图可视化引擎，支持丰富的图形和交互功能，非常适合在小程序和App端展示拓扑图。

以下是一个基本的示例，展示如何在uni-app中使用G6来绘制一个简单的拓扑图。

1. 安装G6

首先，确保你的uni-app项目已经创建。然后，在项目的根目录下运行以下命令来安装G6：

npm install @antv/g6 --save

2. 引入G6并绘制拓扑图

在你的页面组件（例如 pages/index/index.vue）中，引入G6并绘制拓扑图：

<template>
  <view class="container">
    <canvas canvas-id="topologyCanvas" style="width: 100%; height: 100%;"></canvas>
  </view>
</template>

<script>
import G6 from '@antv/g6';

export default {
  data() {
    return {};
  },
  onLoad() {
    this.initTopology();
  },
  methods: {
    initTopology() {
      const container = uni.createSelectorQuery().select('#topologyCanvas').node();
      container.exec((res) => {
        const canvas = res[0].node;
        const width = uni.getSystemInfoSync().windowWidth;
        const height = uni.getSystemInfoSync().windowHeight;
        const graph = new G6.Graph({
          container: canvas,
          width,
          height,
          modes: {
            default: ['drag-canvas', 'zoom-canvas'],
          },
          layout: {
            type: 'dagre',
            rankdir: 'TB', // 从上到下布局
            nodesep: 50, // 节点间距
            ranksep: 100, // 层间距
          },
          defaultNode: {
            type: 'rect',
            size: [100, 40],
            style: {
              fill: '#9EC9FF',
              stroke: '#5B8FF9',
            },
            labelCfg: {
              style: {
                fill: '#fff',
                fontSize: 14,
              },
            },
          },
          defaultEdge: {
            style: {
              stroke: '#e2e2e2',
            },
          },
        });

        const data = {
          nodes: [
            { id: 'node1', label: 'Node 1' },
            { id: 'node2', label: 'Node 2' },
            { id: 'node3', label: 'Node 3' },
          ],
          edges: [
            { source: 'node1', target: 'node2' },
            { source: 'node2', target: 'node3' },
          ],
        };

        graph.data(data);
        graph.render();
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

3. 运行项目

保存上述代码后，运行你的uni-app项目。在小程序或App端，你应该能够看到一个简单的拓扑图展示。

这个示例展示了如何使用G6在uni-app中绘制一个基本的拓扑图。你可以根据需要进一步自定义节点和边的样式，以及添加更多的交互功能。