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


Posted in Javascript onAugust 26, 2019

前言

本文是对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>

效果如下

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

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

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
javascript第一课
Feb 27 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
React传值 组件传值 之间的关系详解
Aug 26 #Javascript
js实现指定时间倒计时效果
Aug 26 #Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 #Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 #Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 #Javascript
微信小程序实现手势滑动效果
Aug 26 #Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 #Javascript
You might like
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
jquery 事件执行检测代码
2009/12/09 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
Angular工具方法学习
2016/12/26 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Django中几种重定向方法
2015/04/28 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python进度条的制作代码实例
2019/08/31 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
django model通过字典更新数据实例
2020/04/01 Python
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
机械绘图员岗位职责
2013/11/19 职场文书
红领巾广播站广播稿
2014/02/01 职场文书
家长会主持词开场白
2014/03/18 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
就业意向书范本
2015/05/11 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
springboot实现string转json json里面带数组
2022/06/16 Java/Android
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android
python manim实现排序算法动画示例
2022/08/14 Python