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

前言

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