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;