vue柱状进度条图像的完美实现方案
程序员文章站
2022-07-06 18:17:45
前言
本文是对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,地址是:
总结
以上所述是小编给大家介绍的vue柱状进度条图像的完美实现方案,希望对大家有所帮助
上一篇: 看起来是不是有点傻