湖里大屏：回滚 jChart/pie/JProblemChart.vue 组件代码

src/views/projectAdmin/dataBoard/projectHuScreen/digitalSite/leftCenter.vue

@@ -1,42 +1,42 @@
 <template>
-<!-- 人员概览 -->
+  <Card :title="title">
-<div class="container">
+    <JProblemChart
-    <div class="titleTxt">{{ title }}</div>
+      :title="{ text: 654, subTitle: '本周总任务', y: '35%' }"
-
+      :color="['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']"
-</div>
+      :data="data"
+      :centerPie="centerPie"
+    />
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
+import JProblemChart from '../jChart/pie/JProblemChart.vue'
 export default {
-
+  components: { Card, JProblemChart },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
   data() {
     return {
-
+      data: [
-    };
+        { value: 45, name: '未开始' },
-  },
+        { value: 5, name: '未开始延期' },
-
+        { value: 15, name: '进行中' },
-
+        { value: 10, name: '执行中延期' },
+        { value: 45, name: '完成' }
+      ],
+      centerPie: {
+        color: ['#0B1B35', '#244D8F'],
+        radius: ['10%', '12%'],
+        data: [30, 40, 30, 40]
+      }
+    }
+  }
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-

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

@@ -23,10 +23,6 @@ export default {
     color: {
       type: Array,
       default: () => ['#3cabfd', '#57ec72', '#f294c6', '#f43a8d', '#6ee4f0']
-    },
-    centerPie: {
-      type: Object,
-      default: () => null
     }
   },
   data() {
@@ -38,35 +34,6 @@ export default {
   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)
-
       const option = {
         title: {
           x: this.title.x || '29%',
@@ -104,7 +71,31 @@ export default {
           }
         },
         color: this.color,
-        series: setSeries
+        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)