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

<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>

<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>