好资源导航 » 文章资讯 » Vue实现圆环进度条的示例

Vue实现圆环进度条的示例

2023-07-05 19:53:03 80

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





.content{height:100%;display:flex;justify-content:center;align-items:center;}
.center_text{position:absolute;}

使用方法：

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

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

functiondebounce(func,wait,immediate){
lettimeout,args,context,timestamp,result

constlater=function(){
//据上一次触发时间间隔
constlast=+newDate()-timestamp

//上次被包装函数被调用时间间隔last小于设定时间间隔wait
if(last0){
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的生命周期，或者reacthooks的语法，或者dva模式的语法，稍微改巴改巴就可以使用了，很简单，就不再展开了。

作者：小坏

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

以上就是Vue实现圆环进度条的示例的详细内容，更多关于Vue实现圆环进度条的资料请关注毛票票其它相关文章！

返回顶部
514930285
czq8825@qq.com

Vue实现圆环进度条的示例

热门推荐

随机推荐