feat: 结果页

src/components/Radar/index.tsx

@@ -1,26 +1,46 @@
 import Taro, { useReady } from "@tarojs/taro";
 import { View, Canvas, Button } from "@tarojs/components";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
-const RadarChart: React.FC = () => {
-  const labels = [
-    "正手球质",
-    "正手控制",
-    "反手球质",
-    "反手控制",
-    "底线相持",
-    "场地覆盖",
-    "发球接发",
-    "接随机球",
-    "战术设计",
-  ];
-  const values = [50, 75, 60, 20, 40, 70, 65, 35, 75];
+const RadarChart: React.FC = (props) => {
+  const { data } = props
+
+  const renderFnRef = useRef()
+  // const labels = [
+  //   "正手球质",
+  //   "正手控制",
+  //   "反手球质",
+  //   "反手控制",
+  //   "底线相持",
+  //   "场地覆盖",
+  //   "发球接发",
+  //   "接随机球",
+  //   "战术设计",
+  // ];
+  // const values = [50, 75, 60, 20, 40, 70, 65, 35, 75];
   const maxValue = 100;
   const levels = 4;
   const radius = 100;
   const center = { x: 160, y: 160 };
 
+  useEffect(() => {
+    if (data.length > 0) {
+      const {texts, vals} = data.reduce((res, item) => {
+        const [text, val] = item
+        return {
+          texts: [...res.texts, text],
+          vals: [...res.vals, val]
+        }
+      }, { texts: [], vals: [] })
+      renderFnRef.current && renderFnRef.current(texts, vals)
+    }
+  }, [data])
+
   useReady(() => {
+    renderFnRef.current = renderCanvas
+  });
+
+  function renderCanvas (labels, values) {
     const query = Taro.createSelectorQuery();
     query
       .select("#radarCanvas")
@@ -93,10 +113,10 @@ const RadarChart: React.FC = () => {
         ctx.fillStyle = "rgba(0,200,180,0.3)";
         ctx.fill();
         ctx.strokeStyle = "#00c8b4";
-        ctx.lineWidth = 4;
+        ctx.lineWidth = 3;
         ctx.stroke();
       });
-  });
+  }
 
 
   // 保存为图片