Vue项目解决element组件环形进度条，超过100%时，不渲染问题。

最新推荐文章于 2025-05-28 09:04:09 发布

weixin_30363509

最新推荐文章于 2025-05-28 09:04:09 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/liujin520/p/10265572.html

本文介绍如何解决Element UI环形进度条在数值超过100%时无法完全渲染的问题。通过使用浏览器开发者工具定位到stroke-dashoffset属性，并利用less深度作用域技巧，实现当数值大于100时强制设置该属性为0，从而达到100%的渲染效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：使用element组件的环形进度条时，给出的属性只有一个参数，

要求只能填写1-100的数，当我们的数值超过100时，想要把环形渲染满，但问题出来了，700以上的数值时，图层就不渲染了，如下图所示：

这有可能会不满足我们的要求，需要渲染满，和100%的效果一样该怎么办呢？

解决问题步骤：

1、我们使用浏览器的开发者工具。会发现有一个属性，那就是 stroke-dashoffset

当100%时，这个属性的值为0px

2、那么找到了源头，就可以找到解决办法了，思路就是，当我们的数据超过100时，强制stroke-dashoffset 属性为0.问题就解决了。

3、给我们的组件来一个动态属性，如图：

colordi这个属性，当我们的数据大于100的时候，激活此属性。

4、此时我们需要用到一个知识点，就是

/deep/ --------------- less深度作用域

我们需要此功能来找到只有F12才能看到的源代码属性，以此来改变stroke-dashoffset属性的值。

5、看一下我写的方法

/*深层改变环形图的渲染*/
.colordi /deep/ svg > path:nth-child(2){
    stroke-dashoffset: 0px !important;
}

6、就可以解决掉我们遇到的难题了。

转载于:https://www.cnblogs.com/liujin520/p/10265572.html