Vue实现圆环进度条的示例

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

  <div class="content">  <div class="center_text"> <p class="title">{{progress}}%</p></div></div> .content {height:100%;display:flex;justify-content:center;align-items: center;} .center_text {position:absolute;} 

使用方法：

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

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

 function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function () { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔last小于设定时间间隔wait if (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 实现圆环进度条的资料请关注g本文来源gao@daima#com搞(%代@#码网aodaima搞代码网其它相关文章！