diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9bb0d14d12a82f77b73907093537db9aa3b67706 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <button @click="test">测试</button>
+        <div style="height:calc(100vh);">
+            <RelationGraph ref="graphRef" :options="graphOptions" @node-click="onNodeClick" @line-click="onLineClick" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent, ref, onMounted } from 'vue';
+import RelationGraph from 'relation-graph/vue3';
+import type { RGOptions, RGJsonData, RGNode, RGLine, RGLink, RGUserEvent, RelationGraphComponent } from 'relation-graph/vue3';
+
+export default defineComponent({
+  name: 'Demo',
+  components: {RelationGraph},
+  methods: {
+    test() {
+        const graphRef = this.$refs.graphRef
+        const __graph_json_data: RGJsonData = {
+            rootId: 'a',
+            nodes: [
+            { id: 'a', text: 'A', borderColor: 'yellow' },
+            { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
+            { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
+            { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
+            ],
+            lines: [
+            { from: 'a', to: 'b', text: 'Line Text', color: '#43a2f1' },
+            { from: 'a', to: 'c', text: 'Line Text' },
+            { from: 'a', to: 'e', text: 'Line Text' },
+            { from: 'b', to: 'e', text: '', color: '#67C23A' }
+            ]
+        };
+      console.log(graphRef.value);
+      const graphInstance = graphRef.value!.getInstance();
+      graphInstance.setJsonData(__graph_json_data).then(() => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+
+        // graphInstance.moveToCenter();
+        // graphInstance.zoomToFit();
+      });
+    }
+  },
+  setup() {
+    const graphRef = ref<RelationGraphComponent | null>(null);
+    const graphOptions: RGOptions = {
+      debug: false,
+      allowSwitchLineShape: true,
+      allowSwitchJunctionPoint: true,
+      allowShowDownloadButton: true,
+      defaultJunctionPoint: 'border'
+      // 这里可以参考"Graph 图谱"中的参数进行设置
+
+    };
+
+    onMounted(() => {
+      showGraph();
+    });
+
+    const showGraph = () => {
+      const __graph_json_data: RGJsonData = {
+        rootId: 'a',
+        nodes: [
+          { id: 'a', text: 'A', borderColor: 'yellow' },
+          { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
+          { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
+          { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
+        ],
+        lines: [
+          { from: 'a', to: 'b', text: 'Line Text', color: '#43a2f1' },
+          { from: 'a', to: 'c', text: 'Line Text' },
+          { from: 'a', to: 'e', text: 'Line Text' },
+          { from: 'b', to: 'e', text: '', color: '#67C23A' }
+        ]
+      };
+      console.log(graphRef.value);
+      const graphInstance = graphRef.value!.getInstance();
+      graphInstance.setJsonData(__graph_json_data).then(() => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+
+        graphInstance.moveToCenter();
+        graphInstance.zoomToFit();
+      });
+    };
+
+    const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
+      console.log('onNodeClick:', nodeObject);
+    };
+
+    const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
+      console.log('onLineClick:', lineObject);
+    };
+
+    return {
+      graphRef,
+      graphOptions,
+      showGraph,
+      onNodeClick,
+      onLineClick
+
+    };
+  },
+  
+});
+</script>
+
+<style lang="scss">
+
+</style>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file