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; }); }); 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: '' }, }; }