级联查询统计数据显示图表统计

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -9,7 +9,7 @@
         </el-tab-pane>
 
         <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in store.state.query_pick_pane" :key="index">
-
+            <pie class="echart" unit="亩" @echartClick="(name)=>echartClick(name,item.value)" :ref="`echartRef`"></pie>
             <el-collapse v-for="(value, index_item) in item.value" :key="index_item" @change="handleChange">
                 <el-collapse-item :title="'地块' + (index_item + 1)" name="1">
                     <div class="list_vector_multi" v-for="(value_field, index_field) in value" :key="index_field"
@@ -36,6 +36,7 @@
 import { GetTableData } from '@/api/cockpitNew'
 import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
+import pie from "@/components/echartsTemplate/pie.vue";
 
 let manager_multi_level_query = null;
 let pick_entity = null;
@@ -43,7 +44,7 @@ let pick_entity = null;
 let manager_multi_level_vector = null;
 
 export default {
-    components: {},
+    components: { pie },
     data() {
         return {
             activeName: 'second',
@@ -60,6 +61,18 @@ export default {
     watch: {},
     //方法集合
     methods: {
+    compute(mj) {
+      return mj ? (mj * 0.0015).toFixed(2) : 0;
+    },
+    setEchart(data, type, index) {
+      this.$nextTick(() => {
+        this.$refs.echartRef[index].setOptions({ data, type, max: 3 });
+      });
+    },
+    echartClick(name,datas){
+        // let click = datas.filter((c) => c.name == name);
+        // if (click.length > 0) this.gogeojson(click[0].geom );
+    },
         switch_show(flag) {
             pick_entity.entities.values.forEach((res) => {
                 res.show = flag;
@@ -69,7 +82,12 @@ export default {
             const that = this;
             e.forEach(element => {
                 if (element.filed == "geom") {
-                    let geojson = wellknown.parse(element.data);
+                    this.gogeojson(element.data)
+                }
+            });
+        },
+        gogeojson(data){
+                    let geojson = wellknown.parse(data);
 
                     const twoDArray = geojson.coordinates[0];
                     const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
@@ -136,8 +154,6 @@ export default {
                             pitch: -1.539825618847483,
                             roll: 0
                         },
-                    });
-                }
             });
         },
         handleChange(val) {
@@ -212,8 +228,11 @@ export default {
                     }
                     if (res.data.child != undefined) {
                         store.state.query_pick_pane = [];
+                        let index = -1;
                         res.data.child.forEach(element => {
                             if (element.data.length > 1) {
+                                index ++;
+                                let edata = []
                                 store.state.query_pick_pane.push({
                                     name: element.dataname,
                                     value: element.data
@@ -227,6 +246,24 @@ export default {
                                         }
                                     })
                                 });
+                                // if(element.dataname == '土地现状'){
+                                    const countByName = element.data.reduce((acc, e) => {
+                                        let name,value = ''
+                                        e.forEach((res) => {
+                                        if (res.filed == 'dlmc' || res.filed == 'qslx')   name = res.data
+                                        if (res.filed == 'siweiarea')   value = res.data
+                                        
+                                    })
+                                        acc[name] = (acc[name] || 0) + value;
+                                        return acc;
+                                    }, {});
+                                    
+                                Object.keys(countByName).forEach((key) => {
+                                    edata.push({name:key,value:this.compute(countByName[key])})
+                                });
+                                console.log(index,edata,'--a-a--')
+                                // }
+                                this.setEchart(edata,'vertical',index)   
 
                                 // store.state.query_pick_pane.push({
                                 //     name: element.dataname,
@@ -388,6 +425,10 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+.echart{
+    width: 300px;
+    height: 420px;
+}
 .multi_level_query_table {
     position: absolute;
     top: 7rem;

src/components/echartsTemplate/pie.vue

@@ -67,7 +67,7 @@ let option = {
         unit: {
           color: "#fff", //#BCD3E5
           fontSize: 14,
-          width: 20,
+          width: 5,
         },
       },
     },
@@ -191,7 +191,7 @@ export default {
         option.series[0].radius = ["27%", "42%"];
         option.series[0].center = ["50%", "30%"];
         option.legend.height = "43%";
-        option.legend.top = "60%";
+        option.legend.top = "55%";
         option.legend.orient = "horizontal";
       } else {
         option.series[0].radius = ["45%", "70%"];
@@ -200,12 +200,14 @@ export default {
         option.legend.top = "center";
         option.legend.orient = "vertical";
       }
+      let max = cartData.max || 4
+      option.legend.textStyle.rich.name.width = max * 15
       option.legend.formatter = function (name) {
         const sItem = cartData.data.find((item) =>
           `${item.name}`.includes(`${name}`)
         );
         if (sItem) {
-          let aname = name.length > 4 ? name.substr(0, 4) + "..." : name;
+          let aname = name.length > max ? name.substr(0, max) + "..." : name;
           return `{name|${aname}}  {value|${sItem.value}}  {unit|${_this.$props.unit}} `;
           // return name + 'sItem.value';
         } else {