option = {
series: [
// 等级描述
{
name: '等级描述',
type: 'gauge',
radius: '98%',
center: ['50%', '60%'],
splitNumber: 130, //刻度数量
min: 0,
max: 130,
z: 0,
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: '#4E5969',
fontSize: 12,
distance: -65,
formatter: function (value) {
if (value == 0) {
return ''
} else if (value == 18) {
return '三级预警'
} else if (value == 38) {
return '二级预警'
} else if (value == 52) {
return '一级预警'
} else if (value == 100) {
return '无需预警'
}
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
}, //刻度样式
splitLine: {
show: false,
}, //分隔线样式
detail: {
show: false,
},
},
// 大白底
{
type: 'pie',
radius: '98%',
selectedMode: false,
center: ['50%', '60%'],
z: 0,
itemStyle: {
normal: {
color: '#ffffff',
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
emphasis: {
disabled: true,
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false,
},
data: [100],
},
// 刻度 仪表盘
{
name: '刻度',
type: 'gauge',
radius: '90%',
z: 500,
min: 0,
max: 130,
center: ['50%', '60%'],
splitNumber: 5, //刻度数量
pointer: {
//仪表盘指针
icon: 'circle',
length: 14,
width: 14,
roundCap: true,
offsetCenter: [0, '-96%'],
itemStyle: {
color: 'transparent',
borderCap: 'round',
borderColor: '#fff',
borderWidth: '6',
},
},
axisLine: {
show: true,
distance: 10,
lineStyle: {
width: 10,
color: [
[36 / 130, '#e64232'],
[47 / 130, '#f87c29'],
[68 / 130, '#f2af25'],
[1, '#2ebb39'],
],
},
}, //仪表盘轴线
axisLabel: {
show: true,
color: '#4E5969 ',
distance: 15,
fontSize: 12,
}, //刻度标签。
axisTick: {}, //刻度样式
splitLine: {}, //分隔线样式
title: {
color: '#4E5969',
offsetCenter: [0, '15%'],
fontSize: 12,
},
detail: {
formatter: function (value) {
return '{bule|' + value + '}'
},
rich: {
bule: {
fontSize: 24,
fontFamily: 'Microsoft YaHei, Microsoft YaHei',
color: '#1D2129',
fontWeight: 'bold',
},
},
offsetCenter: ['0%', '-5%'],
},
data: [
{
name: '心理健康指数',
value: 36,
},
],
},
// 白圈
{
type: 'pie',
radius: ['45%', '48%'],
selectedMode: false,
center: ['50%', '60%'],
z: 0,
itemStyle: {
normal: {
color: '#f1f5ff',
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
emphasis: {
disabled: true,
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false,
},
data: [100],
},
// 内部底色圈
{
type: 'pie',
radius: '40%',
selectedMode: false,
center: ['50%', '60%'],
z: 100,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: '#ffffff',
},
{
offset: 0.2,
color: '#e8efff',
},
{
offset: 0.5,
color: '#fff',
},
{
offset: 0.8,
color: '#e8efff',
},
{
offset: 1,
color: '#e8efff',
},
]),
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
emphasis: {
disabled: true,
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false,
},
data: [100],
},
],
};