数据量大时echarts图分层调用

src/api/home.js

@@ -9,4 +9,4 @@ export const loginByZjhm = params =>
 
 export const getAjRwGxXx = params =>
   get("/api/ksh/getAjRwGxXx", params);
-  
+

src/components/GraphEcharts.vue

@@ -401,10 +401,14 @@ export default {
     selectIcon(val, length) {
       let str = "";
       if (!length || length <= 0) str = "ash";
-
+      console.log(val);
       switch (val) {
         case "person":
           return require(`@/assets/img/graphEcharts/${str}person.png`);
+        case "zjhm":
+          return require(`@/assets/img/graphEcharts/${str}person.png`);
+        case "asjbh":
+          return require(`@/assets/img/graphEcharts/${str}person.png`);
         case "car":
           return require(`@/assets/img/graphEcharts/${str}car.png`);
         case "phone":
@@ -443,7 +447,7 @@ export default {
         this.seriesLink.push({
           source,
           target: i.name,
-          value: i.value,
+          value: i.value || "",
         });
       });
     },

src/components/NaoTu.vue

@@ -347,7 +347,7 @@ export default {
      * @description: 删除对应节点的所有子节点以及孙子节点
      * @param {*} node 对应节点
      * @return {*}
-     */    
+     */
     removeRelationAndNode(node) {
       console.log(node);
       if (node.lot.childs.length > 0) {
@@ -424,6 +424,9 @@ export default {
       ev.preventDefault();
     };
   },
+  beforeDestroy() {
+    window.onresize = () => {};
+  },
   watch: {
     treeData: {
       handler(val) {
@@ -455,7 +458,6 @@ export default {
     background: rgba(3, 69, 108, 0.5);
   }
 }
-
 // .seeksRelationGraph /deep/ {
 //   .rel-map-canvas {
 //     // width: auto !important;

src/static/getChildrenData.js

+/*
+ * @Author: your name
+ * @Date: 2021-06-24 15:16:47
+ * @LastEditTime: 2021-07-06 14:21:36
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\static\getdata.js
+ */
+export var chartsChildrenData = [{
+    id: 444,
+    name: "晋D11392", //什么东西
+    value: "汽车", //什么联系
+    type: "car", //类型（主要用于节点图片变化，根据类型选择对应的图片）
+    link: null,
+    children: false
+},
+{
+    id: 555,
+    name: "11111111",
+    value: "手机",
+    type: "phone",
+    link: null,
+    children: false
+},
+{
+    id: 666,
+    name: "15110ffffff",
+    value: "imei",
+    type: "imei",
+    link: null,
+    children: false
+},
+{
+    id: 777,
+    name: "99227772",
+    value: "qq",
+    type: "qq",
+    link: null,
+    children: false
+},
+{
+    id: 999,
+    name: "3322222",
+    value: "qq",
+    type: "qq",
+    link: null,
+    children: false
+}]
+
+
+
+
+
+
+
+

src/static/getOneData.js

+/*
+ * @Author: your name
+ * @Date: 2021-06-24 15:16:47
+ * @LastEditTime: 2021-07-06 14:20:44
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\static\getdata.js
+ */
+export var chartsData = [
+    {
+        //人物节点
+        id: 2222, //id
+        name: "李宇航", //姓名
+        type: "person", //类型（主要用于节点图片变化）
+        value: null,
+        children: true,
+        link: null,
+    },
+    {
+        //人物节点
+        id: 22223, //id
+        name: "马云", //姓名
+        type: "person", //类型（主要用于节点图片变化）
+        value: null,
+        children: true,
+        link: null,
+    },
+    {
+        //人物节点
+        id: 22224, //id
+        name: "张飞", //姓名
+        type: "person", //类型（主要用于节点图片变化）
+        value: null,
+        children: true,
+        link: [
+            //人物联系
+            {
+                name: "段慧彬", //姓名
+                id: 4444, //id
+                value: "租户", //关系
+            },
+        ],
+    },
+    {
+        //人物节点
+        id: 4444, //id
+        name: "段慧彬", //姓名
+        type: "person", //类型（主要用于节点图片变化），
+        value: null,
+        children: true,
+        link: [
+            //人物联系
+            {
+                name: "李宇航", //姓名
+                id: 2222, //id
+                value: "租户", //关系
+            },
+        ],
+    },
+]
+
+
+
+

src/static/getdata.js

 /*
  * @Author: your name
  * @Date: 2021-06-24 15:16:47
- * @LastEditTime: 2021-06-25 11:46:34
+ * @LastEditTime: 2021-07-06 09:43:15
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\static\getdata.js
@@ -46,7 +46,6 @@ export var chartsData = [
                     type: "qq",
                 },
             ],
-
         link: [
             //人物联系
             {

src/views/echarts/index.vue

 <!--
  * @Author: your name
  * @Date: 2021-06-22 17:44:35
- * @LastEditTime: 2021-07-05 11:57:00
+ * @LastEditTime: 2021-07-06 14:12:58
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \founder_vue\src\views\echarts\index.vue
 -->
 <template>
   <div id="echarts">
-    <GraphEcharts :data="data" />
+    <GraphEcharts
+      :data="data"
+    />
   </div>
 </template>
 
 <script>
-import GraphEcharts from "@/components/GraphEcharts.vue";
-import { chartsData } from "@/static/getdata.js";
-import {loginByZjhm,getAjRwGxXx} from "@/api/home.js"
+import GraphEcharts from "@/components/MoreDataGraphEcharts.vue";
+import { chartsChildrenData } from "@/static/getChildrenData.js";
+import { chartsData } from "@/static/getOneData.js";
+import { loginByZjhm, getAjRwGxXx } from "@/api/home.js";
 import axios from "axios";
 export default {
   components: {
@@ -24,27 +27,30 @@ export default {
   data() {
     return {
       data: [],
+      childrenData: [],
     };
   },
   mounted() {
-    this.login()
+    this.data = chartsData;
+    // this.login();
+  },
+  methods: {
+    login() {
+      var params = new FormData();
+      var self = this;
+      params.append("zjhm", "142302********2413");
+      loginByZjhm(params).then((res) => {
+        this.test();
+      });
+    },
+    test() {
+      getAjRwGxXx({
+        asjbh: "A1502000000002021019863",
+      }).then((res) => {
+        this.data = res.rows;
+      });
+    },
   },
-  methods:{
-      login(){
-        var params = new FormData();
-        var self = this
-        params.append("zjhm", "142302********2413");
-      loginByZjhm(params).then(res=>{
-        this.test()
-      })
-      },
-      test(){
-        getAjRwGxXx({
-          asjbh:'A1502000000002021019863'
-        }).then()
-      }
-    
-  }
 };
 </script>
 <style scoped lang="scss">