用js做一个动态的条形图

思路就是给布好的静态条形动态化，需要进行动态的条形的父元素
CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
ul{
    list-style: none;
}

.look07-rec{
    width: 350px;
    margin-top: 45px;
    position: absolute;
    top: 0;
    left: 20px;
}
.look07-rec li{
    text-align: left;
    line-height: 20px;
    margin-top: 20px;
    color: #fff;
}
.look-list07__rec-bg{
    text-align: right;
    position: relative;
    margin-top: 6px;
}
.look-list07__rec-bg span{
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
}
.rec-bg{
    width: 10px;
    height: 20px;
    background: #249979;
}

HTML:

<ul class="look07-rec">
    <li>
        <span>50后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>5%</span>
        </div>
    </li>
    <li>
        <span>60后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>17%</span>
        </div>
    </li>
    <li>
        <span>70后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>30%</span>
        </div>
    </li>
    <li>
        <span>80后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>33%</span>
        </div>
    </li>
    <li>
        <span>90后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>12%</span>
        </div>
    </li>
    <li>
        <span>其他</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>3%</span>
        </div>
    </li>
</ul>

JQ:

function list07(){
   var rectWidth = $('.look07-rec li').width()-40
   var data05 = [5,17,30,33,12,3];
   $('.rec-bg').css({width: 0});
   for(var ins = 0; ins < data05.length; ins++){
       var wid = data05[ins] * rectWidth/100 + 'px';
       $('.rec-bg').eq(ins).stop().animate({
           'width' : wid
       },2000);
   }
}
list07()

高度条形图：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
ul{
    list-style: none;
}
.look-list__chart{
    position: relative;
    width: 1100px;
    margin-top: 40px;
}
.look-list__chart-float{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.look-list__float-l{
    width: 100px;
    float: left;
    padding-top: 30px;
}
.look-list__float-l p{
    width: 100px;
    height: 16px;
    text-align: right;
    padding-right: 10px;
    font-size: 14px;
    color: #999;
    line-height: 16px;
    margin-top: 44px;
}
.look-list__float-r{
    width: 1000px;
    float: left;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding-top: 30px;
}
.look-list__float-r li{
    width: 100%;
    height: 30px;
    border-top: 1px solid #333;
}
.look-list__action{
    width: 1000px;
    height: 240px;
    position: absolute;
    top: 31px;
    right: 0;
}
.look-list__action li{
    width: 45px;
    height: 240px;
    margin-left: 35px;
    float: left;
    position: relative;
}
.look-list__action div{
    position: absolute;
    bottom: 0;
}
.rec-16{
    display: inline-block;
    width: 20px;
    background: #decc85;
    left: 0;
}
.rec-17{
    display: inline-block;
    width: 20px;
    background: #db7e46;
    right: 0;
}
.hover-show{
    position: absolute;
    z-index: 300;
    background: rgba(0, 0, 0, .4);
    width: 70px;
    height: 50px;
    top: -65px;
    left: -25px;
    display: none;
}
.hover-show span{
    font-size: 14px;
    color: #decc85;
    line-height: 16px;
}
.hover-show p{
    font-size: 24px;
    color: #ddd;
    line-height: 30px;
    margin-top: 2px;
}
.rec-16:hover .hover-show{
    display: block;
}
.rec-17:hover .hover-show{
    display: block;
}
.look-list__month{
    width: 1000px;
    margin-left: 100px;
    overflow: hidden;
}
.look-list__month li{
    width: 45px;
    text-align: center;
    float: left;
    font-size: 14px;
    color: #999;
    line-height: 16px;
    margin-left: 35px;
    display: inline-block;
}

HTMl

<div class="look-list__chart">
    <div class="look-list__chart-float">
        <div class="look-list__float-l">
            <p style="margin-top:-8px;">8000</p>
            <p>6000</p>
            <p>4000</p>
            <p>2000</p>
            <p>0</p>
        </div>
        <ul class="look-list__float-r">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <ul class="look-list__action">
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
        <li>
            <div class="rec-16"></div>
            <div class="rec-17"></div>
        </li>
    </ul>
    <ul class="look-list__month">
        <li>1月</li>
        <li>2月</li>
        <li>3月</li>
        <li>4月</li>
        <li>5月</li>
        <li>6月</li>
        <li>7月</li>
        <li>8月</li>
        <li>9月</li>
        <li>10月</li>
        <li>11月</li>
        <li>12月</li>
    </ul>
</div>

function chart(){
        var data01 = [3400,2900,5500,1350,2550,5150,5300,6800,5450,3200,5275,2400];
        var data02 = [900,4500,4685,7250,8185,5380,4655,4100,6284,2308,4221,6596];
        var maxData = 8000; //数据范围0~8000
        var maxHeight = $('.look-list__action li').height();// 条形图最大高度

        $('.look-list__action').find('.rec-16').css({height:0});
        $('.look-list__action').find('.rec-17').css({height:0});
    for(var i = 0; i < 12; ++i){
            var he1 = data01[i] / maxData * maxHeight + 'px';
            $('.look-list__action').find('.rec-16').eq(i).stop().animate({
                'height' : he1
            },1000);
            var he2= data02[i] / maxData * maxHeight + 'px';
            $('.look-list__action').find('.rec-17').eq(i).stop().animate({
                'height' : he2
            },1000);
        }   
            // jq添加标签
            $('.rec-16').append("<div class='hover-show'></div>")
            $('.rec-17').append("<div class='hover-show'></div>")
            $('.hover-show').append("<span></span>")
            $('.hover-show').append("<p></p>")
            $('.rec-16').hover(function(){
                var ins = $(this).parent('li').index();
                $(this).find('span').html('2016' + ' ' + (ins + 1) + '月');
                $(this).find('p').html(data01[ins]);
            });
            $('.rec-17').hover(function(){
                var ins = $(this).parent('li').index();
                $(this).find('span').html('2017' + ' ' + (ins + 1) + '月');
                $(this).find('p').html(data02[ins]);
            })
    }
    chart();

原文链接：https://blog.csdn.net/qq_39762109/article/details/79415440