Element-ui的环形进度条实现颜色渐变效果

UI效果图

其实想实现环形渐变有很多种办法，比如我同事是用echarts，可是我真的很讨厌设置echarts的option要很多代码，我想用element的progress去实现，这样代码是最简洁的。

用了之后是这样原始的效果，是不是真的要丑哭了，这个问题困扰了我两三天，我把其他vue页面做完之后，再回过头来解决这个历史遗留问题，今天来上班的时候就已经做好最坏的打算了，大不了就写5个option，然后就各种百度，一点一点试错

当效果出来之后，我自己都忍不住发朋友圈

主要参考例子element 环形进度条设置颜色渐变

1、但是我看了之后还是不知道怎么做，只是比葫芦画瓢，写了svg的定义

这个svg，确实是如参考例子上写的那样，在页面上无关其他的地方就可以

2、用css设置svg

.my_progress /deep/ svg>path:nth-child(2) {
        stroke: url(#blue);
    }

页面结构

数据设置

这样看来是不是真的简单方便很多。

拓展：

环形渐变效果是出来了，现在还需要修改一下白底色

.my_progress /deep/ .el-progress-circle__track {
        stroke: rgba(0,122,255,0.3);
    }

以及百分比数字的样式

.my_progress /deep/ .el-progress__text {
        font-size: 36px !important;;
        font-weight: bolder;
        color: #FFFFFF;
    }

值得注意的上边代码用了 !important 

主要原因在于F12发现元素自带style，所以要用 !important 提升一下优先级

最后呈现出的效果：

唯一不太完美的是，%和percent字号一样大，我本来想用format设置一下样式，但是没有用，因为它把html直接呈现出了字符串，这个小问题，不知道将来的某一天是否可以解决，也希望过来人能指点迷津。