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;
} else if (data >= 40 && data < 60) {
obj.y = 0.3;
obj.x2 = 1.5;
} else if (data >= 60 && data < 80) {
obj.y = 0.4;
obj.x2 = 1.1;
}
return obj;
}
},
barGap: '-100%',
coordinateSystem: 'polar',
roundCap: true,
cursor: 'auto',
z: 2
},
// 第二层：进度条背景
{
type: 'bar',
data: [{
value: 100,
}],
itemStyle: {
color: '#013f72'
},
barGap: '-100%',
coordinateSystem: 'polar',
roundCap: true,
cursor: 'auto',
emphasis: {
itemStyle: {
color: '#013f72'
}
},
z: 1
},
// 第一层：中心文字展示区
{
type: 'pie',
radius: ['0%', '22%'],
hoverAnimation: false,
center: ['50%', '50%'],
cursor: 'auto',
itemStyle: {
normal: {
labelLine: {
show: false
},
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#174869'
}, {
offset: 1,
color: '#08385c'
}]
}
}
},
data: [{
value: 100
}],
z: 2
},
// 第三层；仪表盘：只显示刻度
{
type: 'gauge',
radius: '35%',
startAngle: '225',
endAngle: '-45',
splitNumber: 10,
center: ['50%', '50%'],
min: 0,
max: 100,
pointer: {
show: false
},
title: {
show: false
},
detail: {
show: false
},
data: [{
value: 100,
name: ''
}],
axisLine: {
lineStyle: {
width: 20,
color: [
[0, '#5fa7ca'],
[1, '#5fa7ca']
],
opacity: 0
}
},
axisTick: {
length: 14,
lineStyle: {
color: 'auto'
}
},
splitLine: {
show: false
},
axisLabel: {
show: true,
distance: 18, //距离刻度的距离
lineHeight: -50,
formatter: function(value) {
return value % 100 === 0 ? value : '';
}
}
},
// 第四层；背景圆：带阴影
{
type: 'pie',
radius: ['0%', '40%'],
hoverAnimation: false,
center: ['50%', '50%'],
cursor: 'auto',
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#002e50'
}, {
offset: 0.9,
color: '#002e50'
}, {
offset: 1,
color: '#134568'
}]
}
},
data: [{
value: 100
}],
labelLine: {
show: false
},
z: -1
},
// 第五层：视觉上类似于边框，带阴影
{
type: 'pie',
radius: ['0', '40.4%'],
hoverAnimation: false,
center: ['50%', '50%'],
cursor: 'auto',
itemStyle: {
color: '#146a90',
shadowBlur: 50,
shadowColor: '#146a90'
},
data: [{
value: 100
}],
labelLine: {
show: false
},
emphasis: {
itemStyle: {
color: '#146a90'
}
},
z: -2
},
// 第六层：看着类似一个边框，不细看，看不出来，此项目的在于突出立体感
{
type: 'pie',
radius: ['46.7%', '47%'],
hoverAnimation: false,
center: ['50%', '50%'],
cursor: 'auto',
itemStyle: {
color: '#07223b',
},
data: [{
value: 100
}],
labelLine: {
show: false
},
emphasis: {
itemStyle: {
color: '#07223b'
}
},
z: -2
},
// 第七层：
{
type: 'pie',
radius: ['47%', '54%'],
hoverAnimation: false,
center: ['50%', '50%'],
cursor: 'auto',
itemStyle: {
color: '#00182d',
},
data: [{
value: 100
}],
labelLine: {
show: false
},
emphasis: {
itemStyle: {
color: '#00182d'
}
},
z: -2
},
// 第八层：
{
type: 'pie',
radius: ['54%', '60%'],
hoverAnimation: false,
center: ['50%', '50%'],
cursor: 'auto',
itemStyle: {
color: '#011422',
},
data: [{
value: 100
}],
labelLine: {
show: false
},
emphasis: {
itemStyle: {
color: '#011422'
}
},
z: -2
},
]
};
// 随机数据
function numb() {
data = Math.floor(Math.random() * 100);
if (data >= 0 && data < 20) {
rate = '♡♡♡♡♡';
} else if (data >= 20 && data < 40) {
rate = '♥♡♡♡♡';
} else if (data >= 40 && data < 60) {
rate = '♥♥♡♡♡';
} else if (data >= 60 && data < 80) {
rate = '♥♥♥♡♡';
} else if (data >= 80 && data <= 100) {
rate = '♥♥♥♥♡';
} else {
rate = '♥♥♥♥♥';
}
option.title[0].text = '身心能量指数\n' + rate;
option.title[1].text = data;
option.series[0].data[0].value = data;
myChart.setOption(option, true);
}
setInterval(function() {
numb();
}, 1000);