xuchang-new/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx

import GraphBase from "../../../Common/GraphBase";
import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useState } from "react";
import * as echarts from "echarts";
import dayjs from "dayjs";

function ElecCost(props) {
  const elecTrend = useSelector((state) => state.energy.trend.elec);
  const [period, setPeriod] = useState("周");
  const [timestr, setTimestr] = useState(
    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
      " - " +
      dayjs().subtract(1, "day").format("YYYY.MM.DD")
  );
  const options = getOptions(
    { 周: "week", 月: "month", 年: "year" }[period],
    elecTrend ?? { week: [], month: [], year: [] }
  );

  function handleSwitch(v) {
    // console.log('switched ', v);
  }

  function handleDateChange(value) {
    setPeriod(value);
    setTimestr(
      {
        年:
          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
          "29 - " +
          dayjs().endOf("year").format("YYYY.MM.") +
          "28",
        周:
          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
          " - " +
          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
        月:
          dayjs().subtract(1, "month").format("YYYY.MM.") +
          "29 - " +
          dayjs().format("YYYY.MM.") +
          "28",
      }[value]
    );
  }
  return (
    <GraphBase
      icon="battery"
      title="电耗能"
      desc={`能耗趋势图  ${timestr}`}
      switchOptions={false}
      onSwitch={handleSwitch}
      defaultSelect={period}
      dateOptions={["周", "月", "年"]}
      //   legend={["总量"]}
      onDateChange={handleDateChange}
      size={["long", "middle"]}
    >
      {/* real echarts here */}
      {options && (
        <ReactECharts
          key={Math.random()}
          option={options}
          // option={getOptions([[112, 73, 79, 82, 30, 105, 87]], "氧气")}
          style={{ height: "100%" }}
        />
      )}
      {!options && (
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "48px",
          }}
        >
          暂无数据
        </p>
      )}
      {/* real table data here  */}
    </GraphBase>
  );
}

export default ElecCost;

function getOptions(period, trend) {
  if (trend[period].length === 0) return null;
  const colors = [
    "#FFD160",
    "#12FFF5",
    "#2760FF",
    "#E80091",
    "#8064ff",
    "#ff8a3b",
    "#8cd26d",
    "#2aa1ff",
  ];
  return {
    color: colors,
    grid: { top: 40, right: 12, bottom: 20, left: 80 },
    legend: {
      show: false,
      icon: "roundRect",
      top: 10,
      right: 10,
      padding: 0,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 3,
      height: 8,
      textStyle: {
        color: "#DFF1FE",
        fontSize: 12,
      },
    },
    xAxis: {
      type: "category",
      data: trend[period].map((item) => item.time),
      // data: Array(7)
      // 	.fill(1)
      // 	.map((_, index) => {
      // 		const today = new Date();
      // 		const dtimestamp = today - index * 24 * 60 * 60 * 1000;
      // 		return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
      // 			dtimestamp,
      // 		).getDate()}`;
      // 	})
      // 	.reverse(),
      axisLabel: {
        color: "#fff",
        fontSize: 14,
      },
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          width: 1,
          color: "#213259",
        },
      },
    },
    yAxis: {
      name: "单位/kWh",
      nameTextStyle: {
        color: "#fff",
        fontSize: 16,
        align: "right",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
        fontSize: 14,
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#213259",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#213259a0",
        },
      },
    },
    series: {
      // !(item.value == null || isNaN(+item.value)) ? (+item.value).toFixed(2) : null
      data: trend[period].map((item) =>
        item.qty == null || isNaN(+item.qty) ? null : (+item.qty).toFixed(2)
      ),
      type: "line",
      symbol: "circle",
      symbolSize: 6,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colors[0] + "40" },
          { offset: 0.5, color: colors[0] + "20" },
          { offset: 1, color: colors[0] + "00" },
        ]),
      },
    },
    // series: seriesData.map((arr, index) => ({
    // 	name: index + 1 + '#' + name,
    // 	data: arr,
    // 	type: 'line',
    // 	areaStyle: {
    // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    // 			{ offset: 0, color: colors[index] + '40' },
    // 			{ offset: 0.5, color: colors[index] + '20' },
    // 			{ offset: 1, color: colors[index] + '00' },
    // 		]),
    // 	},
    // })),
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      className: "xc-chart-tooltip",
    },
  };
}