优化包装线条看板页面

src/views/kanban/Packagingline/index2.vue

@@ -463,7 +463,7 @@ export default {
             });
             _this.initChart2();
           }else{
-            _this.initChart2();
+            _this.initChart3();
           }
           
         }
@@ -839,6 +839,144 @@ export default {
       };
       myChart5.setOption(option5);
     },
+    initChart3() {
+      const _this = this;
+      var data5 = this.piedata;
+      console.log(data5);
+      var myChart5 = echarts.init(document.querySelector("#echart5"));
+      
+      var option5 = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        color: ["#00E7E5", "#1DBEFF"],
+        legend: {
+          left: "left",
+          orient: "vertical",
+          bottom: 10,
+          textStyle: {
+            color: "black",
+            padding: [5, 5, 5, -50],
+            fontWeight: 600,
+          },
+          itemWidth: 50,
+          itemHeight: 22,
+        },
+        series: [
+          {
+            radius: 120,
+            name: "巡检",
+            type: "pie",
+            labelLine: {
+              length: 40,
+              length2: 85,
+            },
+            itemStyle: {
+              borderWidth: 1,
+              shadowBlur: 20,
+              shadowOffsetY: 5,
+            },
+            center: ["50%", "55%"],
+            avoidLabelOverlap: true,
+          
+            data: [
+              {
+                value:
+                  data5[0] && data5[0].name == "合格" ? data5[0].value : 0,
+                name:
+                  data5[0] && data5[0].name == "合格" ? data5[0].name : "合格",
+                selected: true,
+                itemStyle: {
+                  color: "#129E92",
+                  borderColor: "#3FFFE2",
+                  shadowColor: "rgba(63, 255, 226, 0.5)",
+                },
+                labelLine: {
+                  lineStyle: {
+                    color: "#00EAE8",
+                  },
+                },
+                label: {
+                  formatter: "{e|}\n{a|}{b|{c}%}{c|}",
+                  rich: {
+                    a: {
+                      padding: -33,
+                    },
+                    c: {
+                      padding: [5, 0],
+                      lineHeight: 60,
+                      verticalAlign: "top",
+                      backgroundColor: "#00EAE8",
+                    },
+                    b: {
+                      color: "#00E7E5",
+                      backgroundColor: "rgba(63, 255, 226, 0.2)",
+                      height: 19,
+                      width: 40,
+                      borderRadius: 0,
+                      padding: [5, 25],
+                      verticalAlign: "top",
+                    },
+                    e: {
+                      padding: -10,
+                    },
+                  },
+                },
+              },
+              {
+                value:
+                  data5[1] && data5[1].name == "不合格" ? data5[1].value : 0,
+                name:
+                  data5[1] && data5[1].name == "不合格"
+                    ? data5[1].name
+                    : "不合格",
+                itemStyle: {
+                  color: "#105BA4",
+                  borderColor: "#31B4FF",
+                  shadowColor: "rgba(49, 180, 255, 0.8)",
+                },
+                labelLine: {
+                  lineStyle: {
+                    color: "#07D2FF",
+                  },
+                },
+                label: {
+                  
+                  formatter: "{e|}\n{c|}{b|{c}%}{a|}",
+                  rich: {
+                    c: {
+             
+                      padding: [5, 0],
+                      lineHeight: 60,
+                      verticalAlign: "top",
+                      backgroundColor: "#07D2FF",
+                    },
+                    a: {
+                      padding: -33,
+                    },
+                    b: {
+                      color: "#1DBEFF",
+                      backgroundColor: "rgba(49, 180, 255, 0.2)",
+                      height: 19,
+                      width: 20,
+                      borderRadius: 0,
+                      padding: [5, 25],
+                      align: "right",
+                      verticalAlign: "top",
+                    },
+                    e: {
+                      padding: -10,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      };
+      myChart5.setOption(option5);
+    },
     //左侧第一个选择类型下拉框 回调函数
   },
 };