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中的使用