代码

样式放在公共样式的global.less文件里，所以className是字符串
state 的number 使用50去除以数组中最大的数字，与.barBkg的width是50%相对应。

import React, { useState } from 'react';

export default () => {
    // 计算bar长度 barArr从大到小的顺序，第0个是最大值，令其长度为100%
    const [number, setNum] = useState(50 / barArr[0].num);
    const [bar, setBar] = useState(barArr); // bar列表
    const [barValue, setBarValue] = useState(null); // 选中的bar

    const getBarValue = barName => {
        if (barName === barValue) {
            setBarValue(null);
        } else {
            setBarValue(barName);
        }
    };

    return (
        <div className={styles.barContain}>
            <div style={{ padding: '5px 5px 0' }}>
                {bar.length
                    ? bar.map(item => {
                        return (
                            <>
                                <div className="sortItem" onClick={() => getBarValue(item.name)}>
                                    <div
                                        className={
                                            item.name === barValue ? 'barName barNameChose' : 'barName'
                                        }
                                    >
                                        {item.name}
                                    </div>
                                    <div className="barBkg" style={{ width: '50%' }}></div>
                                    <div
                                        className={
                                            item.name === barValue || !barValue
                                                ? 'barActive barChosed'
                                                : 'barActive'
                                        }
                                        style={{ width: `${item.num * number}%` }}
                                    ></div>
                                    <span
                                        className={
                                            item.name === barValue ? 'barDigit barNameChose' : 'barDigit'
                                        }
                                    >
                                        {item.num}
                                    </span>
                                </div>
                            </>
                        );
                    })
                    : null}
            </div>
        </div>
    )
};

//条形图
.barName {
  flex-grow: 0;
  flex-shrink: 0;
  width: 34%;
  // margin-left: 16px;
  margin-right: 10px;
  color: rgba(108, 108, 108, 1);
  color: rgba(108, 108, 108, 1);
  font-size: 1rem;
  line-height: 24px;
  text-align: right;
}

.barBkg {
  position: absolute;
  height: 10px;
  margin-top: 7px;
  margin-left: calc(34% + 10px);
  background: rgba(224, 224, 224, 1);
}

.barActive {
  position: absolute;
  height: 10px;
  margin-top: 7px;
  margin-left: calc(34% + 10px);
  background: rgba(171, 214, 255, 1);
}


.barDigit {
  margin-left: calc(50% + 10px);
  color: rgba(108, 108, 108, 1);
  font-size: 12px;
  line-height: 24px;
}

.barChosed {
  background: rgba(64, 162, 255, 1);
}

.barNameChose {
  color: rgba(64, 162, 255, 1);
}

效果图

初始样式：

选中一个条形后的样式：