配置项如下
var value = 0.5;
var data = [value, value];
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#0f0248'
}, {
offset: 1,
color: '#0f0248'
}]),
title: [
{
text: 'BANDWIDTHUSE',
x: 'center',
y: '70%',
textStyle: {
color: '#FFF',
fontSize: 20,
fontWeight: 'normal',
}
}, {
text: (value * 100).toFixed(0) + '%',
x: 'center',
top: '58%',
textStyle: {
fontSize: '80',
color: '#FFF',
},
}],
series: [{
type: 'liquidFill',
radius: '80%',
center: ['50%', '50%'],
// shape: 'roundRect',
data: data,
backgroundStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0.5,
y2: 1,
colorStops: [{
offset: 1,
color: '#0f0248'
}, {
offset: 0,
color: '#0f0248'
}],
globalCoord: false
},
},
outline: {
borderDistance: 10,
itemStyle: {
borderWidth: 10,
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#962498'
}, {
offset: 1,
color: '#eb0a51'
}],
globalCoord: false
},
shadowBlur: 10,
shadowColor: '#000',
}
},
color: ['rgba(210, 2, 124,0.3)', 'rgba(147, 78, 233,.3)'],
label: {
normal: {
formatter: '',
}
}
}, ]
};