【基于react使用html标签模拟echarts的条形图】

需要实现条形图，而使用echarts又比较麻烦时，可以使用html标签模拟一个条形图，

核心代码如下：

{
    newData.map((v, i) => (
        <div key={i}>
            <span className="left">
                <span className="typeName">
                    {v.typeName}
                </span>
                <span className="count">
                    {v.count}
                </span>
             </span>
             <span>
                <span
                    className="process"
                    style={{ width: v.count / 700 * 20 > 200 ? 200 + 'px' : v.count / 700 * 20 + 'px', backgroundColor: '#3D8CFF' }}
                />
                <span
                    className="process"
                    style={{ width: 200 + 'px', backgroundColor: '#EBECF0', zIndex: 1 }}
                />
                </span>
            </div>
    ))
}

数据格式

const newData = [{
        typeName: 'html模拟echarts的条形图',
        count: 11580
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 7000
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 6000
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 5090
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 4358
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 3640
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 2500
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 1790
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 890
      }, {
        typeName: 'html模拟echarts的条形图',
        count: 800
      }];

数据格式为:一个属性是y轴的名称，一个属性是x轴的数值

less文件：

.pod{
    position: relative;
    height: 200px;
    margin-top: 54px;
    margin-left: 16px;
    overflow-y: auto;
    & .left{
        display: inline-flex;
        justify-content: space-between;
        width: 200px;
        & .typeName{
            display: inline-block;
            margin-bottom: 12px;
            color: #4A4D55;
            font-weight: 400;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
        }
        & .count{
            color: #888C99;
            font-weight: 500;
            font-size: 12px;
            font-family: Rubik-Medium, Rubik;
        }
    }
    & .process{
        position: absolute;
        z-index: 10;
        display: inline-block;
        height: 11px;
        margin-top: 4px;
        margin-left: 8px;
        vertical-align: middle;
        background: #8FC3FF;
        border-radius: 6px;
        transition: all 0.3s ease-in-out;
    }
}

其中pod是包裹整个条形图的父容器

效果图：

根据实际情况而定，可以有滚动条， 最大宽度根据实际情况而定。柱子的长度计算而出