检查结果饼图调整

src/components/echartsTemplate/pie.vue

@@ -3,10 +3,22 @@
 </template>
 
 <script>
+// let colors = [
+//   ["#FC8053", "#F2CAA4"],
+//   ["#5583e7", "#36dddb"],
+//   ["#f888b1", "#fbe6ee"],
+// ];
 let colors = [
-  ["#FC8053", "#F2CAA4"],
-  ["#5583e7", "#36dddb"],
-  ["#f888b1", "#fbe6ee"],
+  "#62ADED",
+  "#DFE15A",
+  "#6EDC8D",
+  "#00A42E",
+  "#F9B447",
+  "#7F4FE5",
+  "#FF6969",
+  "#27CED9",
+  "#DF56F5",
+  "#DCFFAF",
 ];
 let option = {
   backgroundColor: "rgba(0,0,0,0)",
@@ -18,28 +30,14 @@ let option = {
       fontSize: 14,
       color: "#fff",
       fontWeight: "bold",
-      // align: "35%"
-
-      //        a: {
-      //           color: "#fff",
-      //           fontSize: 42,
-      //           align: "35%",
-      //        },
-      //        b: {
-      //           fontSize: 20,
-      //           color: "#fff",
-      //           fontWeight: "bold",
-      //           align: "35%",
-      //        }
-      //  },
     },
     x: "20%",
     y: "45%",
   },
   legend: {
-    type: "scroll",
+    // type: "scroll",
     orient: "vertical",
-    right: "0",
+    right: "2%",
     top: "center",
     data: [],
     icon: "rect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
@@ -57,14 +55,17 @@ let option = {
         name: {
           color: "#fff", //#BCD3E5
           fontSize: 14,
+          width:60,
         },
         value: {
           color: "#64DAFF",
           fontSize: 14,
+          width:40,
         },
         unit: {
           color: "#fff", //#BCD3E5
           fontSize: 14,
+          width:40,
         },
       },
     },
@@ -114,7 +115,7 @@ let option = {
           show: false,
           position: "inner", // 数值显示在内部
           formatter: (params) => {
-            return `${params.name}` + ":" + +params.value + "个";
+            return `${params.name}` + ":" + +params.value + "km²";
           },
         },
         textStyle: {
@@ -160,32 +161,45 @@ export default {
     };
   },
   methods: {
-    setOptions(dataList, isclick) {
+    setOptions(cartData) {
       let _this = this;
       if (!this.myChart) {
         // var dom = document.getElementById("pie_echart");
         this.myChart = echarts.init(this.$refs.echart);
       }
 
-      dataList.forEach((item, index) => {
+      cartData.data.forEach((item, index) => {
         option.legend.data.push(item.name);
         item.itemStyle = {
+          // color: colors[index % colors.length],
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: colors[index % colors.length][0],
+              color: colors[index % colors.length],
             },
             {
               offset: 1,
-              color: colors[index % colors.length][1],
+              color: colors[index % colors.length],
             },
           ]),
         };
         // dataAll += item.value;
       });
-      option.legend.top = dataList.length > 4 ? "10%" : "center";
+      if (cartData.type == "vertical") {
+        option.series[0].radius = ["27%", "42%"];
+        option.series[0].center = ["50%", "25%"];
+        option.legend.height = "43%";
+        option.legend.top = "50%";
+        option.legend.orient = "horizontal";
+      } else {
+        option.series[0].radius = ["45%", "70%"];
+        option.series[0].center = ["25%", "50%"];
+        option.legend.height = "100%";
+        option.legend.top = "center";
+        option.legend.orient = "vertical";
+      }
       option.legend.formatter = function (name) {
-        const sItem = dataList.find((item) =>
+        const sItem = cartData.data.find((item) =>
           `${item.name}`.includes(`${name}`)
         );
         if (sItem) {
@@ -197,10 +211,10 @@ export default {
         }
       };
 
-      option.series[0].data = dataList;
+      option.series[0].data = cartData.data;
       this.myChart.resize();
       this.myChart.setOption(option);
-      if (isclick) {
+      if (cartData.isclick) {
         //  legendselectchanged
         this.myChart.on("legendselectchanged", function (params) {
           console.log("----");

src/views/complianceAnalysis/components/scjg.vue

@@ -27,6 +27,7 @@
       <pie
         v-show="eitem.isshow"
         class="echart"
+        :class="`echart${i}`"
         @echartClick="echartClick"
         :ref="`echartRef`"
       ></pie>
@@ -103,22 +104,33 @@ export default {
     },
     setEchart1() {
       this.$nextTick(() => {
-        this.$refs.echartRef[0].setOptions(hgxfx.xzfxlist);
+        this.$refs.echartRef[0].setOptions({
+          type: "vertical",
+          data: hgxfx.xzfxlist,
+        });
       });
     },
     setEchart2() {
       this.$nextTick(() => {
-        this.$refs.echartRef[1].setOptions(hgxfx.sxfxlist, true);
+        let setoptions = {
+          data: hgxfx.sxfxlist,
+          type: "horizontal", //横向
+          isclick: true,
+        };
+        this.$refs.echartRef[1].setOptions(setoptions);
       });
     },
     setEchart3() {
       this.$nextTick(() => {
-        this.$refs.echartRef[2].setOptions(hgxfx.tdlylist);
+        this.$refs.echartRef[2].setOptions({ data: tdlylist });
       });
     },
     setEchart4() {
       this.$nextTick(() => {
-        this.$refs.echartRef[2].setOptions(hgxfx.xxghlist);
+        this.$refs.echartRef[2].setOptions({
+          data: hgxfx.xxghlist,
+          type: "vertical",
+        });
       });
     },
     // 加载GeoJSON数据
@@ -229,7 +241,12 @@ export default {
 
     .echart {
       width: 380px;
-      height: 150px;
+      height: 220px;
+    }
+    .echart0,
+    .echart2 {
+      width: 380px;
+      height: 370px;
     }
   }
 }