vue-graphin

Vue-graphin

对应 Graphin 2.3+

vue2, vue3 使用

使用方式

yarn add @antv/g6 lodash 

<template>
  <div id="app">
    <div style="height: 100vh; width: 100vw">
      <graphin
        :data="{
          nodes: [
            { id: '1', x: 100, y: 100 },
            { id: '22222', x: 100000000000, y: 2000000000000000 },
          ],
          edges: [],
        }"
      >
        <context-menu bind-type="node">
          <context-menu-menu>
            <context-menu-menu-item>item1</context-menu-menu-item>
            <context-menu-menu-item>item2</context-menu-menu-item>
            <context-menu-menu-item>item3</context-menu-menu-item>
          </context-menu-menu>
        </context-menu>
        <mini-map />
      </graphin>
    </div>
  </div>
</temapte>
<script lang="ts">

import { defineComponent } from '@vue/composition-api'
import Graphin, { Components } from 'vue-graph'
import 'vue-graph/style.css'

const { ContextMenu, MiniMap } = Components;
export default defineComponent({
  name: 'App',
  components: {
    graphin: Graphin,
    'context-menu': ContextMenu,
    'context-menu-menu': ContextMenu.Menu,
    'context-menu-menu-item': ContextMenu.Menu.Item,
    'mini-map': MiniMap,
  },
})
</script>

TODO: BUG:

1. vue2渲染模板报错问题 打包:
2. build命令优化
3. 文档以及文档构建
4. d.ts 输出 能力:
5. 支持其他组件