饼图改为环形图 显示有效利用率

src/pages/PurchaseAdmin/PurchaseList/Report/Department.js

@@ -139,8 +139,8 @@ function Department(props) {
       }
     });
   };
-  // const showUserModal = item => {
-  const showDepCompare = item => {
+  const showUserModal = item => {
+  // const showDepCompare = item => {
     const { s_time, e_time } = filterRef.current;
     setModalFilter({
       s_time: s_time,
@@ -155,11 +155,22 @@ function Department(props) {
       tooltip: {
         trigger: 'item',
       },
+      graphic: {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `有效利用率\n${
+            current.usage_percent ? (current.usage_percent * 100).toFixed(2) : '-'
+          }%`,
+          textAlign: 'center',
+        },
+      },
       series: [
         {
           type: 'pie',
-          radius: '70%',
-          data: current,
+          radius: ['40%', '70%'],
+          data: current.data,
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
@@ -183,7 +194,16 @@ function Department(props) {
     ];
     // 过滤为0的值
     data = data.filter(item => item.value);
-    setCurrent(data);
+    if (data.length > 0) {
+      data.push({
+        value: item.type_lost_cnt,
+        name: '漏填工时',
+        itemStyle: { color: 'transparent' },
+      });
+      setCurrent({ data, usage_percent: item.usage_percent });
+    } else {
+      setCurrent(null);
+    }
   };
 
   const renderDepSelect = () => {
@@ -251,10 +271,10 @@ function Department(props) {
             title={renderDepSelect()}
             style={{ display: 'block', marginLeft: 20 }}
           >
-            {!current?.length && <Empty style={{ width: 400 }} />}
+            {!current && <Empty style={{ width: 400 }} />}
             <div
               id="chart"
-              style={{ width: 400, height: 340, display: current?.length > 0 ? 'block' : 'none' }}
+              style={{ width: 400, height: 340, display: current ? 'block' : 'none' }}
             ></div>
           </Card>
         </Affix>