湖里大屏(首页概览)：质量问题 双环

src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue

@@ -4,89 +4,100 @@
 </template>
 
 <script>
-import echarts from 'echarts4'
+import echarts from "echarts4";
 export default {
   props: {
     title: {
       type: Object,
       default: () => ({
-        text: '',
-        subTitle: '',
-        x: '48%',
-        y: '36%'
+        text: "",
+        subTitle: "",
+        x: "48%",
+        y: "36%"
       })
     },
     data: {
       type: Array,
-      default: () => [{ value: 1, name: '' }]
+      default: () => [{ value: 1, name: "" }]
     },
     color: {
       type: Array,
-      default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
+      default: () => ["#3cabfd", "#57ec72", "#f294c6", "#f43a8d", "#6ee4f0"]
     }
   },
   data() {
-    return {}
+    return {};
   },
   mounted() {
-    this.initMyChart()
+    this.initMyChart();
   },
   methods: {
     initMyChart() {
-      const myChart = echarts.init(this.$refs.myChart)
+      const myChart = echarts.init(this.$refs.myChart);
       const option = {
         title: {
-          x: this.title.x || '29%',
-          y: this.title.y || '43%',
+          x: this.title.x || "29%",
+          y: this.title.y || "43%",
           show: true,
           text: this.title.text,
           subtext: this.title.subTitle,
-          textAlign: 'center',
+          textAlign: "center",
           textStyle: {
             fontSize: 20,
-            fontWeight: 'normal',
-            color: '#fff'
+            fontWeight: "normal",
+            color: "#fff"
           },
           subtextStyle: {
             fontSize: 16,
-            fontWeight: 'normal',
-            color: '#fff'
+            fontWeight: "normal",
+            color: "#fff"
           }
         },
         tooltip: {
-          trigger: 'item'
+          trigger: "item"
         },
         legend: {
-          type: 'scroll',
-          orient: 'vertical',
+          type: "scroll",
+          orient: "vertical",
           right: 50,
-          top: 'center',
+          top: "center",
           itemWidth: 10, // 设置宽度
           itemHeight: 10, // 设置高度
           selectedMode: true,
-          icon: 'circle',
+          icon: "circle",
           textStyle: {
-            color: '#ffffff',
+            color: "#ffffff",
             fontSize: 14
           }
         },
         color: this.color,
         series: [
           {
-            type: 'pie',
-            radius: ['50%', '65%'],
-            center: ['30%', '50%'],
+            type: "pie",
+            radius: ["30%", "25%"],
+            center: ["30%", "50%"],
+            labelLine: {
+              show: false
+            },
+            // x:'-20%',
+            color: ["#07162b", "#244e92", "#07162b", "#244e92"],
+            data: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }]
+          },
+          {
+            type: "pie",
+            radius: ["50%", "65%"],
+            center: ["30%", "50%"],
             avoidLabelOverlap: true,
             label: {
               show: false,
-              position: 'center'
+              position: "center"
             },
             emphasis: {
               label: {
                 show: false,
-                fontSize: '20',
-                color: '#fff',
-                fontWeight: 'bold'
+                fontSize: "20",
+                color: "#fff",
+                fontWeight: "bold"
               },
               scaleSize: 12
             },
@@ -96,12 +107,12 @@ export default {
             data: this.data
           }
         ]
-      }
+      };
 
-      myChart.setOption(option)
+      myChart.setOption(option);
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>