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


问题描述:使用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、就可以解决掉我们遇到的难题了。

   

 

 




 

 

 


 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM