给element进度条设置渐变色

今天遇到一个element进度条样式问题：将进度条的颜色设置为渐变色。

效果图如下：

进度条颜色效果图

查看element官方文档得知，ele官方提供的color方法支持单色显示

Elemen官方文档

element官方文档

element官方文档

考虑到CSS中 background-image属性可以提供颜色渐变，在网页F12中直接调试后发现该方法可行：

linear-gradient

1.基本用法：

background-image:linear-gradient(red, yellow, blue, green); 

background-image:linear-gradient(rgba(255,0,0,.2), yellow, blue, green);

2.控制颜色渐变的方向：

/*0deg= to top-- 从下到上*/

background-image: linear-gradient(0deg, red, yellow, blue, green);

/*基于0度顺时针旋转45deg*/

background-image: linear-gradient(45deg, red, yellow, blue, green);

/*基于0度逆时针旋转45deg*/

background-image: linear-gradient(-45deg, red, yellow, blue, green);

3.控制颜色渐变的方向(to)：

/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果，方向为右*/

/*向左同理*/

background-image:linear-gradient(to right, red50px, yellow, blue, green);

background-image:linear-gradient(to right, red50px, yellow50px, blue, green);

background-image:linear-gradient(to right, red50px, yellow50px, yellow100px, blue, green);

我的思路是用css类选择器直接选择element动态生成的div，然后设置background-image:linear-gradient(),但是在调试中发现这样写不生效，询问同事得知，ele样式在scoped中更改时无效的，但是删掉scoped的话会影响到全局的样式：

卡在这里一会后，我不出意外地又去求助度娘了，查询后得到了修改ele动态生成的元素样式的方法，实现代码如下：

修改elel动态生成的元素样式

很简单吧？这里需要注意的有两点，首先是重新写一个style的时候需要删掉scoped属性，其次要找一个我们准备修改样式的类名的父元素，然后书写就可以了。

还有另一种方法更加简单，虽然我没尝试，但是还是写出来吧，小伙伴们有兴趣可以试一下：

/deep/；.personCharts为我们要修改组件类名的父级组件样式类名。