BigScreen/src/components/PineNet/WornAnalyze.js

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

class WornAnalyze extends PureComponent {
  constructor(props) {
    super(props);
  }
  getOptions() {
    return {
      color: ["#38b3ff", "#00CA95"],
      tooltip: {},
      // legend: {
      //   data: ["破损率"],
      //   textStyle: {
      //     color: "#fff",
      //   },
      // },
      grid: {
        top: 35,
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["历下区", "天桥区", "市中区", "章丘区", "高新区"],
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          axisLine: {
            symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "漏损率（%）",
          nameTextStyle: {
            align: "left",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "受损内涝点数量",
          type: "bar",
          barWidth: "50%",
          data: [12, 14, 18, 10, 16],
        },
      ],
    };
  }
  render() {
    return (
      <div
        style={{
          width: "100%",
          height: "100%",
        }}
      >
        <Chart option={this.getOptions()} />
      </div>
    );
  } //endrender
}

export default WornAnalyze;