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