功能实现：

因为项目使用的UI框架是element、所以这里以element为例、实现数据进度的展示。

UI原型图：

elemet-ui提供Progress 进度条组件、直接引用即可。但是引入组件的样式是默认的、达不到我们的要求。

修改Progress进度条背景色

想要直接修改element组件的css样式值 需要加/deep/ 或者 >>> 实现样式穿透

HTML

复制 1<div class="progress"> 
 2    <el-progress :width="60" :hidden="60" type="circle" :percentage="50"></el-progress> 
 3</div>

CSS

复制 1<style lang="scss" scoped> // 此处使用的是scss语法 可以调整 不影响 
 2    .case-progress { 
 3        svg>path:nth-child(2) { 
 4            stroke: url(#write); // #write 此处的id就是定义的svg标签id 做替换即可 
 5        } 
 6    } </style>

修改Progress进度条颜色渐变

element中圆形进度条是由svg绘制渲染出来的、我们只能修改svg标签的色度起始值

HTML

声明svg标签即可、为了方便后续修改element进度条颜色渐变

复制 1<div style="width:0px; height: 0px;"> 
 2    <svg width="100%" height="100%"> 
 3        <defs> 
 4            <linearGradient id="write" x1="0%" y1="0%" x2="100%" y2="0%"> 
 5                <stop offset="0%" style="stop-color:#0299E2" stop-opacity="0.8"></stop> // offset 设置起始 stop-color 设置起始位置的颜色 
 6                <stop offset="100%" style="stop-color:#02E4DC" stop-opacity="1"></stop> // offset 设置起始 stop-color 设置起始位置的颜色 
 7            </linearGradient> 
 8        </defs> 
 9    </svg> 
10</div> 
11<div class="progress"> 
12    <el-progress :width="60" :hidden="60" type="circle" :percentage="50"></el-progress> 
13</div>

CSS

复制 1<style lang="scss" scoped> // 此处使用的是scss语法 可以调整 不影响 
 2    .case-progress { 
 3        svg>path:nth-child(2) { 
 4            stroke: url(#write); // #write 此处的id就是定义的svg标签id 做替换即可 
 5        } 
 6    } </style>

效果展示