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

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

@@ -1,10 +1,10 @@
 <template>
-<!-- 质量问题 -->
-    <div class="myChart" ref="myChart" />
+  <!-- 质量问题 -->
+  <div class="myChart" ref="myChart" />
 </template>
 
 <script>
-import echarts from "echarts4";
+import echarts from 'echarts4'
 export default {
   props: {
     title: {
@@ -22,24 +22,55 @@ export default {
     },
     color: {
       type: Array,
-      default: () => ['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']
+      default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
     },
+    centerPie: {
+      type: Object,
+      default: () => null
+    }
   },
   data() {
-    return {
+    return {}
+  },
+  mounted() {
+    this.initMyChart()
+  },
+  methods: {
+    initMyChart() {
+      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)
 
-    };
-  },
-  mounted(){
-    this.initMyChart();
-  },
-  methods:{
-     initMyChart() {
-      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,
@@ -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,48 +100,22 @@ export default {
           icon: 'circle',
           textStyle: {
             color: '#ffffff',
-            fontSize: 14,
+            fontSize: 14
           }
         },
         color: this.color,
-        series: [
-          {
-            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);
-    },
-  },
+        series: setSeries
+      }
 
+      myChart.setOption(option)
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-  .myChart {
-    width: 100%;
-    height: 100%;
-  }
-
-</style>
+.myChart {
+  width: 100%;
+  height: 100%;
+}
+</style>