vue g6 hello world

最新推荐文章于 2025-11-14 07:03:14 发布

原创最新推荐文章于 2025-11-14 07:03:14 发布 · 5.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #g6

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用G6图可视化框架，详细展示了从安装到创建流程图的全过程，包括代码示例和输出效果。

在下当前所在项目需要弄一个流程图，前端框架用的vue，所以研究一下g6在vue下的使用。

g6介绍

G6 是蚂蚁金服旗下一个开源图可视化框架。它提供了一套图可视化的基础设置，能帮助开发者搭建属于自己的图图分析应用或是图编辑器应用。

个人感觉这个图可视化框架比 GoJS更优秀更好用些。

项目地址：https://github.com/antvis/g6

准备

通过 npm 安装

npm install @antv/g6 --save

安装成功后，可以通过import进行引用。

import G6 from '@antv/g6';

const graph = new G6.Graph({
  container: 'mountNode',
  width: 600,
  height: 300
});

完整代码

<template>
    <div id="mountNode"></div>
</template>

<script>
    import G6 from '@antv/g6';
    export default {
        name: "start",
        created() { //不能在created方法中初始化
            //this.initG6()
        },
        mounted(){
            this.initG6()
        },
        methods: {
            initG6(){
                const data = {
                    nodes: [{
                        id: 'node1',
                        x: 100,
                        y: 200
                    },{
                        id: 'node2',
                        x: 300,
                        y: 200
                    }],
                    edges: [{
                        target: 'node2',
                        source: 'node1'
                    }]
                };
                const graph = new G6.Graph({
                    container: 'mountNode',
                    width: 500,
                    height: 500,
                    nodeStyle: {
                        default: {
                            fill: '#40a9ff',
                            stroke: '#096dd9'
                        }
                    },
                    edgeStyle: {
                        default: { stroke: '#A3B1BF' }
                    }
                });
                graph.read(data);
            }
        }
    }
</script>