slibra-module-web/src/views/xlht/config.js

const formatTofixed = val => val != 0 && !val ? '' : val.toFixed(2);

export const columns = [
  {
    title: "检测时间",
    key: "time",
    width: 180,
    fixed: "left",
  },
  {
    title: "进水总流量",
    key: "scJsZll",
    width: 100,
    render: ({ scJsZll }) => formatTofixed(scJsZll)
  },
  {
    title: "进水COD",
    key: "scJsCod",
    width: 100,
    render: ({ scJsCod }) => formatTofixed(scJsCod)
  },
  {
    title: "北池好氧硝酸盐",
    key: "jqr1HyXiaodan",
    width: 120,
    render: ({ scJsZll }) => formatTofixed(scJsZll)
  },
  {
    title: "南池好氧硝酸盐",
    key: "jqr2HyXiaodan",
    width: 120,
    render: ({ jqr2HyXiaodan }) => formatTofixed(jqr2HyXiaodan)
  },
  {
    title: "北池缺氧氨氮",
    key: "jqr1QyAndan",
    width: 120,
    render: ({ jqr1QyAndan }) => formatTofixed(jqr1QyAndan)
  },
  {
    title: "南池缺氧氨氮",
    key: "jqr2QyAndan",
    width: 120,
    render: ({ jqr2QyAndan }) => formatTofixed(jqr2QyAndan)
  },
  {
    title: "北池缺氧硝酸盐",
    key: "jqr1QyXiaodan",
    width: 120,
    render: ({ jqr1QyXiaodan }) => formatTofixed(jqr1QyXiaodan)
  },
  {
    title: "南池缺氧硝酸盐",
    key: "jqr2QyXiaodan",
    width: 120,
    render: ({ jqr2QyXiaodan }) => formatTofixed(jqr2QyXiaodan)
  },
];

export const getEchartLineOptions = ({ xAxisData, seriesData }) => {
  const colorList = [
    "#FF6737",
    "#00AB84",
    "#85E822",
    "#21CCFF",
    "#FFE122",
    "#313CA9",
    "#F023FF",
    "#FFD22E",
    "#2181FF",
    "#F22",
    "#37DDE0",
  ];

  const series = seriesData.map((item, index) => {
    return {
      name: item.name,
      type: "line",
      smooth: true,
      showSymbol: false,
      itemStyle: {
        opacity: 0.8,
        color: colorList[index],
      },
      // tooltip: {
      //   valueFormatter: function (value) {
      //     return value;
      //   },
      // },
      data: item.data,
    };
  });

  const option = {
    grid: {
      top: 80,
      bottom: 50,
      left: 40,
      right: 30,
    },
    tooltip: {
      trigger: "axis",
      // confine: true,
      appendToBody: true,
    },
    title: {
      show: !xAxisData.length,
      text: '暂无数据',
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: 14,
        fontWeight: 'normal',
      }
    },
    legend: [
      {
        show: !!xAxisData.length,
        data: ["进水总氮", "北池好氧硝酸盐", "北池缺氧氨氮", "北池缺氧硝酸盐"],
        top: 10,
        left: 10,
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(0,0,0,0.65)",
        },
      },
      {
        show: !!xAxisData.length,
        data: ["进水COD", "南池好氧硝酸盐", "南池缺氧氨氮", "南池缺氧硝酸盐"],
        top: 35,
        left: 10,
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        icon: "rect",
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(0,0,0,0.65)",
        },
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisData || [],
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#DAE0E1",
          },
        },
        axisLabel: {
          align: "center",
          color: "#828282",
          margin: 10,
        },
      },
    ],
    yAxis: [
      {
        scale: false,
        minInterval: 1,
        backgroundColor: "#FFFFFF",
        splitLine: {
          lineStyle: {
            color: ["#DAE0E1"],
            shadowColor: "#DAE0E1",
            shadowBlur: 1,
            opacity: 1,
            width: 1,
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          align: "center",
          color: "#828282",
          margin: 20,
        },
      },
    ],
    series
  };
  return option;
};