Wed Apr 17 14:10:00 CST 2024 inscode

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
+    "relation-graph": "^2.1.42",
     "vue": "^3.2.37"
   },
   "devDependencies": {

src/App.vue

@@ -5,16 +5,13 @@ import TheWelcome from './components/TheWelcome.vue'
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
+    
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
     </div>
   </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+ 
 </template>
 
 <style scoped>

src/components/HelloWorld.vue

-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+  <div>
+    <button @click="">测试</button>
+    <div style="height:calc(80vh);">
+      <RelationGraph ref="graphRef" :options="graphOptions" @node-click="onNodeClick" @line-click="onLineClick" />
+    </div>
   </div>
 </template>
 
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
+<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},
+  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>