检查结果

src/components/echartsTemplate/pie.vue

@@ -55,17 +55,19 @@ let option = {
         name: {
           color: "#fff", //#BCD3E5
           fontSize: 14,
-          width:60,
+          width: 60,
         },
         value: {
           color: "#64DAFF",
           fontSize: 14,
-          width:40,
+          padding: [5, 4],
+          align: "center",
+          width: 40,
         },
         unit: {
           color: "#fff", //#BCD3E5
           fontSize: 14,
-          width:40,
+          width: 20,
         },
       },
     },
@@ -115,7 +117,7 @@ let option = {
           show: false,
           position: "inner", // 数值显示在内部
           formatter: (params) => {
-            return `${params.name}` + ":" + +params.value + "km²";
+            return `${params.name} : ${params.value} "km²`;
           },
         },
         textStyle: {
@@ -139,7 +141,7 @@ let option = {
     },
   ],
   grid: {
-    left: "20%",
+    left: "0%",
     // right: "40%",
     // bottom: "10%",
     top: "16%",
@@ -187,9 +189,9 @@ export default {
       });
       if (cartData.type == "vertical") {
         option.series[0].radius = ["27%", "42%"];
-        option.series[0].center = ["50%", "25%"];
+        option.series[0].center = ["50%", "30%"];
         option.legend.height = "43%";
-        option.legend.top = "50%";
+        option.legend.top = "60%";
         option.legend.orient = "horizontal";
       } else {
         option.series[0].radius = ["45%", "70%"];
@@ -212,13 +214,16 @@ export default {
       };
 
       option.series[0].data = cartData.data;
+      option.series[0].label.normal.formatter = function (params) {
+        return `${params.name} : ${params.value} ${_this.$props.unit}`;
+      };
       this.myChart.resize();
       this.myChart.setOption(option);
       // if (cartData.isclick) {
-        //  legendselectchanged
-        this.myChart.on("legendselectchanged", function (params) {
-          _this.$emit("echartClick", params.name, params.selected[params.name]);
-        });
+      //  legendselectchanged
+      this.myChart.on("legendselectchanged", function (params) {
+        _this.$emit("echartClick", params.name, params.selected[params.name]);
+      });
       // }
     },
   },

src/views/complianceAnalysis/components/scjg.vue

@@ -31,7 +31,7 @@
       <pie
         v-show="eitem.isshow"
         class="echart"
-        :class="`echart${i}`"
+        :class="`echart${eitem.children.length <= 6 ? '' : '_vertical'}`"
         unit="亩"
         @echartClick="(name, iseyes) => echartClick(name, iseyes, i)"
         :ref="`echartRef`"
@@ -144,7 +144,7 @@ export default {
     },
     setEchart(data, i) {
       this.$nextTick(() => {
-        let type = i == 1 ? "horizontal" : "vertical";
+        let type = data.length <= 6 ? "horizontal" : "vertical";
         this.$refs.echartRef[i].setOptions({ data, type });
       });
     },
@@ -273,10 +273,9 @@ export default {
       width: 380px;
       height: 220px;
     }
-    .echart0,
-    .echart2 {
+    .echart_vertical {
       width: 380px;
-      height: 300px;
+      height: 370px;
     }
   }
 }