*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} body{background-color: #c0c0c0;} .figure{width:900px;height: 500px;margin: 0 auto;padding: 30px 0;background-color: #ffffff;} ul{list-style: none;padding: 0;margin: 0;} .figure-line{width: 700px;height: 420px;float: left;border: 1px solid #c0c0c0;border-right: 0;position: relative;} .figure-left{width: 100px;height: 420px;float: left;} .figure-left ul{margin-top: 30px ;} .figure-left ul li{height: 60px;text-align: right;line-height: 60px;padding: 0 5px;} .figure-line ul.fr li{border-top:1px solid #c0c0c0;height: 60px;} .figure-line ul.fr li:first-child{border: 0;} .figure-line ul.ls{width: 700px;height: 420px;position: absolute;bottom: -1px;} .figure-line ul.ls li{float: left;display: block;width: 60px;margin:0 20px;background-color: blue;position: relative;bottom: 0;} .figure-line ul.ls li span{width: 60px;display: inline-block;text-align: center;position: relative;top: -20px;} .figure-bottom{clear: left;float: left;width: 700px;margin-left: 100px;} .figure-bottom ul li{display: inline-block; width: 95px; text-align: center;; position: relative;}<div class="figure"> <div class="figure-left"> <ul id="leftUl"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="figure-line"> <ul class="fr"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="ls" id="midUl"> <li><span>1</span></li> <li><span>1</span></li> <li><span>1</span></li> <li><span>1</span></li> <li><span>1</span></li> <li><span>1</span></li> <li><span>1</span></li> </ul> </div> <div class="figure-bottom"> <ul id="bottomUl"> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> </div> </div>window.onload = function(){ //左侧数据加载 var oUl = document.getElementById('leftUl'); var figureLeft = [1,2,3,4,5,6,7]; figureLeft.sort(function(i,l){ return l- i; }); var oLi = oUl.getElementsByTagName('li'); for(var i=0;i<figureLeft.length;i++){ oLi[i].innerHTML = figureLeft[i]; } //底部数据加载 var oUl1 = document.getElementById('bottomUl'); var figuerBottom = [11.1,11.2,11.3,11.4,11.5,11.6,11.7]; figuerBottom.sort(function(i,l){ return i-l; }); var oLi1 = oUl1.getElementsByTagName('li'); for(var k=0;k<figuerBottom.length;k++){ oLi1[k].firstChild.innerHTML = figuerBottom[k]; } //柱状列表高度加载和顶部数据加载 var figuerHeight = [1,2,3,4,5,6,7]; var mid1 = document.getElementById('midUl'); var midLi = mid1.getElementsByTagName('li'); for(var j=0;j<figuerHeight.length;j++){ midLi[j].style.height = figuerHeight[j] * 60 +"px"; midLi[j].firstChild.innerHTML = figuerBottom[j]; midLi[j].style.bottom = -(420 - figuerHeight[j] * 60) + 'px'; } }文章来源: 基于原生JS的柱状图