let maxValue = 100;
let value = 70.2;
let title = '仪表盘自定义配置';
let warpBgc = "#E3EFFF";
let inLineColor = ['#1B56A9', '#377FE3'];
let valueColor = '#1B56A9';
let splitLineColor = "#1B56A9";
option = {
backgroundColor: '#fff',
title: [{
text: title,
bottom: '17%',
x: 'center',
// borderColor: '#1598FF',
// borderWidth: 1,
// borderRadius: 15,
// backgroundColor: '#1598FF',
padding: [7, 14],
textStyle: {
fontWeight: 'normal',
fontSize: 38,
lineHeight: 46,
color: '#7789AA',
}
}],
angleAxis: {
show: false,
max: maxValue * 360 / 270,
type: 'value',
startAngle: 225,
splitLine: {
show: false
}
},
barMaxWidth: 35,
radiusAxis: {
show: false,
type: 'category',
},
polar: {
center: ['50%', '50%'],
radius: '130%'
},
series: [
{
type: 'pie',
radius: '80%',
selectedMode: false,
center: ['50%', '50%'],
z: 0,
itemStyle: {
normal: {
color:
new echarts.graphic.RadialGradient(.5, .5, 1, [
{
offset: 1,
color: warpBgc,
// color:'rgba(17,24,43,0)'
}
], false),
label: {
show: false
},
labelLine: {
show: false
}
},
},
emphasis: {
disabled: true
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false
},
data: [100],
},
{
type: 'bar',
data: [{
value: value,
itemStyle: {
// color: 'rgba(255,255,255,0)'
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: inLineColor[0],
},
{
offset: 1,
color: inLineColor[1],
}
]
),
},
}],
barGap: '-100%',
coordinateSystem: 'polar',
roundCap: true,
z: 3
},
{
type: 'bar',
data: [{
value: maxValue,
itemStyle: {
color: '#bbb',
opacity: 1,
borderWidth: 0,
shadowColor: '#fff',
shadowBlur: 20
},
}],
barGap: '-100%',
coordinateSystem: 'polar',
z: 1,
},
{
type: 'gauge',
startAngle: 225,
endAngle: -45,
z: 3,
min: 0,
max: maxValue,
axisLine: {
show: false,
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLabel: {
show: false
},
pointer: {
length: '55%',
shadowBlur: 5,
showAbove: true,
show: true,
},
anchor: {
show: false,
showAbove: false,
size: 25,
itemStyle: {
borderWidth: 10
}
},
itemStyle: {
color: splitLineColor,
borderColor: splitLineColor,
borderWidth: 6,
},
detail: {
formatter: function (params) {
return value;
},
color: valueColor,
fontWeight: 'bold',
fontSize: 60,
offsetCenter: [0, 180],
},
title: {
show: false
},
data: [{
value: value,
}]
},
{
name: '仪表盘背景相关',
type: 'gauge',
// center: ['20%', '50%'],
radius: '50%',
z: 3,
min: 0,
max: maxValue,
splitNumber: 20,
startAngle: 225,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [
[1, 'rgba(0,0,0,0)']
]
}
},
axisLabel: {
show: true,
color: '#4d5bd1',
distance: 25,
textStyle: {
// fontWeight: 'bold',
fontSize: 30,
color: '#7789AA',
},
formatter: function (value) {
return value % 10 == 0 ? value : '';
}
},
axisTick: {
show: true,
splitNumber: 1,
lineStyle: {
color: splitLineColor,
width: 25,
},
length: -5
},
splitLine: {
show: false,
length: -15,
lineStyle: {
color: splitLineColor,
width: 3,
}
},
detail: {
show: false
},
pointer: {
show: false
}
},
]
};