前言

本文是对酒吧进度条实现的2种方案进行分享，第一种是很简单，纯钢性铸铁的实现，第二种是统计图的实现。

钢性铸铁的实现

钢性铸铁实现很简单。代码如下：

barData ' : key=' index ' class=' one bar ' div class=' haosfmlex ' div v v-for='(item，index)在barData ' : key=' index ' class=' one bar ' div class=' bar ' span class=' progress ' : style=' { ' height ' : ` $ { item。value * 100 } % `} '//div class=' sfont ' { item。date } }/div/div/template script导出默认值{ prop : { BarData : { typemargin :0 15px }。onebar { flex:1文本对齐：中心；最小宽度： 30px最大宽度： 100像素；显示器：内联块；sfont { color : # 999 font-size :14 px；} .bar { height: 160px宽度：24 pxmargin:5px汽车；-web套件-边框-半径： 24px边界半径： 24px飞越：隐藏；相对位置：背景# e5e5e5span。进度{位置：绝对；底部：0;高度： 0;宽度： 100%;显示器：块；-web套件-边框-半径： 24px边界半径： 24px-网络套件-transit :高度2s放松；-o-transit :高度2s缓解；高度2s缓和过渡：背景： # 3990 ff } } }/风格效果如下

统计图实现

模板div class=' LineChartwrap ' v-chart class=' barchart ' : options=' options ' auto size//div/template script从' vue-echart ' import ' echart/lib/component/tooltip ' import ' echart/lib/component/title ' import ' echart/lib/component/toolbox ' export default { components : { ' v-chart ' 33: echart }，props: { barData:params。foreach(function(item){ result=item。标记“”项目。系列名称' : '项目。值'/br '；});返回结果；}*/}，backgroundColor: '#fff '，//背景色yAxis: { show: false，//是否显示x轴type: 'value' }，xAxis: { type: 'category '，axisLabel: { show: true，text style : { color : ' # 666 '/y轴字体颜色} }，splitLine: { show: false }，//横向的线axisTick: { show: false }，//y轴的端点axisLine: { show: false }，//y轴的线data: this.barData.title }，series: [ { type: 'bar '，items tyle : { normal : { barborderadius : 25，color : ' # 3990 ff ' }]，barWidth: 25，data: this.barData.data }，{ name: '外框，类型：“bar”，items tyle : { normal : { barborderadius : 25，color : ' # e5e5e 5 '/rgba设置透明度0.14 } }，barGap: '-100% '，z: 0，barWidth: 25，data: [100，100，100] } ] } } }脚本代码地址

代码已经上传github，地址是：https://github.com/confidence 68/bar _ prent _ CSS

总结

以上就是边肖介绍的vue柱状进度条图像的完美实现方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！