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>
输出效果
参考:
做有积累的事~~