质检首页 不良类型占比 数据更改

src/views/home/data.js

@@ -180,6 +180,57 @@ export const preOption = (
   };
 };
 
+export const preOptions = (
+  data,
+  radius = ['45%', '60%'],
+  labelLineShow = true,
+  labelPosition = 'outside'
+) => {
+  return {
+    color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
+    tooltip: {
+      formatter: function (params) {
+        return `${params.name}<br/>数量: ${params.value}<br/>占比: ${params.percent}%`;
+      },
+      // formatter: '{d}%',
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      left: '10%',
+      top: '25%',
+      itemGap: window.innerHeight * 0.018,
+      textStyle: {
+        fontSize: window.innerHeight * 0.014
+      }
+    },
+    series: [
+      {
+        center: ['60%', '50%'],
+        label: {
+          position: labelPosition,
+          show: true,
+          formatter: '{c}',
+          fontSize: window.innerHeight * 0.014
+          // color:"#fff"
+        },
+        labelLine: {
+          show: labelLineShow
+        },
+        type: 'pie',
+        radius,
+        itemStyle: {
+          borderWidth: 0,
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        },
+        data
+      }
+    ]
+  };
+};
+
 export const lineOption = (data, type) => {
   console.log(getDatesInMonth(), 'getDatesInMonth');
 

src/views/home/index.vue

@@ -99,7 +99,7 @@
           <div slot="header" class="clearfix">
             <span>不良类型占比</span>
           </div>
-          <v-chart ref="pieRef4" style="height: 100%" :option="preOption" />
+          <v-chart ref="pieRef4" style="height: 100%" :option="preOptions" />
         </el-card>
       </el-col>
     </el-row>
@@ -119,7 +119,8 @@
     unacceptedProduct,
     lineOption,
     preOption,
-    barOption
+    barOption,
+    preOptions
   } from './data';
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
@@ -157,6 +158,7 @@
         preOption: {},
         barOption: {},
         lineOption: {},
+        preOptions:{},
         form: {
           finishTime: '',
           timeType: '1'
@@ -195,7 +197,6 @@
       },
       async queryFactory() {
         const data = await queryFactory();
-        console.log(data, 'data ===');
         this.factoryQualifiedOption = preOption(
           data.map((item) => {
             return { value: item.qualificationRate, name: item.factoryName };
@@ -214,7 +215,7 @@
             name: el.categoryLevelClassName
           };
         });
-        this.preOption = preOption(list);
+        this.preOptions = preOptions(list);
         console.log(res, 'res ----');
       },
       async queryTeam() {