使用vue怎么實現一個柱狀進度條圖像

這期內容當中小編將會給大家帶來有關使用vue怎么實現一個柱狀進度條圖像，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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怎么實現一個柱狀進度條圖像了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。