级联嵌套图表获取ref和设置数据

src/views/complianceAnalysis/components/collRecursiveTree.vue

@@ -7,6 +7,7 @@
     >
       <template slot="title"> {{ litem.scxname }} </template>
       <scjgContent
+        :ref="`contentRef${litem.scxbsm}`"
         :litem="litem"
         :piseyes="piseyes"
         @echartClick="echartClick"
@@ -17,6 +18,7 @@
         :data="litem.children"
         :piseyes="piseyes"
         @mapview="mapview"
+        @addrefs="addrefs"
       />
     </el-collapse-item>
   </div>
@@ -39,7 +41,20 @@ export default {
     return {};
   },
   components: { scjgContent },
+  mounted() {
+    this.$nextTick(() => {
+      Object.keys(this.$refs).forEach((key) => {
+        if (this.$refs[key]) {
+          this.addrefs(key, this.$refs[key][0]);
+        }
+      });
+    });
+  },
   methods: {
+    addrefs(key, ref) {
+      this.$emit("addrefs", key, ref);
+    },
+   
     mapview(data) {
       this.$emit("mapview", data);
     },

src/views/complianceAnalysis/components/scjg.vue

@@ -39,6 +39,7 @@
         <collRecursiveTree
           :data="eitem.lchildren"
           :piseyes="eitem.iseyes"
+          @addrefs="addrefs"
           @mapview="changeDataSources"
         ></collRecursiveTree>
       </el-collapse>
@@ -85,6 +86,7 @@ export default {
         fileList: [],
       },
       fileid: 1,
+      reflist: {},
     };
   },
   mounted() {
@@ -94,6 +96,9 @@ export default {
     compute(mj) {
       return mj ? (mj * 0.0015).toFixed(2) : 0;
     },
+    addrefs(key, ref) {
+      this.reflist[key] = ref;
+    },
     initData() {
       this.echarts = [];
       this.$emit("updateParent", "loading", true);
@@ -105,7 +110,7 @@ export default {
               ci.name = ci.yslx_name || ci.scxname;
               // ci.value = this.compute(ci.mj);
               ci.value = ci.mj;
-              ci.geom = ci.geom || (ci.data ? ci.data.geom : "");
+              ci.geom = ci.geom || "";
               // ci.label = ci.mc_name;
             });
             this.echarts.push({
@@ -117,8 +122,8 @@ export default {
               isshow: false,
               scxstyle: e.scxstyle,
             });
-            if (e.scxstyle == 0) this.setEchart(c, e.scxbsm);
-            // if (e.children) console.log(e.children)
+            if (e.scxstyle == 1) this.setEchart(c, e.scxbsm);
+            if (e.children) this.lForEach(e.children, "echart");
           });
           this.$emit("updateParent", "loading", false);
         }
@@ -130,22 +135,39 @@ export default {
       //   this.changeDataSources(this.echarts[i]);
       // } else {
       let iseyes = this.echarts[i].iseyes;
-      this.echarts[i].dataList.forEach((child, ci) => {
-        this.changeDataSources({ ...child, iseyes }, colors[ci]);
-      });
-      this.lchangeDataSources(this.echarts[i].lchildren, iseyes);
+      if (this.echarts[i].dataList)
+        this.echarts[i].dataList.forEach((child, ci) => {
+          this.changeDataSources({ ...child, iseyes }, colors[ci]);
+        });
+      this.lForEach(this.echarts[i].lchildren, iseyes, "sources");
       // }
       // emit("eyesChaneg");
     },
-    lchangeDataSources(data, iseyes) {
-      data.forEach((child, ci) => {
+    lForEach(data, fun, iseyes) {
+      data.forEach((child) => {
         if (child.dataList) {
           child.dataList.forEach((ld, li) => {
-            this.changeDataSources({ ...ld, iseyes }, colors[li]);
+            if (fun == "sources")
+              this.changeDataSources({ ...ld, iseyes }, colors[li]);
+            else {
+              ld.name = ld.yslx_name;
+              ld.value = ld.mj;
+            }
           });
         }
         if (child.children) {
-          this.lchangeDataSources(child.children, iseyes);
+          this.lForEach(child.children, fun, iseyes);
+        }
+
+        if (
+          fun == "echart" &&
+          child.scxstyle == 1 &&
+          child.scxbsm.indexOf("GGFWSS") >= 0
+        ) {
+          child.id = child.scxbsm;
+          setTimeout(() => {
+            this.setEchart(child.dataList, child.id, child.id);
+          }, 200);
         }
       });
     },
@@ -156,14 +178,13 @@ export default {
         this.addPolygon(geom, id, color);
       }
     },
-    setEchart(data, id) {
+    setEchart(data, id, childid) {
       this.$nextTick(() => {
         let type = data.length <= 6 ? "horizontal" : "vertical";
-        // this.$refs[`contentRef${id}`][0].$refs.echartRef.setOptions({
-        //   data,
-        //   type,
-        // });
-        this.$refs[`contentRef${id}`][0].setEchart(data, type);
+        if (!childid) this.$refs[`contentRef${id}`][0].setEchart(data, type);
+        else {
+          this.reflist[`contentRef${id}`].setEchart(data, type, childid);
+        }
       });
     },
     // 加载GeoJSON数据

src/views/complianceAnalysis/components/scjgContent.vue

@@ -2,16 +2,16 @@
   <div class="content">
     <!-- 图表 -->
     <pie
-      v-if="litem.scxstyle == 0"
+      v-if="litem.scxstyle == 1"
       :class="`echart${litem.dataList.length <= 6 ? '' : '_vertical'}`"
       unit="亩"
       @echartClick="(name, iseyes) => echartClick(name, iseyes)"
       :ref="`echartRef`"
     ></pie>
-    <div v-else-if="litem.scxstyle == 1">
+    <div v-else-if="litem.scxstyle == 0">
       <div v-for="ldata in litem.dataList" :key="ldata.scxbsm">
         <el-tooltip
-          v-if="ldata.yslx_name.length > 0"
+          v-if="ldata.yslx_name && ldata.yslx_name.length > 0"
           :content="ldata.yslx_name"
           placement="bottom-start"
         >