智慧运营样式

src/pages/SmartReport/index.js

@@ -147,12 +147,7 @@ const SmartReport = () => {
   }, []);
 
   const initData = () => {
-    const legend = {
-      orient: 'vertical',
-      left: 'left',
-      top: 'center',
-    };
-    const eqOption = getPieOption(data.eqData, legend);
+    const eqOption = getPieOption(data.eqData, true);
     if (eqChartRef.current) eqChartRef.current.setOption(eqOption);
 
     const taskOption = getPieOption(data.taskData);
@@ -161,7 +156,7 @@ const SmartReport = () => {
     const workOption = getPieOption(data.workOrderData);
     if (workChartRef.current) workChartRef.current.setOption(workOption);
 
-    const workScoreOption = getPieOption(data.workScoreData, legend);
+    const workScoreOption = getPieOption(data.workScoreData, true);
     if (workScoreChartRef.current)
       workScoreChartRef.current.setOption(workScoreOption);
   };
@@ -467,7 +462,7 @@ const SmartReport = () => {
                   <div
                     ref={taskDomRef}
                     style={{
-                      height: '8rem',
+                      height: '4rem',
                       width: '100%',
                       marginTop: '0.2rem',
                     }}
@@ -478,7 +473,7 @@ const SmartReport = () => {
                   <div
                     ref={workDomRef}
                     style={{
-                      height: '8rem',
+                      height: '4rem',
                       width: '100%',
                       marginTop: '0.2rem',
                     }}
@@ -507,7 +502,7 @@ const SmartReport = () => {
   );
 };
 export default SmartReport;
-const getPieOption = (chartData, legend = {}) => {
+const getPieOption = (chartData, isLeft = false) => {
   const option = {
     color: [
       '#5470c6',
@@ -523,21 +518,27 @@ const getPieOption = (chartData, legend = {}) => {
     tooltip: {
       trigger: 'item',
     },
-    legend: {
-      orient: 'horizontal',
-      // left: 'left',
-      itemWidth: 10,
-      itemHeight: 8,
-      textStyle: {
-        color: '#000000',
-        fontSize: 12,
-      },
-      ...legend,
-    },
+    legend: isLeft
+      ? {
+          orient: 'vertical',
+          left: 'left',
+          top: 'center',
+        }
+      : {
+          orient: 'horizontal',
+          // left: 'left',
+          itemWidth: 10,
+          itemHeight: 8,
+          textStyle: {
+            color: '#000000',
+            fontSize: 12,
+          },
+        },
     series: [
       {
         type: 'pie',
-        radius: '60%',
+        top: isLeft ? 0 : '10%',
+        radius: isLeft ? '60%' : '50%',
         data: chartData,
         emphasis: {
           itemStyle: {