22-vue g6 hello world

 

原文：https://blog.csdn.net/clj198606061111/article/details/90762216

在下当前所在项目需要弄一个流程图，前端框架用的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>　　

输出效果

参考：

• 快速上手

• antV G6流程图在Vue中的使用