xuchang-new/src/components/Common/TodayFaultTotal/index.jsx

import cls from "./index.module.css";
import GraphBase from "../GraphBase";
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) {
  console.table(data);
  const obj = {};
  data.forEach((item) => {
    obj[item.name] = {};
    item.data.forEach((d) => {
      obj[item.name][d.checkType] = d.checkNum;
    });
  });

  console.log("obj", obj)
  const series = Array(legend.length)
    .fill(1)
    .map((_) => ({
      name: "",
      type: "bar",
      stack: "true",
      barWidth: 12,
      emphasis: {
        focus: "series",
      },
      data: [],
    }));

  legend.forEach((item, index) => {
    series[index].name = item;
    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);
    });
  });

  return series;
}

function getOptions(series, isra, currentStatistic) {
  return {
    color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
    grid: { top: 42, right: 12, bottom: 20, left: 48 },
    legend: {
      top: 10,
      padding: 5,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 12,
      height: 12,
      textStyle: {
        color: "#DFF1FE",
        fontSize: 12,
      },
      data: isra.checkType,
    },
    xAxis: {
      type: "category",
      data: currentStatistic.map((item) => item.name),
      axisLabel: {
        color: "#fffc",
        fontSize: 12,
      },
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          width: 1,
          color: "#213259",
        },
      },
    },
    yAxis: {
      name: "单位/个",
      nameTextStyle: {
        color: "#fff",
        fontSize: 10,
        align: "right",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
        fontSize: 12,
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#213259",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#213259a0",
        },
      },
    },
    series,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      className: "xc-chart-tooltip",
      // backgroundColor: ''
    },
  };
}