vue柱状进度条图像的完美实现方案

前言本文是对bar进度条实现的2种方案进行分享，第一种是很简单，纯css的实现，第二种是ec

前言

本文是对bar进度条实现的2种方案进行分享，第一种是很简单，纯css的实现，第二种是echart的实现。

css的实现

css实现很简单。代码如下：

<template>
 <div class="haoroomflex">
 <div v-for="(item,index) in barData" :key="index" class="onebar">
 <div class="bar">
 <span class="progress" :style="{'height':`${item.value*100}%`}" />
 </div>
 <div class="sfont">{{ item.date }}</div>
 </div>

 </div>
</template>
<script>

export default {
 props: {
 barData: {
 type: Array,
 default() {
 return [
 { date: '', value: 0 },
 { date: '', value: 0 },
 { date: '', value: 0 }
 ]
 }
 }
 }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.haoroomflex{display: flex;margin:0 15px;}
.onebar{
 flex:1;
 text-align: center;
 min-width: 30px;
 max-width: 100px;
 display: inline-block;
 .sfont{
 color:#999;
 font-size:14px;
 }
 .bar{
 height: 160px;
 width:24px;
 margin:5px auto;
 -webkit-border-radius: 24px;
 border-radius: 24px;
 overflow: hidden;
 position: relative;
 background: #e5e5e5;
 span.progress {
 position: absolute;
 bottom:0;
 height: 0;
 width: 100%;
 display: block;
 -webkit-border-radius: 24px;
 border-radius: 24px;
 -webkit-transition: height 2s ease-out;
 -o-transition: height 2s ease-out;
 transition: height 2s ease-out;
 background: #3990FF

 }
 }
}
</style>

效果如下

echart实现

<template>
 <div class="linechartWrap">
 <v-chart class="barchart" :options="options" autoresize />
 </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'

export default {
 components: {
 'v-chart': ECharts
 },
 props: {
 barData: {
 type: Object,
 default() {
 return {
 data: [11, 33, 77],
 title: ['07-01', '07-02', '07-03']
 }
 }
 }
 },
 computed: {
 options() {
 return {
 grid: {
 show: 'true',
 borderWidth: '0',
 height: '72%',
 width: '90%',
 x: '12%',
 y: '20%'
 },
 tooltip: {
 trigger: 'axis',
 axisPointer: {
 type: 'none'
 },
 formatter: '{b0}: {c0}%'
 /* formatter: function(params) {
 var result = '';
 params.forEach(function (item) {
 result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
 });
 return result;
 }*/
 },
 backgroundColor: '#fff', // 背景色
 yAxis: {
 show: false, // 是否显示x轴
 type: 'value'
 },
 xAxis: {
 type: 'category',
 axisLabel: {
 show: true,
 textStyle: {
 color: '#666' // y轴字体颜色
 }
 },
 splitLine: { show: false }, // 横向的线
 axisTick: { show: false }, // y轴的端点
 axisLine: { show: false }, // y轴的线
 data: this.barData.title
 },
 series: [
 {
 type: 'bar',
 itemStyle: {
 normal: {
 barBorderRadius: 25,
 color: '#3990FF'
 }
 },
 barWidth: 25,
 data: this.barData.data
 },
 {
 name: '外框',
 type: 'bar',
 itemStyle: {
 normal: {
 barBorderRadius: 25,
 color: '#e5e5e5' // rgba设置透明度0.14
 }
 },
 barGap: '-100%',
 z: 0,
 barWidth: 25,
 data: [100, 100, 100]
 }
 ]
 }
 }
 }

}
</script>

代码地址

代码已经上传github，地址是： https://github.com/confidence68/bar_precent_css

总结

以上所述是小编给大家介绍的vue柱状进度条图像的完美实现方案,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！