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 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
js闭包用法实例详解
Dec 13 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
js实现简单的随机点名器
Sep 17 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
深入理解python多进程编程
2016/06/12 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
python调用百度语音识别api
2018/08/30 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Python下载的11种姿势(小结)
2020/11/18 Python
python定义具名元组实例操作
2021/02/28 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
python实现自定义日志的具体方法
2021/05/28 Python
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL