FIX:解决了不知道什么问题的问题，echarts不简单！

src/pages/edit/components/BugGuideTree/index.jsx

@@ -10,7 +10,7 @@ import { recurrent, severity, bug_categories } from '../Step2/const';
 import * as echarts from 'echarts';
 
 //这里只能放在 pages/edit/assets中作为路径显示
-const imgArr = ['noArrived.png', 'yellowFlag.png', 'redFlag.png', 'recPage.png']
+const imgArr = ['noArrived.png', 'yellowFlag.png', 'redFlag.png', 'recPage.png'];
 
 const BugGuideTree = (props) => {
   const { dispatch, pathInfo, recommendPath, bugRecommendList, categories } = props;
@@ -18,7 +18,7 @@ const BugGuideTree = (props) => {
   const userPath = pathInfo.self;  //我的bug
   const { page, info } = recommendPath;
 
-  let jsonPath={};
+  let jsonPath = {};
   let timer = null;
 
   const [showTable, setShowTable] = useState(true);
@@ -61,6 +61,7 @@ const BugGuideTree = (props) => {
       },
     },
   ];
+
   const handleClickTableRow = (item) => {
     dispatch({
       type: 'editReport/getBugDetail',
@@ -90,36 +91,46 @@ const BugGuideTree = (props) => {
   };
 
   const getHeight = (items) => {
-    items.forEach(item => {
-      if (item.children) {
-        getHeight(item.children);
-      } else {
-        setTreeHeightNum(treeHeightNum + 25);
-      }
-    });
+    if (items !== undefined) {
+      items.forEach(item => {
+        if (item.children) {
+          getHeight(item.children);
+        } else {
+          setTreeHeightNum(treeHeightNum + 25);
+        }
+      });
+    }
   };
 
-  const setRecPage = (page)=> {
-    let flag = 0;
-    let style;
-    timer = setInterval(() => {
-      if (flag === 1) {
-        style = 'image://' + require('../../assets/' + imgArr[0]);
-        flag = 0;
-      } else {
-        style = 'image://' + require('../../assets/' + imgArr[3]);
-        flag = 1;
+  const setRecPageFirst = () => {
+    timer = setTimeout(() => {
+      const dom = document.getElementById('myChart');
+      if(dom){
+        const myChart = echarts.init(dom);
+        let flag = 0;
+        let style;
+        if (flag === 1) {
+          style = 'image://' + require('../../assets/' + imgArr[0]);
+          flag = 0;
+        } else {
+          style = 'image://' + require('../../assets/' + imgArr[3]);
+          flag = 1;
+        }
+        initItemRecursionRecPage(jsonPath.children, page, style);
+        myChart.setOption({ series: [{ data: [jsonPath] }] });
       }
-      initItemRecursionRecPage(jsonPath.children, page, style);
-      const myChart = echarts.init(document.getElementById('myChart'));
-      // console.log(document.getElementById('myChart'))
-      myChart.setOption({series: [{data: [jsonPath]}]});
-    }, 2000);
-  }
+    }, 500);
+  };
 
+  const setRecPage = (page) => {
 
+    timer = setTimeout(() => {
 
-  const initItemRecursion = (items)=> {
+    }, 2000);
+  };
+
+
+  const initItemRecursion = (items) => {
     if (items !== undefined) {
       items.forEach(item => {
         item['value'] = 0;
@@ -148,12 +159,13 @@ const BugGuideTree = (props) => {
         }
       });
     }
-  }
+    initEcharts(info);
+  };
 
-  const initItemRecursionRecPage = (items, page, style)=> {
+  const initItemRecursionRecPage = (items, page, style) => {
     if (items !== undefined) {
       items.forEach(item => {
-        for (let j = 0; j < (page&&page.length) || 0; j++) {
+        for (let j = 0; j < (page && page.length) || 0; j++) {
           if (item.name === page[j]) {
             item['symbol'] = style;
           }
@@ -163,9 +175,9 @@ const BugGuideTree = (props) => {
         }
       });
     }
-  }
+  };
 
-  const initEcharts = ()=>{
+  const initEcharts = () => {
     let item_color = 'rgba(226,245,240,1)';
     let border_color = 'rgba(0,0,0,0.9)';
     let legendCategories = [
@@ -338,18 +350,18 @@ const BugGuideTree = (props) => {
         },
       ],
     };
+
     const chart = echarts.init(document.getElementById('myChart'));
     chart.setOption(option2);
-
-  }
+    setRecPageFirst();
+  };
 
   useEffect(() => {
     initChartData();
     initItemRecursion(jsonPath.children);
-    initEcharts(info);
-    setRecPage(page);
   }, [pathInfo.all,pathInfo.self,jsonPath.children,info,page]);
 
+
   useEffect(() => {
     if (JSON.stringify(currDetail) !== '{}') {
       setShowTable(false);

src/pages/edit/components/Step2/index.jsx

@@ -337,7 +337,7 @@ const Step2 = (props) => {
                     缺陷
                   </Button>
 
-                  <Button size="small" type="primary"
+                  <Button size="small"
                           className={styles.recommendBtn}
                           disabled={JSON.stringify(currentTestCaseRef.current) === "{}"}
                           onClick={() => handleClickRecommendBtn()}>
@@ -633,13 +633,14 @@ const Step2 = (props) => {
       {/*    <div id="forceChart"></div>*/}
       {/*  </div>*/}
       {/*</Modal>*/}
-      <Modal title="任务推荐" visible={showTaskRecommendModal} width={1000}
+      <Modal title="任务推荐" visible={showTaskRecommendModal}
+             destroyOnClose width={1000}
              onOk={() => setTaskRecommendModal(false)}
-             onCancel={() => setTaskRecommendModal(false)}
+             onCancel={() => {setTaskRecommendModal(false);}
+             }
              className="addModal">
         <div>
           <BugGuideTree />
-
         </div>
       </Modal>
     </div>