flex布局可以看我的文章GraphicalFlexlayout本文框架基于：微信小程序、uniapp(Vue.js)、SCSS。原理是一样的，我不会转为原生的Vue.js和css。原理：template:v-for="iin5"循环显示5个bars:style="{'height':readingHoursHeight[i]+'px'根据readingHoursHeight的数据动态设置bar的高度{{readingHours[i]}}显示数字标签{{readingHours[i]}}JS:模拟数据data(){return{bookId:'',//模拟每天的阅读小时数readingHours:[10,30,20,100,49],//计算小时数的高度readingHoursHeight:[]}},计算每个duration对应的bar的高度//计算bar的高度computeBarHeight:function(){//先备份这个，后面uni的方法中会覆盖掉var_this=this//盒子的高度varboxHeight=0//获取最长持续时间为最大高度varmax=this.maxHours(this.readingHours)//uniapp的方法可以改成vuejs的方法uni.getSystemInfo({success:function(res){//res-各种参数letinfo=uni.createSelectorQuery().select('.bar-chart-box')info.boundingClientRect(function(data){//data-各种参数//获取框元素的高度boxHeight=data.height-20//计算每个持续时间与最大高度的比例来设置高度for(leti=0;i<_this.readingHours.length;i++){leth=_this.readingHours[i]/_this.readingHours[max]*boxHeight//将计算出的高度推入readingHoursHeight数组_this.readingHoursHeight.push(h)}}).exec()}})},//获取最大持续时间maxHours:function(arr){varmax=0for(leti=1;iarr[max]){max=i}}returnmax}SCSS:.bars{显示:flex;弹性增长：1；证明内容：空间周围；对齐项目：flex-end；底部边框：#efefef2rpxsolid；保证金底部：20rpx；.bar-item-box{flex:0.1;文本对齐：居中；颜色：#9b9b9b；}}交换博客：http://laker.me/blogGithub：https://github.com/younglaker
