这期内容当中小编将会给大家带来有关使用vue怎么实现一个柱状进度条图像，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
计算
安全
数据库
网络和加速
企业服务
<template>
<div class="haoroomflex">
<div v-for="(item,index) in barData" :key="index" class="onebar">
<div class="bar">
<span class="progress" : />
</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>上述就是小编为大家分享的使用vue怎么实现一个柱状进度条图像了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
