BigScreen/src/components/WaterSupply/WaterVolume.js

// 当年水量统计
import React, { PureComponent } from "react";
import Chart from "../../utils/chart";

class WaterVolume extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      renderer: "canvas",
    };
  }
  getOptions() {
    return {
      color: ["#3C4FD6", "#F6AC4B"],
      grid: {
        top: 30,
        left: 80,
        right: 30,
        bottom: 30,
      },
      xAxis: {
        max: "dataMax",
        axisLine: {
          show: false, // 取消横轴轴线
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false, // 取消横轴刻度线
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
      },
      yAxis: {
        type: "category",
        data: ["第一水厂", "第二水厂", "第三水厂", "第四水厂", "第五水厂"],
        inverse: true,
        axisLabel: {
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          realtimeSort: true,
          name: "产水量",
          type: "bar",
          data: [100, 120, 30, 40, 50],
          label: {
            show: true,
            position: "right",
            valueAnimation: true,
          },
        },
        {
          realtimeSort: true,
          name: "供水量",
          type: "bar",
          data: [100, 120, 30, 40, 50],
          label: {
            show: true,
            position: "right",
            valueAnimation: true,
          },
        },
      ],
      legend: {
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
    };
  }
  render() {
    return (
      <div
        style={{
          width: "5.375rem",
          height: "3rem",
        }}
      >
        <Chart option={this.getOptions()} />
      </div>
    );
  } //endrender
}

export default WaterVolume;