76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import ReactECharts from "echarts-for-react";
|
|
import TitleBox from "../../Component/TitleBox";
|
|
import { useAppSelector } from "../../../../store/hooks";
|
|
import { selectLineChart } from "../../../../store/HomePageSlice";
|
|
import getOptions from "../../Component/LineChartRedDob/chart.config";
|
|
import { generateTimeLabels } from "../../../../utils";
|
|
function Nitrogen() {
|
|
const data61 = useAppSelector(selectLineChart)['1#氮气流量'] || [];
|
|
const data62 = useAppSelector(selectLineChart)['2#氮气流量'] || [];
|
|
let xData: any = [];
|
|
let yName = "单位/m³";
|
|
let seriesData: any = [
|
|
{
|
|
name: "六线1",
|
|
data: [],
|
|
},
|
|
{
|
|
name: "六线2",
|
|
data: [],
|
|
}
|
|
];
|
|
if (data61.length !== 0) {
|
|
xData = generateTimeLabels(data61.length)
|
|
seriesData[0].data = data61
|
|
}else{
|
|
seriesData[0].data = [];
|
|
if (data62.length !== 0) {
|
|
xData = generateTimeLabels(data62.length)
|
|
}else{
|
|
xData = [];
|
|
}
|
|
}
|
|
if (data62.length !== 0) {
|
|
seriesData[1].data = data62
|
|
}else{
|
|
seriesData[1].data = [];
|
|
}
|
|
const options = getOptions(xData, seriesData, yName);
|
|
return (
|
|
<div className="center_down">
|
|
<TitleBox title="nitrogen" />
|
|
<div className="legend_right">
|
|
<span className="dot" style={{background: '#18C7F3'}}></span>
|
|
<span>六线1</span>
|
|
<span className="dot" style={{background: '#2665FE',marginLeft: '8px'}}></span>
|
|
<span>六线2</span>
|
|
{/* <span className="dot" style={{background: '#E718F3',marginLeft: '8px'}}></span>
|
|
<span>五线1</span>
|
|
<span className="dot" style={{background: '#F31868',marginLeft: '8px'}}></span>
|
|
<span>五线2</span> */}
|
|
</div>
|
|
{
|
|
options && (
|
|
<div className="chart_blur_bg">
|
|
<ReactECharts option={options} style={{ height: "100%" }} />
|
|
</div>
|
|
)
|
|
}
|
|
{!options && (
|
|
<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "72px",
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
export default Nitrogen;
|