BigScreen/src/components/Overview/EnergyRanking .js

// 水厂能耗排名
import React, { PureComponent } from "react";
import { CapsuleChart } from "@jiaminghi/data-view-react";

class EnergyRanking extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        // 单位
        unit: "",
        showValue: false,
        data: [],
      },
    };
  }
  render() {
    const userIdentityCategory = {
      data: [
        { value: 0.6, name: "南郊水厂" },
        { value: 0.65, name: "白龙泉水厂" },
        { value: 0.73, name: "大禹王水厂" },
        { value: 0.81, name: "东郊水厂" },
        { value: 0.9, name: "鹊华水厂" },
      ],
      showValue: true,
      unit: "kWh/m3",
    };
    const config = {
      ...this.state.config,
      ...userIdentityCategory,
    };
    return (
      <div
        style={{
          width: "100%",
          height: "100%",
        }}
      >
        <CapsuleChart
          config={config}
          style={{
            height: "100%",
          }}
        />
      </div>
    );
  }
}

export default EnergyRanking;