Skip to content

Commit

Permalink
Update README.zh-CN.md (#406)
Browse files Browse the repository at this point in the history
A way to use GraphicWalker in vue
  • Loading branch information
mattholy authored Aug 28, 2024
1 parent 3da0614 commit c4aaa5c
Showing 1 changed file with 36 additions and 3 deletions.
39 changes: 36 additions & 3 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,8 @@ yarn workspace @kanaries/graphic-walker build:app

### 方法二:作为嵌入模块使用

#### 在React中使用

`graphic-walker`提供了非常简单易用的集成方式,你只需要像引入react组件一样,将其引入,即可立即开始使用。

```bash
Expand All @@ -96,7 +98,7 @@ yarn add @kanaries/graphic-walker
npm i --save @kanaries/graphic-walker
```

In your app:
在你的React App中:
```typescript
import { GraphicWalker } from '@kanaries/graphic-walker';

Expand All @@ -113,8 +115,7 @@ const YourEmbeddingApp: React.FC = props => {
export default YourEmbeddingApp;
```

If you have a configuration of GraphicWalker chart, you can use the `PureRenderer` component to make a single chart without controls UI.

如果你已经有了一个GraphicWalker图表的配置,那么你可以使用`PureRenderer`来渲染它,从而可以只显示图表而不包含控制和工具的UI
```typescript
import { PureRenderer } from '@kanaries/graphic-walker';

Expand All @@ -130,6 +131,38 @@ const YourChart: React.FC = props => {
export default YourChart;
```

#### 在Vue3中使用

虽然`graphic-walker`是一个React组件,但我们还是可以通过一些技巧在Vue3中使用它,比如利用`veaury`

首先安装`graphic-walker`
```bash
yarn add @kanaries/graphic-walker

# or

npm i --save @kanaries/graphic-walker
```
然后安装必须的支持:
```bash
npm i veaury -S
```

在你的Vue3 App中创建组件:
```vue
<script setup lang="ts">
import { applyPureReactInVue } from 'veaury'
import { GraphicWalker } from '@kanaries/graphic-walker'
const VueGraphicWalker = applyPureReactInVue(GraphicWalker)
</script>
<template>
<VueGraphicWalker i18nLang="zh-CN" />
</template>
```

完成。

### 本地测试
```bash
# packages/graphic-walker
Expand Down

0 comments on commit c4aaa5c

Please sign in to comment.