湖里大屏：扩展 jChart/pie/JProblemChart.vue 组件

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

@@ -4,7 +4,7 @@
 </template>
 
 <script>
-import echarts from "echarts4";
+import echarts from 'echarts4'
 export default {
   props: {
     title: {
@@ -24,18 +24,49 @@ export default {
       type: Array,
       default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
     },
+    centerPie: {
+      type: Object,
+      default: () => null
+    }
   },
   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 { data, centerPie } = this
+      const setSeries = ((data, centerPie) => {
+        const series = [
+          {
+            type: 'pie',
+            radius: ['50%', '65%'],
+            center: ['30%', '50%'],
+            avoidLabelOverlap: true,
+            label: { show: false },
+            emphasis: {
+              label: { show: false }
+            },
+            labelLine: { show: false },
+            data
+          }
+        ]
+        if (centerPie) {
+          series.push({
+            type: 'pie',
+            roseType: 'area',
+            label: { show: false },
+            color: centerPie.color,
+            radius: centerPie.radius,
+            data: centerPie.data
+          })
+        }
+        return series
+      })(data, centerPie)
+
       const option = {
         title: {
           x: this.title.x || '29%',
@@ -47,16 +78,16 @@ export default {
           textStyle: {
             fontSize: 20,
             fontWeight: 'normal',
-            color: '#fff',
+            color: '#fff'
           },
           subtextStyle: {
             fontSize: 16,
             fontWeight: 'normal',
             color: '#fff'
-          },
+          }
         },
         tooltip: {
-          trigger: "item",
+          trigger: 'item'
         },
         legend: {
           type: 'scroll',
@@ -69,41 +100,16 @@ export default {
           icon: 'circle',
           textStyle: {
             color: '#ffffff',
-            fontSize: 14,
+            fontSize: 14
           }
         },
         color: this.color,
-        series: [
+        series: setSeries
-          {
+      }
-            type: "pie",
-            radius: ["50%", "65%"],
-            center: ['30%', '50%'],
-            avoidLabelOverlap: true,
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: false,
-                fontSize: "20",
-                color: '#fff',
-                fontWeight: "bold",
-              },
-              scaleSize: 12,
-            },
-            labelLine: {
-              show: false,
-            },
-            data: this.data,
-          },
-        ],
-      };
-
-      myChart.setOption(option);
-    },
-  },
 
+      myChart.setOption(option)
+    }
+  }
 }
 </script>
 
@@ -112,5 +118,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-
 </style>