【vue3+GoJs】gojs在vue3中的引用及小白入门

原创已于 2025-02-05 15:36:09 修改

· 1.7k 阅读

15 ·

版权

文章标签：

#vue.js #go #前端

于 2025-02-05 15:34:47 首次发布

前言

GoJS 是一个功能强大的 JavaScript 图形库，用于创建交互式的图表和图形。

将 GoJS 与 Vue 3 结合，可以快速开发出动态且交互丰富的图形界面。本文将介绍如何在 Vue 3 项目中引入 GoJS，并通过一个简单的示例进行入门。

提示：以下是本篇文章正文内容，下面教程可供参考

一、环境准备

1.安装vue3

确保你的项目是vue3，我这里用的是vue-cli。这里就不多赘述了，如果你还没有创建vue3项目，指路:vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）_创建vue3项目-优快云博客https://blog.youkuaiyun.com/weixin_69553582/article/details/129630880https://blog.youkuaiyun.com/weixin_69553582/article/details/129630880https://blog.youkuaiyun.com/weixin_69553582/article/details/129630880

2.安装GoJs

在项目中安装 GoJS：

npm install gojs

二、代码实现

1. 创建组件

在 Vue 3 项目中，创建一个名为 gojsDiagram.vue 的组件，用于封装 GoJS 的逻辑。

文件结构

2. 初始化容器

定义一个`div` 元素，用于容纳 GoJS 的图形化内容。

id="myDiagramDiv"：为这个 div 设置了一个唯一的 ID，GoJS 将通过这个 ID 来找到并初始化绘图区域。
style="background-color: whitesmoke; width: 500px; height: 500px;"：
- background-color: whitesmoke：背景颜色为淡烟灰色（whitesmoke）。
- width: 500px; height: 500px：设置绘图区域的宽度和高度。

<template> 
    <div id="myDiagramDiv" style="background-color: whitesmoke; width: 500px; height: 500px;">
    </div>
</template>

3. 脚本部分（<script setup>）

（1）定义一个变量`myDiagram`，用于存储 GoJS 的绘图实例。

let myDiagram = null;

（2）初始化函数（init）

import导入 GoJS 库，提供图形化功能。
myDiagram = new go.Diagram("myDiagramDiv", { ... });：创建一个新的 GoJS 绘图实例，绑定到 div 元素myDiagramDiv。
myDiagram.model = new go.GraphLinksModel(...);：设置绘图模型，定义节点和连接线的数据，这里给出了一些示例数据。

import go from "gojs";

const init = () => {
    myDiagram = new go.Diagram("myDiagramDiv", {
       //你的画板配置项
    });

    //示例数据
    myDiagram.model = new go.GraphLinksModel(

        //节点数据：每个节点通过 key 唯一标识，text 属性定义节点的显示文本。
        [
            { key: 1, text: "Alpha" },
            { key: 2, text: "Beta" },
            { key: 3, text: "Gamma" }
        ],

        //连接线数据：每条连接线通过 from 和 to 属性定义起点和终点节点的 key。
        [
            { from: 1, to: 2 },
            { from: 2, to: 3 }
        ]
    );
};

（3）调用函数

我这里就直接在挂载后初始化了。

import { onMounted } from 'vue';

onMounted(() => {
    init();
});

3. 在 `App.vue` 中使用组件

在 App.vue 中引入并使用 gojsDiagram 组件：

<script setup>
import goDiagram from './components/gojsDiagram.vue';
</script>

<template>
  <div>
    <goDiagram />
  </div>
</template>

<style scoped></style>

3. 启动项目

运行项目：

npm run dev

查看效果：页面已经成功渲染，添加的示例节点也成功显示。

四、功能解析

以上初始化结束后，可以开始根据需求添加你的配置了！

这篇博客的常用配置项写的很全，很实用，指路：【GoJS使用】GoJS在vue中的入门使用教程_gojs vue-优快云博客https://blog.youkuaiyun.com/pagnzong/article/details/113881692https://blog.youkuaiyun.com/pagnzong/article/details/113881692https://blog.youkuaiyun.com/pagnzong/article/details/113881692

示例1：我希望这个画布显示网格，可以创建节点，并且允许拖动、删除、复制和粘贴等节点操作。

在init()函数的gojs实例内添加你需要的配置项：

const init = () => {
    myDiagram = new go.Diagram("myDiagramDiv", {
        'grid.visible': true, // 显示网格
        'clickCreatingTool.archetypeNodeData': { category: 'Normal', text: '新节点', notice: '' }, // 双击新建节点(可以写入节点的默认信息)；；

        allowMove: true, // 允许拖动画板
        allowDragOut: true, // 允许拖拽节点
        allowDelete: true, // 允许删除节点
        allowCopy: true, // 允许复制节点
        allowClipboard: true, // 允许粘贴节点
    });

};