div做个横向百分比柱状图图

效果图

import React from 'react';
import numeral from 'numeral';
import { Empty } from 'antd';
import './LandscapeType.less'

// CDN START

class LandscapeType extends React.Component {
  render() {
    const { data = [], height = 600 } = this.props
    return (
      data.length > 0 ? <div>
        <div className='land-scape-type-item'>
          <div className='name color9size12'>名称</div>
          <div className='type color9size12'>分类</div>
        </div>
        {data.map((one, index) => {
          return <div key={one.key} className='land-scape-type-item'>
            <div className='name'>{one.name}</div>
            <div className='type'>{one.key}</div>
            <div className='land-scape-box-value'>
              <div className='land-scape-box' style={{ width: `calc(${100 * one.value}%)`, opacity: one.value + 0.2 }}></div>
              <div className='unit-value'>{numeral(one.value).format('0.0%')}</div>
            </div>
          </div>
        })}
      </div> : <Empty style={{ height: height + 18, paddingTop: height / 2 }} />
    );
  }
}
export default LandscapeType
复制代码

less

.land-scape-type-item {
    display: flex;

    .name,
    .type {
        min-width: 80px;
    }

    .land-scape-box-value {
        display: flex;
        height: 66px;
        width: 100%;
        border-left: 1px solid #ccc;

        .land-scape-box {
            background: #4786F5;
            height: 20px;
            border-radius: 10px;

        }

        .unit-value {
            margin-left: 4px
        }
    }

    .color9size12 {
        height: 60px;
        line-height: 60px;
        font-size: 12px;
        color: #999;
    }

}



复制代码

转载于:https://juejin.im/post/5d357815e51d454f6f16ecc9