README.zh-CN.md

Vue Graphic Walker: 一个可以帮你快速构建数据交互式数据可视化应用的Vue组件

English | 简体中文

@kanaries/vue-graphic-walker是一个可以帮你快速构建数据交互式数据可视化应用的Vue组件，你可以将它作为一个tableau的轻量级开源替代。它是graphic-walker的Vue版本。

使用

第一步：安转包

npm i --save @kanaries/vue-graphic-walker

第二步：在Vue中使用

作为组件使用

<script setup lang="ts">
import { VueGraphicWalker } from '@kanaries/vue-graphic-walker';
</script>

<template>
  <VueGraphicWalker />
</template>

作为hook使用

<script setup lang="ts">
import { useGraphicWalker } from './useGraphicWalker';
import { onMounted, ref } from 'vue';
const gw = ref<HTMLElement | null>(null);
onMounted(() => {
  const { render } = useGraphicWalker(gw)
  render();
})
</script>

<template>
  <div ref="gw"></div>
</template>

文档

组件的参数与graphic-walker相同：

export interface IGWProps {
    dataSource?: IRow[];
    rawFields?: IMutField[];
    spec?: Specification;
    hideDataSourceConfig?: boolean;
    i18nLang?: string;
    i18nResources?: { [lang: string]: Record<string, string | any> };
    keepAlive?: boolean;
    /**
     * auto parse field key into a safe string. default is true
     */
    fieldKeyGuard?: boolean;
    /** @default "vega" */
    themeKey?: IThemeKey;
    dark?: IDarkMode;
    storeRef?: React.MutableRefObject<IGlobalStore | null>;
    toolbar?: {
        extra?: ToolbarItemProps[];
        exclude?: string[];
    };
}

• graphic-walker docs
• graphic-walker github