let obj = {
text: "审核率",
data: 75
}
option = {
backgroundColor: 'rgba(0,0,0,0.5)',
title: {
text: "{title|预警类别}",
textStyle: {
rich: {
title: {
fontSize: 14,
fontWeight: 400,
color: '#fff',
padding: [0, 0, 60, 0]
// align: 'center',
// verticalAlign: 'middle'
}
},
},
x: "center",
y: "center",
},
// graphic: {
// type: 'text',
// left: '38%',
// top: '75%',
// x: "center",
// y: "center",
// style: {
// text: obj.text,
// textAlign: 'center',//居中对齐
// fill: '#fff',//填充色
// fontSize: 40,
// fontWeight: 400,
// fontFamily: "SourceHanSansCN-Regular, SourceHanSansCN",
// },
// },
series: [
{
type: 'gauge',
radius: '75%',
z: 1,
clockwise: false,//逆时针
startAngle: -269.99,
endAngle: 90,
splitNumber: 24,
splitLine: {
show: false,
},
detail: {//显示详情数据
show: true,
color: "#fff",
offsetCenter: [0, -80],//水平、垂直偏移
fontSize: 18,
formatter: (val) => [`{a|${obj.data}%}`].join(''),
rich: {
a: {
fontSize: 36,
// lineHeight: 102,
fontFamily: 'DINCond-Bold, DINCond',
fontWeight: 'bold',
color: '#FFFFFF',
},
},
},
// 仪表盘的线，颜色值为一个数组
axisLine: {
show: true,
lineStyle: {
width: 20,
opacity: 1,
color: [
[
obj.data / 100,
{
x: 1,
y: 1,
x1: 0,
y1: 0,
colorStops: [
{
offset: 1,
color: 'rgba(0, 228, 255, 1)',
},
{
offset: 0,
color: 'rgba(105, 255, 151, 1)',
},
],
},
],
[1, 'rgba(255,255,255,0.1)'],
],
},
},
axisLabel: {
show: false
},
//指针
pointer: {
show: false,
},
axisTick: {
show: true,
splitNumber: 1,
distance: -20,
lineStyle: {
color: 'rgba(3, 72, 84, 1)',
width: 4,
},
length: 20,
}, //刻度样式
data: [{
value: obj.data
}]
},
// 外圆线
{
type: 'pie',
radius: ['80%', '79%'],
center: ['50%', '50%'],
hoverAnimation: false, //鼠标移入变大
clockwise: false,//逆时针
startAngle: 90,//起始角度
endAngle: -269.99,
labelLine: {
show: false,
},
label: {
position: 'center',
},
data: [
{
value: obj.data,
itemStyle: {
shadowBlur: 0,
shadowColor: '#fff',
color: 'rgba(58, 131, 102, 1)'
},
},
{
value: 100 - obj.data,
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(255,255,255,0.1)',
borderWidth: 0,
},
},
],
},
//圆点
{
type: 'gauge',
z: 5,
clockwise: false,//逆时针
startAngle: -269.99,
endAngle: 90,
axisLine: {
show: false,
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLabel: {
show: false
},
pointer: {
icon: 'circle', // 箭头图标
length: '12%',
width: 14,
height: 14,
offsetCenter: [0, '-100%'], // 箭头位置
itemStyle: {
color: 'rgba(74, 234, 174, 1)', // 箭头颜色
// shadowColor: 'rgba(74, 234, 174, 1)',
// shadowBlur: 10
},
},
detail: {
show: false,
},
title: {
show: false
},
data: [
{
value: obj.data,
},
{
value: 0,
}],
},
],
};