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