https://github.com/lloydzhou/graphin-vue

The vue toolkit for graph analysis based on @antv/graphin
https://github.com/lloydzhou/graphin-vue

antv g6 graphin vue

Last synced: 11 days ago
JSON representation

The vue toolkit for graph analysis based on @antv/graphin

• Host: GitHub
• URL: https://github.com/lloydzhou/graphin-vue
• Owner: lloydzhou
• License: mit
• Created: 2022-03-27T06:52:05.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-01-22T12:24:43.000Z (10 months ago)
• Last Synced: 2024-10-19T10:46:17.509Z (about 1 month ago)
• Topics: antv, g6, graphin, vue
• Language: TypeScript
• Homepage:
• Size: 568 KB
• Stars: 26
• Watchers: 3
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# graphin-vue









## 核心思想

1. 直接使用@antv/graphin内置的shape和layout逻辑代码

> 使用一个移除react依赖的@antv/grapin核心库（详情[antvis/Graphin#370](https://github.com/antvis/Graphin/pull/370)）

> 可以在不依赖react的情况下使用graphin内置的shape和layout代码

2. 使用vue重写ui组件以及behaviors组件以及components组件

## Install

```

yarn add antv-graphin-vue @antv/graphin

```

## Example

[online demo](https://codesandbox.io/s/graphin-vue-demo-460uf7)

这个是使用jsx实现的vue版本的示例

```

import { defineComponent, reactive } from 'vue'

import Graphin, { Utils, Behaviors, Components } from 'antv-graphin-vue'

const { DragCanvas, ZoomCanvas, DragNode, ResizeCanvas } = Behaviors

const { MiniMap } = Components

const App = defineComponent({

  components: { Graphin, DragCanvas, ZoomCanvas, DragNode, ResizeCanvas, MiniMap },

  setup(props) {

    const state = reactive({

      data: {},

      layout: {

        type: 'force'

      }

    })

    onMounted(() => {

      state.data = Utils.mock(10).circle().graphin()

    })

    return () => (

      

        

        

        

        

        

      

    )

  }

})

export default App

```