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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 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.MVC的模板标签系统(一)
2006/09/05 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
浅析JavaScript动画
2015/06/10 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python创建临时文件夹的方法
2015/07/06 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python 异常处理总结
2016/10/18 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python 函数中的参数类型
2020/02/11 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
巴西购物网站:Submarino
2020/01/19 全球购物
总经理秘书岗位职责
2014/03/17 职场文书
打架检讨书
2015/01/27 职场文书
音乐教师求职信范文
2015/03/20 职场文书
离职信范本
2015/06/23 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS