echarts得分环进度条颜色
时间: 2023-07-05 18:29:40 浏览: 130
ECharts 得分环进度条的颜色可以通过设置渐变色实现,示例代码如下:
```javascript
option = {
series: [
{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
color: ['rgba(0, 255, 0, 1)', 'rgba(255, 255, 0, 1)', 'rgba(255, 165, 0, 1)', 'rgba(255, 0, 0, 1)'],
label: {
normal: {
formatter: '{a|{b}}{abg|}\n{hr|}\n {c|{c}}%',
rich: {
a: {
color: '#999',
fontSize: 24,
lineHeight: 30,
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 30,
borderRadius: [4, 4, 0, 0],
},
hr: {
borderColor: '#333',
width: '100%',
borderWidth: 0.5,
height: 0,
},
c: {
fontSize: 32,
lineHeight: 30,
color: 'auto',
},
},
},
},
outline: {
itemStyle: {
borderWidth: 5,
borderColor: '#fff',
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
borderDistance: 0,
},
backgroundStyle: {
color: '#333',
},
},
],
};
```
其中,color 属性为一个数组,每个元素代表一个颜色,可以设置为颜色字符串或者 RGBA 颜色值。通过调整数组元素的顺序,可以改变进度条颜色的渐变顺序。
阅读全文