vue.js生成横向拓扑图

最新推荐文章于 2024-09-21 21:02:59 发布

renpingsheng788

最新推荐文章于 2024-09-21 21:02:59 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/renpingsheng66/article/details/102879046

版权

该博客详细介绍了如何利用Vue.js框架实现一个横向拓扑图的前端展示，包括前端代码和后端代码的实现步骤，展示了最终的显示效果。

摘要由CSDN通过智能技术生成

1.前端代码

<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.1/css/bkTopology.css" rel="stylesheet">
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTopology-1.2/js/bkTopology.js"></script>

<div id="app" style="margin-top: 60px;">
    <el-row :gutter="40">
        <el-col :span="16" :offset="4">
            <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true" data-trigger="hover">
                <div class="node-container"><span class="node-text"></span></div>
            </div>
            <div class="bktopo-container">
                <div class="bktopo_demo" id="bktopo_demo2">
                    <div class="none node" id="node-templates" data-container="body" data-placement="top" data-html="true" data-trigger="hover">