go

layouts/basic.vue

+<template>
+    <Layout class="go-main">
+            <Header class="header">
+                <Menu mode="horizontal" theme="light" active-name="1" class="menu">                   
+                        <MenuItem name="1">
+                            <Icon type="ios-navigate"></Icon>
+                            Item 1
+                        </MenuItem>
+                        <MenuItem name="2">
+                            <Icon type="ios-keypad"></Icon>
+                            Item 2
+                        </MenuItem>
+                        <MenuItem name="3">
+                            <Icon type="ios-analytics"></Icon>
+                            Item 3
+                        </MenuItem>
+                        <MenuItem name="4">
+                            <Icon type="ios-paper"></Icon>
+                            Item 4
+                        </MenuItem>
+                </Menu>
+            </Header>
+            <Content >
+               <Card class="hp100">
+                   <nuxt/>
+                </Card>
+            </Content>
+        </Layout>
+</template>
+<script>
+    export default {
+        
+    }
+</script>
+<style lang="less">
+@top-height:50px;
+@tob-bg:#eee;
+.go-main{
+    height: 100vh;
+    .header{
+        background: @tob-bg;
+        height: 40px;
+        padding: 0;
+        .menu{
+            height: @top-height;
+            line-height: @top-height;
+             background: @tob-bg;
+        }
+    }
+    .ivu-layout-content{
+        height: 100%;
+        padding: 20px;
+        .hp100{
+            height: 100%;
+        }
+    }
+}
+</style>
\ No newline at end of file

pages/go/index.vue

+<template>
+  <div id="card">
+    <h1>go.js</h1>
+  </div>
+</template>
+
+<script>
+import go from "gojs";
+export default {
+  layout: "basic",
+  name: "",
+  data() {
+    return {
+      go: null
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let $ = go.GraphObject.make;
+      this.go = $(go.Diagram, "card");
+      var myModel = $(go.GraphLinksModel);
+      // in the model data, each node is represented by a JavaScript object:
+
+      this.go.nodeTemplate = $(
+        go.Node,
+        "Horizontal",
+        { background: "blue" },
+        $(
+          go.TextBlock,
+          "Hi,henq",
+          { margin: 12, stroke: "#fff", font: "bold 16px '宋体'" },
+          new go.Binding("text", "name")
+        )
+      );
+      myModel.nodeDataArray = [
+        { key: "A", name: "henq" },
+        { key: "B", name: "lily" },
+        { key: "C", name: "miaomiao" }
+      ];
+      myModel.linkDataArray = [
+        {
+          from: "A",
+          to: "C"
+        },
+        { from: "B", to: "C" },
+        { from: "C", to: "A" },
+        { from: "C", to: "B" }
+      ];
+      this.go.model = myModel;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+#card {
+  height: 80vh;
+  width: 100%;
+  canvas {
+    outline: none;
+  }
+}
+</style>
\ No newline at end of file