站长资源网络编程
vue柱状进度条图像的完美实现方案
简介前言本文是对bar进度条实现的2种方案进行分享，第一种是很简单，纯css的实现，第二种是echart的实现。css的实现css实现很简单。代码如下：
前言
本文是对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柱状进度条图像的完美实现方案,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
上一篇：微信小程序实现左侧滑栏过程解析