基于React封装的占比进度条组件

效果图

(注：可以搭配antd的table，嵌入在表格中使用效果最佳）

源代码

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class ProgressBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColor: '#000',
      progressColor: '#aaa',
    };
  }

  renderProgress() {
    const progressItemStyle = {
      width: `${100 / this.props.nums / 2}%`,
      height: '100%',
      lineHeight: '100%',
      padding: '0px 4px',
      fontWeight: 800,
      // color: `rgb(${this.props.progressColor}`,
    };
    let progressItemLength = this.props.nums * (this.props.data / 100);
    var ele = [];
    for (let i = 0; i < progressItemLength; i++) {
      ele.push(
        <div
          style={Object.assign(progressItemStyle, {
            color: `rgb(${this.props.progressColor}`,
          })}
          key={i}
        >
          /
        </div>,
      );
    }
    return ele;
  }

  componentDidMount() {
    if (this.props.data >= 90) {
      this.setState({ bgColor: '#FFF5F5', progressColor: '#F45A59' });
    } else if (this.props.data >= 80) {
      this.setState({ bgColor: '#FAF5EE', progressColor: '#F5982C' });
    } else if (this.props.data >= 60) {
      this.setState({ bgColor: '#D4E9FA', progressColor: '#2A7CFF' });
    } else {
      this.setState({ bgColor: '#BAEBD0', progressColor: '#2AC870' });
    }
  }
  render() {
    const progressStyle = {
      display: 'flex',
      color: this.state.progressColor,
      // margin: '0 5px',
    };

    const progressArticleStyle = {
      height: '18px',
      width: '78%',
      display: 'flex',
      borderRadius: '10px',
      overflow: 'hidden',
      marginTop: '5px',
      color: this.state.progressColor,
      background: this.state.bgColor,
      border: `1px solid ${this.state.progressColor}`,
    };

    return (
      <div style={progressStyle}>
        <div style={progressArticleStyle}>{this.renderProgress()}</div>
        <div style={{ width: '22%', marginLeft: '5px' }}>
          {this.props.data}%
        </div>
      </div>
    );
  }
}

ProgressBar.propTypes = {
  nums: PropTypes.number.isRequired,
  data: PropTypes.number.isRequired,
};

参数说明

• data：(0-100的整数)，需要显示的百分比数值
• nums：（默认分割成20个分段)，进度条宽度被分隔成多少个电池刻度