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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
微信小程序登录session的使用
Mar 17 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
监听element-ui table滚动事件的方法
2019/03/26 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
pycharm远程调试openstack的图文教程
2017/11/21 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python3安装speech语音模块的方法
2018/12/24 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
JSF如何进行表格处理及取值
2012/08/06 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
运动会通讯稿150字
2014/02/15 职场文书
综治宣传月活动总结
2014/04/28 职场文书
村干部培训方案
2014/05/02 职场文书
计划生育宣传标语
2014/06/21 职场文书
网吧消防安全责任书
2014/07/29 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
大学军训决心书
2015/02/05 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL