217 lines
4.3 KiB
JavaScript
217 lines
4.3 KiB
JavaScript
import React, {
|
|
useRef,
|
|
useEffect,
|
|
useState,
|
|
useMemo,
|
|
useCallback,
|
|
} from "react";
|
|
import dynamic from "next/dynamic";
|
|
const Line = dynamic(
|
|
() => import("@ant-design/charts").then(({ Line }) => Line),
|
|
{ ssr: false }
|
|
);
|
|
|
|
// import { Line } from '@ant-design/charts'
|
|
const DemoLine = ({
|
|
dataSource,
|
|
UCL,
|
|
LCL,
|
|
AVER,
|
|
legend,
|
|
USL,
|
|
LSL,
|
|
maxz,
|
|
minz,
|
|
}) => {
|
|
const data = dataSource;
|
|
const line = useRef();
|
|
const name = data?.map((x) => x.name);
|
|
let isX = false;
|
|
if (USL && LSL) {
|
|
isX = true;
|
|
}
|
|
let maxn = useMemo(() => {
|
|
let max = Math.max.apply(
|
|
null,
|
|
data?.map((x) => {
|
|
if (x?.value) {
|
|
return x.value;
|
|
}
|
|
return 0;
|
|
})
|
|
);
|
|
let tmparr = [];
|
|
tmparr.push(UCL, LCL, AVER);
|
|
if (isX) {
|
|
tmparr.push(USL, LSL);
|
|
}
|
|
if (!isNaN(max)) {
|
|
tmparr.push(max);
|
|
}
|
|
let maxnew = Math.max.apply(null, tmparr);
|
|
|
|
return maxnew;
|
|
}, [data]);
|
|
const config = {
|
|
data,
|
|
slider: {},
|
|
color: "#8AA1C9",
|
|
xField: "x",
|
|
yField: "value",
|
|
xAxis: {
|
|
animation: false,
|
|
},
|
|
yAxis: {
|
|
tickCount: 7,
|
|
nice: true,
|
|
animation: false,
|
|
max: maxz,
|
|
min: minz,
|
|
line: {
|
|
style: {
|
|
stroke: "#aaa",
|
|
},
|
|
},
|
|
tickLine: {},
|
|
},
|
|
point: {
|
|
style: {
|
|
r: 2.5,
|
|
},
|
|
},
|
|
smooth: true,
|
|
tooltip: {
|
|
showCrosshairs: true,
|
|
shared: true,
|
|
},
|
|
seriesField: "name",
|
|
annotations: [
|
|
// {
|
|
// type: "text",
|
|
// position: ["min", UCL],
|
|
// content: "UCL",
|
|
// offsetY: -4,
|
|
// style: {
|
|
// textBaseline: "bottom",
|
|
// },
|
|
// },
|
|
// {
|
|
// type: "text",
|
|
// position: ["min", LCL],
|
|
// content: "LCL",
|
|
// offsetY: -4,
|
|
// style: {
|
|
// textBaseline: "bottom",
|
|
// },
|
|
// },
|
|
// {
|
|
// type: "text",
|
|
// position: ["min", AVER],
|
|
// content: "AVER",
|
|
// offsetY: -4,
|
|
// style: {
|
|
// textBaseline: "bottom",
|
|
// },
|
|
// },
|
|
{
|
|
type: "line",
|
|
start: ["min", LCL],
|
|
end: ["max", LCL],
|
|
style: {
|
|
stroke: "#FF0000",
|
|
fill: "#FF0000",
|
|
// lineDash: [6, 3],
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
|
|
{
|
|
type: "line",
|
|
start: ["min", UCL],
|
|
end: ["max", UCL],
|
|
style: {
|
|
stroke: "#FF0000",
|
|
fill: "#FF0000",
|
|
// lineDash: [6, 3],
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
{
|
|
type: "line",
|
|
start: ["min", AVER],
|
|
end: ["max", AVER],
|
|
style: {
|
|
stroke: "#80FC5E",
|
|
fill: "#80FC5E",
|
|
lineDash: [6, 3],
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
],
|
|
legend: legend,
|
|
};
|
|
|
|
dataSource
|
|
?.filter((a) => a?.controlRefList?.length > 0)
|
|
.forEach((b) => {
|
|
const _controlPerf = "";
|
|
if (legend.items[0].name === "极差值") {
|
|
if (b.controlRefList?.indexOf("I") > -1) {
|
|
_controlPerf = "I";
|
|
}
|
|
} else {
|
|
_controlPerf = b.controlRefList?.filter((z) => z !== "I").join(",");
|
|
}
|
|
if (_controlPerf !== "") {
|
|
const tmplateann = {
|
|
type: "text",
|
|
content: _controlPerf,
|
|
position: (xScale, yScale) => {
|
|
return [
|
|
`${xScale.scale(b.x) * 100}%`,
|
|
b.value>0? `${(1 - yScale.value.scale(b.value)) * 50}%` : `${(1 - yScale.value.scale(b.value)) * 94}%`,
|
|
];
|
|
},
|
|
style: {
|
|
textAlign: "center",
|
|
fill: "rgba(0,0,0,0.85)",
|
|
},
|
|
};
|
|
config.annotations.push(tmplateann);
|
|
}
|
|
});
|
|
|
|
let usllsl = [
|
|
{
|
|
type: "line",
|
|
start: ["min", USL],
|
|
end: ["max", USL],
|
|
style: {
|
|
stroke: "#FF0000",
|
|
fill: "#FF0000",
|
|
lineDash: [6, 3],
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
{
|
|
type: "line",
|
|
start: ["min", LSL],
|
|
end: ["max", LSL],
|
|
style: {
|
|
stroke: "#FF0000",
|
|
fill: "#FF0000",
|
|
lineDash: [6, 3],
|
|
lineWidth: 2,
|
|
},
|
|
},
|
|
];
|
|
if (isX) {
|
|
usllsl.forEach((item) => {
|
|
config.annotations.push(item);
|
|
});
|
|
}
|
|
return <Line {...config} height={250} />;
|
|
};
|
|
|
|
export default DemoLine;
|