var zhibiao = 60.2;
var min2 = 0;
var max2 = 100;
var splitNumber2 = 10;
var title2 = '完成率'
option = {
backgroundColor: '#000',
grid: {
containLabel: true,
left: 0,
right: 0,
top: 0,
bottom: 0,
},
title: {
text: zhibiao,
z: 99,
textStyle: {
color: 'rgba(32, 120, 245, 1)',
fontSize: 25,
fontWeight: 'bold',
},
itemGap: 10,
left: 'center',
top: '48%',
},
series: [
{
name: '刻度线及刻度值',
type: 'gauge',
center: ['50%', '50%'],//中心位置
radius: "65%",
min: min2,
max: max2,
splitNumber: splitNumber2,
axisLine: {// 仪表盘轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [
[1, 'rgba(255,255,255,0)']
],
width: 1,
},
},
splitLine: {// 仪表盘分隔线
distance: 0,
length: 10,
lineStyle: {
width: 1,
color: '#fff'
},
},
axisLabel: {// 仪表盘刻度标签
show: true,
distance: 10,
fontSize: 10,
color: "#fff",
formatter: function (value) {
return value % 10 == 0 ? value : '';
}
},
axisTick: {// 仪表盘刻度
distance: 0,
length: 1,
lineStyle: {
color: 'rgba(250,214,57,0.6)',
},
},
pointer: {// 仪表盘指针
show: false
},
anchor: {// 表盘中指针的固定点
show: false,
showAbove: true,
},
detail: {// 仪表盘详情，用于显示数据
fontSize: 20,
color: '#FFFFFF', // 数据详情颜色
formatter: title2,
offsetCenter: ["0%", "86%"]
},
data: [{
value: zhibiao
},],
},
{
name: '进度条及指示器',
type: 'gauge',
center: ['50%', '50%'],
radius: "73%",
z: 40,
min: min2,
max: max2,
splitNumber: splitNumber2,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false,
distance: 25,
color: '#fff',
fontSize: 20
},
axisTick: {
show: false
},
anchor: {
show: false,
showAbove: true,
},
detail: {
show: false
},
data: [{
value: zhibiao
},],
pointer: {
z: 1,
show: true,
length: '80%',
itemStyle: {
color: '#3D91EA'
}
},
progress: {
show: true,
width: 19,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#366AE3'
},
{
offset: 1,
color: '#42ACEF'
}
]
}
}
},
},
{
name: '进度条及指示器背景',
type: 'gauge',
center: ['50%', '50%'],
radius: "73%",
z: 30,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false,
},
axisTick: {
show: false
},
anchor: {
show: false,
showAbove: true,
},
detail: {
show: false
},
data: [{
value: 100
},],
pointer: {
show: false,
},
progress: {
show: true,
width: 19,
itemStyle: {
color: 'rgba(66,172,239,0.3)'
},
},
},
{
name: '最外层渐变覆盖区',
type: 'gauge',
center: ['50%', '50%'],
radius: "80%",
min: min2,
max: max2,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
pointer: {
show: false
},
progress: {
show: true,
roundCap: true,
width: 6,
itemStyle: {
borderColor: 'transparent',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(54,106,227,1)'
},
{
offset: 1,
color: 'rgba(66,172,239,0)'
}
]
}
}
},
detail: {
show: false
},
itemStyle: {
color: 'rgba(255, 36, 74,.3)',
borderColor: 'rgba(255, 36, 74,1)',
},
data: [{
value: zhibiao
},]
},
{
z: 89,
type: 'pie',
name: '内层细圆环',
radius: ['20%', '25%'],
startAngle: 360,
hoverAnimation: false,
clockWise: true,
silent: true,
itemStyle: {
normal: {
color: 'rgb(9,31,69)',
shadowBlur: 0,
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [100]
},
{
z: 89,
type: 'pie',
name: '内层圆饼',
radius: ['0%', '20%'],
startAngle: 360,
hoverAnimation: false,
clockWise: true,
silent: true,
itemStyle: {
normal: {
color: 'rgb(0,0,0)',
shadowBlur: 6,
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [100]
},
],
};