BigScreen/src/components/Sewage/EnergyConsumption.js

// 当月各个水厂耗能
import React, { PureComponent } from "react";
import Chart from "../../utils/chart";

class EnergyConsumption extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      renderer: "canvas",
    };
  }
  getOptions() {
    function generateNumbers() {
      var numbers = [];
      for (var i = 0; i < 30; i++) {
        numbers.push(Math.floor(Math.random() * 100));
      }
      return numbers;
    }
    return {
      // color: ["#3C4FD6", "#F6AC4B"],
      xAxis: {
        type: "category",
        data: [
          "1日",
          "2日",
          "3日",
          "4日",
          "5日",
          "6日",
          "7日",
          "8日",
          "9日",
          "10日",
          "11日",
          "12日",
          // "13日",
          // "14日",
          // "15日",
          // "16日",
          // "17日",
          // "18日",
          // "19日",
          // "20日",
          // "21日",
          // "22日",
          // "23日",
          // "24日",
          // "25日",
          // "26日",
          // "27日",
          // "28日",
          // "29日",
          // "30日",
          // "31日",
        ],
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        grid: {
          top: 60,
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "能耗（kWh）",
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          data: generateNumbers(),
          name: "第一水厂",
          type: "line",
          smooth: true,
          symbol: "none",
        },
        {
          data: generateNumbers(),
          name: "第二水厂",
          type: "line",
          smooth: true,
          symbol: "none",
        },
        {
          data: generateNumbers(),
          name: "第三水厂",
          type: "line",
          smooth: true,
          symbol: "none",
        },
        {
          data: generateNumbers(),
          name: "第四水厂",
          type: "line",
          smooth: true,
          symbol: "none",
        },
        {
          data: generateNumbers(),
          name: "第五水厂",
          type: "line",
          smooth: true,
          symbol: "none",
        },
      ],
      legend: {
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
    };
  }
  render() {
    return (
      <div
        style={{
          width: "100%",
          height: "100%",
        }}
      >
        <Chart option={this.getOptions()} />
      </div>
    );
  } //endrender
}

export default EnergyConsumption;