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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
Python实现简单拆分PDF文件的方法
2015/07/30 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
土地转让协议书范本
2014/04/15 职场文书
暑假家长评语大全
2014/04/17 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
学校消防安全责任书
2014/07/23 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
裁员通知
2015/04/25 职场文书
婚宴父亲致辞
2015/07/27 职场文书
班主任工作总结范文
2015/08/13 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Python Django模型详解
2021/10/05 Python