update

src/components/Common/TodayFaultTotal/index.jsx

@@ -4,6 +4,65 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 
+function FaultTotal(props) {
+  const [currentSelect, setCurrentSelect] = useState("日");
+  const isra = useSelector((state) => state.isra);
+
+  const currentStatistic =
+    currentSelect == "日"
+      ? isra.dayStatistic
+      : currentSelect == "周"
+      ? isra.weekStatistic
+      : currentSelect == "月"
+      ? isra.monthStatistic
+      : currentSelect == "月"
+      ? isra.yearStatistic
+      : [];
+
+  const series = preHandleStatisticData(currentStatistic, isra.checkType);
+  const options = getOptions(series, isra, currentStatistic);
+
+  function handleDateChange(v) {
+    setCurrentSelect(v);
+  }
+
+  // 根据使用的页面决定背景的大小
+  const bgSize =
+    props.page == "home" ? ["middle", "short"] : ["middle", "long"];
+
+  return (
+    <GraphBase
+      icon="chart"
+      title="产线缺陷统计"
+      dateOptions={["日", "周", "月", "年"]}
+      defaultSelect={currentSelect}
+      onDateChange={handleDateChange}
+      size={bgSize}
+      style={{ width: "600px" }}
+    >
+      <div className={cls.chart}>
+        {currentStatistic.length != 0 && (
+          <ReactECharts option={options} style={{ height: "100%" }} />
+        )}
+        {currentStatistic.length == 0 && (
+          <p
+            style={{
+              paddingTop: "72px",
+              color: "#fff6",
+              textAlign: "center",
+              fontSize: "24px",
+            }}
+          >
+            暂无数据
+          </p>
+        )}
+      </div>
+    </GraphBase>
+  );
+}
+
+export default FaultTotal;
+
 function preHandleStatisticData(data, legend) {
   const obj = {};
   data.forEach((item) => {
@@ -28,7 +87,15 @@ function preHandleStatisticData(data, legend) {
 
   legend.forEach((item, index) => {
     series[index].name = item;
-    data.forEach((d) => {
+    data.forEach((d, index) => {
+      if (index == 0) {
+        series[index].label = {
+          show: true,
+          position: "top",
+          distance: 10,
+          color: "#fffc",
+        };
+      }
       series[index].data.push(obj[d.name][item] || 0);
     });
   });
@@ -57,7 +124,7 @@ function getOptions(series, isra, currentStatistic) {
       type: "category",
       data: currentStatistic.map((item) => item.name),
       axisLabel: {
-        color: "#fff",
+        color: "#fffc",
         fontSize: 12,
       },
       axisTick: { show: false },
@@ -96,65 +163,11 @@ function getOptions(series, isra, currentStatistic) {
     series,
     tooltip: {
       trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
     },
   };
 }
-
-function FaultTotal(props) {
-  const [currentSelect, setCurrentSelect] = useState("日");
-  const isra = useSelector((state) => state.isra);
-
-  const currentStatistic =
-    currentSelect == "日"
-      ? isra.dayStatistic
-      : currentSelect == "周"
-      ? isra.weekStatistic
-      : currentSelect == "月"
-      ? isra.monthStatistic
-      : currentSelect == "月"
-      ? isra.yearStatistic
-      : [];
-
-  const series = preHandleStatisticData(currentStatistic, isra.checkType);
-  const options = getOptions(series, isra, currentStatistic);
-
-  function handleDateChange(v) {
-    setCurrentSelect(v);
-  }
-
-  // 根据使用的页面决定背景的大小
-  const bgSize =
-    props.page == "home" ? ["middle", "short"] : ["middle", "long"];
-
-  return (
-    <GraphBase
-      icon="battery"
-      title="产线缺陷统计"
-      dateOptions={["日", "周", "月", "年"]}
-      defaultSelect={currentSelect}
-      onDateChange={handleDateChange}
-      size={bgSize}
-      style={{ width: "600px" }}
-    >
-      <div className={cls.chart}>
-        {currentStatistic.length != 0 && (
-          <ReactECharts option={options} style={{ height: "100%" }} />
-        )}
-        {currentStatistic.length == 0 && (
-          <p
-            style={{
-              paddingTop: "72px",
-              color: "#fff6",
-              textAlign: "center",
-              fontSize: "24px",
-            }}
-          >
-            暂无数据
-          </p>
-        )}
-      </div>
-    </GraphBase>
-  );
-}
-
-export default FaultTotal;