源码引自:https://www.makeapie.com/editor.html?c=xj5fIwQ_YM
echarts版本:echarts-4.9.0
代码如下:
let data = 100;
let rate = '♥♥♥♥♥';
option = {
//backgroundColor: 'transparent',
backgroundColor: '#00111b',
// 标题:【0】指数显示,【1】数值显示
title: [{
text: '身心能量指数\n' + rate,
x: 'center',
top: '54%',
textStyle: {
color: '#be8c3c',
fontSize: 20,
fontWeight: '100',
}
}, {
text: data,
x: 'center',
top: '43%',
textStyle: {
fontSize: '90',
color: '#be8c3c',
fontFamily: 'SimHei',
fontStyle: 'oblique',
foontWeight: '500',
},
}],
// 极坐标系
polar: {
radius: ['24%', '30%'],
center: ['50%', '50%'],
},
// 极坐标系:角度轴
angleAxis: {
max: 100 * 360 / 270,
show: false,
type: 'value',
startAngle: 225
},
// 极坐标系:径向轴
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
series: [
// 第二层:数据以进度条的形式展示
{
type: 'bar',
data: [{
value: data
}],
itemStyle: {
color: function() {
let obj = {
type: 'linear',
x: 0, //右
y: 0.5, //下
x2: 1, //左
y2: 0, //上
colorStops: [{
offset: 0,
color: '#8ac4d4'
}, {
offset: 1,
color: '#ec5e26'
}]
};
if (data >= 0 && data < 20) {
obj.colorStops[1].color = '#8ac4d4';
} else if (data >= 20 && data < 40) {
obj.y = 0.3;
obj.x2 = 2;