update 质量-产线缺陷分析

src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue

@@ -13,6 +13,10 @@ export default {
     id: {
       type: String,
       default: 'default-fault-analysis-id'
+    },
+    dataList: {
+      type: Array,
+      required: true
     }
   },
   data() {
@@ -98,15 +102,6 @@ export default {
       }
     ]
 
-    const demoData = [
-      { value: 107, name: '破片' },
-      { value: 146, name: '崩边' },
-      { value: 43, name: '脏污' },
-      { value: 83, name: '划擦伤' },
-      { value: 20, name: '崩孔' },
-      { value: 21, name: '其他' }
-    ]
-
     return {
       chart: null,
       // default configs
@@ -115,7 +110,7 @@ export default {
           textAlign: 'center',
           left: '69%',
           top: '46%',
-          text: demoData.reduce((prev, curr) => prev + curr.value, 0),
+          text: '',
           textStyle: {
             color: '#fff',
             fontSize: 16,
@@ -137,9 +132,8 @@ export default {
           icon: 'none',
           itemGap: 5,
           itemWidth: 10,
-          formatter: function(name) {
-            // test data - dynamic
-            const testData = demoData
+          formatter: name => {
+            const testData = this.dataList
 
             let pieLegendVale = {}
             testData.filter((item, index) => {
@@ -262,12 +256,21 @@ export default {
                 return colorGradient
               }
             },
-            data: demoData
+            data: this.dataList
           }
         ]
       }
     }
   },
+
+  watch: {
+    dataList: function(val) {
+      if (val && Array.isArray(val) && val.length) {
+        this.applyChartOption(val)
+      }
+    }
+  },
+
   mounted() {
     window.addEventListener('resize', () => {
       if (this.chart) {
@@ -292,17 +295,15 @@ export default {
       const beilv = document.documentElement.style.getPropertyValue('--beilv')
       return beilv * baseSize
     },
-    // calcRate(baseRate) {
-    //   const beilv = document.documentElement.style.getPropertyValue('--beilv')
-    //   return baseRate * beilv
-    // },
-    applyChartOption() {
+
+    applyChartOption(datalist) {
       const fs5 = this.calcFontsize(5 /** px*/)
       const fs10 = this.calcFontsize(10 /** px*/)
       const fs14 = this.calcFontsize(14 /** px*/)
       const fs18 = this.calcFontsize(18 /** px*/)
       const legendTopRate = this.calcFontsize(28 /** % */)
 
+      this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value, 0)
       this.configs.title.textStyle.fontSize = fs18
       this.configs.title.subtextStyle.fontSize = fs14
 
@@ -340,7 +341,7 @@ export default {
       this.configs.series[0].label.rich.fourth.fontSize = fs10
       this.configs.series[0].label.rich.fifth.fontSize = fs10
       this.configs.series[0].label.rich.sixth.fontSize = fs10
-
+      if (datalist) this.configs.series[0].data = datalist
       this.chart.setOption(this.configs)
     }
   }