饼图改为动态

src/components/echartsTemplate/pie.vue

@@ -65,7 +65,7 @@ let option = {
         value: {
           color: "#64DAFF",
           fontSize: 14,
-          padding: [5, 4],
+          padding: [5, 0],
           align: "center",
           // width: 40,
         },
@@ -197,7 +197,7 @@ export default {
         option.series[0].center = ["50%", "30%"];
         option.legend.height = "40%";
         option.legend.top = "60%";
-        option.legend.orient = "horizontal";
+        option.legend.orient = "vertical";
       } else {
         option.series[0].radius = ["45%", "70%"];
         option.series[0].center = ["25%", "50%"];

src/views/farmlandProtection/components/fxjg.vue

@@ -47,8 +47,8 @@
       </div>
       <div>
         <pie
-          :class="`echart${litem.dataList.length <= 6 ? '' : '_vertical'}`"
-          unit="平方米"
+          :class="`echart${edata.length <= 6 ? '' : '_vertical'}`"
+          unit="㎡"
           @echartClick="(name) => echartClick(name, item.value)"
           :ref="`echartRef`"
         ></pie>
@@ -91,7 +91,7 @@
 </template>
 
 <script>
-import pie from "@/components/echartsTemplate/pieNew.vue";
+import pie from "@/components/echartsTemplate/pie.vue";
 import { QueryGdbhJg } from "../../../api/ghss/gdbh.js";
 // 使用wkt转json
 import parse from "wellknown";
@@ -110,24 +110,12 @@ export default {
         zd1: require("@/assets/homeimg/1.png"),
       },
       resultData: [],
+      edata: [],
     };
   },
 
   methods: {
     download() {},
-    draw_vector() {
-      // store.setViewerFlagb(false);
-      // store.setToolBarShow(false);
-      // store.setXzqh_flag(false);
-      // store.setCockpit_vector({
-      //   title: "山水工程项目",
-      //   word: "项目名称",
-      //   mapType: "jsc_stxf_ssxf_layer",
-      //   tableData: store.state.cockpit_stxf.ssgc.list,
-      //   tablejscType: `jsc_stxf_ywlx_ssxfmx`,
-      //   columns: ['项目名称', '治理面积(公顷)','投资金额(万元)', '区县编码', '区县编码名称', '治理时间', '治理进度',  '备注'],
-      // });
-    },
     resultDeatils(val, mxbsm) {
       let obj = {
         bsm: this.fxjgObj.bsm,
@@ -151,9 +139,15 @@ export default {
               });
             });
           }
+          this.edata = data;
           let type = data.length <= 6 ? "horizontal" : "vertical";
-          this.$refs.echartRef.setOptions({ data, type }, 1);
+          this.$nextTick(() => {
+            this.$refs.echartRef.setOptions({ data, type }, 1);
+          });
+
+          // this.$refs.echartRef.res
           this.resultData = res.data;
+
           // this.drawWktPloygon(res.data.xmxx.geom, "#ff0000", "all"); //res.data.bsm
           this.loadGeoJSON(parse(res.data.xmxx.geom), "#ff0000", "all");
         } else {
@@ -251,6 +245,10 @@ export default {
     width: 387px !important;
     height: 200px !important;
   }
+  .echart_vertical {
+    width: 387px !important;
+    height: 370px !important;
+  }
 
   .downloadDiv {
     position: relative;

src/views/farmlandProtection/components/interDetails.vue

@@ -220,7 +220,6 @@ export default {
       getgeoms(this.interObj).then((res) => {
         if (res.statuscode == 200) {
           this.tableData = res.data.dataListMap;
-          console.log(this.tableData, "---xo-sx");
           this.active_tableData(res.data.dataListMap);
         } else {
           this.$message.error(res.message);