使用html快速基于relation-graph实现关系图谱

SDDY_xiao

已于 2023-09-14 15:35:49 修改

阅读量1.4k

点赞数 1

分类专栏： CSDN 百度博客文章标签： html 前端 javascript

于 2022-11-08 10:32:28 首次发布

本文链接：https://blog.csdn.net/SDDY_xiao/article/details/127745068

版权

本文介绍了一个基于relation-graph项目的关系图谱组件，该组件使用Vue编程方式开发，适用于前端框架。由于其特性，它无法在纯HTML环境中运行。为了帮助开发者快速实现关系图谱的可视化，提供了HTML模板和效果图。

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

relation-graph项目使用典型的vue编程方式开发的组件。涉及到组件挂载，其可视化实现需要基于Vue 前端框架，无法在纯html上使用。网上迅速实现代码参考太少，故简单写个html使用模板供大家快速实现可视化。

配置： 
1. 需本地存在relation-graph.min.js文件。文件地址：“ https://gitee.com/xx-other/relation-graph/blob/master/dist/relation-graph.min.js ” 保存到本地
2. 需要vue (此例子使用版本v2.7.13)。 可线上依赖方式（https://cdn.jsdelivr.net/npm/vue/dist/vue.js），也可保存到本地引入

模版：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=3.0,user-scalable=yes">
    <title>relation-graph 模版html</title>
</head>

<body>
    <div id="app">
        <div style="height:calc(100vh - 50px);">