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 相关文章推荐
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue使用watch监听属性变化
Apr 30 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php内存缓存实现方法
2015/01/24 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
js查找节点的方法小结
2015/01/13 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python初步实现word2vec操作
2020/06/09 Python
python求解汉诺塔游戏
2020/07/09 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
灵泰克Java笔试题
2016/01/09 面试题
支行行长竞聘演讲稿
2014/05/15 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
公司放假通知范文
2015/04/14 职场文书
被委托人身份证明
2015/08/07 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android