Vue实现圆环进度条的示例


Posted in Vue.js onFebruary 06, 2021

数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)!
前几天刚做了折线图、柱状图、饼状图之类的图表数据展示效果,今天又碰到了类似圆环进度条的展示效果。天天跟数据打交道,天天跟接口打交道,项目做了不少,菜逼还是菜逼,都是泪啊!
其实说白了,是自己对canvas不熟,对CSS3不熟,所以就找了一个现成的轮子:

<template>
 <div class="content" ref="box">
 <svg style="transform: rotate(-90deg)" :width="width" :height="width" xmlns="http://www.w3.org/2000/svg">
  <circle :r="(width-radius)/2"
  :cy="width/2"
  :cx="width/2"
  :stroke-width="radius"
  :stroke="backgroundColor"
  fill="none"
  />
  <circle ref="$bar"
  :r="(width-radius)/2"
  :cy="width/2"
  :cx="width/2"
  :stroke="barColor"
  :stroke-width="radius"
  :stroke-linecap="isRound ? 'round' : 'square'"
  :stroke-dasharray="(width-radius)*3.14"
  :stroke-dashoffset="isAnimation ? (width-radius) * 3.14 : (width - radius) * 3.14 * (100 - progress) / 100"
  fill="none"
  />
 </svg>
 <div class="center_text" :style="{color, fontSize}">
  <p v-if="!$slots.default" class="title">{{progress}}%</p>
  <slot></slot>
 </div>
 </div>
</template>

<script>
export default {
 props: {
 radius: {
  type: [Number, String],
  default: 20
 }, // 进度条厚度
 progress: {
  type: [Number, String],
  default: 20
 }, // 进度条百分比
 barColor: {
  type: String,
  default: "#1890ff"
 }, // 进度条颜色
 backgroundColor: {
  type: String,
  default: "rgba(0,0,0,0.3)"
 }, // 背景颜色
 isAnimation: {
  // 是否是动画效果
  type: Boolean,
  default: true
 },
 isRound: {
  // 是否是圆形画笔
  type: Boolean,
  default: true
 },
 id: {
  // 组件的id,多组件共存时使用
  type: [String, Number],
  default: 1
 },
 duration: {
  // 整个动画时长
  type: [String, Number],
  default: 1000
 },
 delay: {
  // 延迟多久执行
  type: [String, Number],
  default: 200
 },
 timeFunction: {
  // 动画缓动函数
  type: String,
  default: "cubic-bezier(0.99, 0.01, 0.22, 0.94)"
 },
 circleWidth: {
  //圆环宽度
  type: Number,
  default: 100,
 },
 color: {
  //文字颜色
  type: String,
  default: '#000'
 },
 fontSize: {
  //文字大小
  type: String,
  default: '18px'
 }
 },
 data() {
 return {
  width: this.circleWidth,
  idStr: `circle_progress_keyframes_${this.id}`
 };
 },
 beforeDestroy() {
 // 清除旧组件的样式标签
 document.getElementById(this.idStr) &&
 document.getElementById(this.idStr).remove();
 window.addEventListener(() => {});
 },
 mounted() {
 let self = this;
 this.setCircleWidth();
 this.setAnimation();
 // 此处不能使用window.onresize
 window.addEventListener(
  "resize",
  debounce(function() {
  self.setCircleWidth();
  self.setAnimation(self);
  }, 300)
 );
 },
 methods: {
 setCircleWidth() {
  let box = this.$refs.box;
  let width = box.clientWidth;
  let height = box.clientHeight;
  let cW = width > height ? height : width;
  this.width = cW;
 },
 setAnimation() {
  let self = this;
  if (self.isAnimation) {
  // 重复定义判断
  if (document.getElementById(self.idStr)) {
   console.warn("vue-circle-progress should not have same id style");
   document.getElementById(self.idStr).remove();
  }
  // 生成动画样式文件
  let style = document.createElement("style");
  style.id = self.idStr;
  style.type = "text/css";
  style.innerHTML = `
  @keyframes circle_progress_keyframes_name_${self.id} {
  from {stroke-dashoffset: ${(self.width - self.radius) * 3.14}px;}
  to {stroke-dashoffset: ${((self.width - self.radius) *
  3.14 *
  (100 - self.progress)) /
  100}px;}}
  .circle_progress_bar${
  self.id
  } {animation: circle_progress_keyframes_name_${self.id} ${
   self.duration
  }ms ${self.delay}ms ${self.timeFunction} forwards;}`;
  // 添加新样式文件
  document.getElementsByTagName("head")[0].appendChild(style);
  // 往svg元素中添加动画class
  self.$refs.$bar.classList.add(`circle_progress_bar${self.id}`);
  }
 }
 }
};
</script>
<style scoped>
.content {height:100%;display:flex;justify-content:center;align-items: center;}
.center_text {position:absolute;}
</style>

使用方法:

<CircleProgress :id="'circle1'" :circleWidth="40" :radius="7" :progress="30" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FF4F4F'" />
<CircleProgress :id="'circle2'" :circleWidth="40" :radius="7" :progress="50" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FF902A'" />
<CircleProgress :id="'circle3'" :circleWidth="40" :radius="7" :progress="89" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#FFDB4F'" />
<CircleProgress :id="'circle4'" :circleWidth="40" :radius="7" :progress="25" :isAnimation="true" :backgroundColor="'#E9E9E9'" :barColor="'#B8D87E'" />

使用时需要注意一下,如果你的页面中同时使用了超过两个以上的这种圆环进度条,就需要给每个圆环进度条设置不同的id,否则,所有圆环最终展示的数据都会是最后一个圆环的数据。

代码中有一个防抖动的函数,这里就贴一下这个函数:

function debounce(func, wait, immediate) {
 let timeout, args, context, timestamp, result

 const later = function () {
 // 据上一次触发时间间隔
 const last = +new Date() - timestamp

 // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
 if (last < wait && last > 0) {
  timeout = setTimeout(later, wait - last)
 } else {
  timeout = null
  // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
  if (!immediate) {
  result = func.apply(context, args)
  if (!timeout) context = args = null
  }
 }
 }

本文参考的是npm上的一个圆环进度条的插件vue-circleprogressbar,之所以没有在项目中直接安装并使用这个插件,是因为这个插件有点不太符合我们开发的需求,比如这个插件不能设置圆环的宽度,不能设置文字的颜色,不能设置文字的大小,再比如这个插件仅仅为了防抖而依赖了lodash(这个lodash的体积还是很大的)。

至于这个组件在react中的使用,按照react的生命周期,或者react hooks的语法,或者dva模式的语法,稍微改巴改巴就可以使用了,很简单,就不再展开了。

作者:小坏

出处:http://tnnyang.cnblogs.com

以上就是Vue实现圆环进度条的示例的详细内容,更多关于Vue 实现圆环进度条的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
Vue常用API、高级API的相关总结
Feb 02 #Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
You might like
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python中import机制详解
2017/11/14 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
离婚协议书格式
2014/11/21 职场文书
比较几种Redis集群方案
2021/06/21 Redis
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle