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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解Vue的options
May 15 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Django日志模块logging的配置详解
2017/02/14 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
转让协议书范本
2014/09/13 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
家长会开场白和结束语
2015/05/29 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers