let obj = {
text: "断面水质达标率",
pointData: 88.12
}
option = {
backgroundColor: '#000',
graphic: {
type: 'text',
left: '38%',
top: '75%',
style: {
text: obj.text,
textAlign: 'center',//居中对齐
fill: '#fff',//填充色
fontSize: 40,
fontWeight: 400,
fontFamily: "SourceHanSansCN-Regular, SourceHanSansCN",
},
},
series: [
{
type: 'gauge',
radius: '75%',
z: 1,
startAngle: 225,
endAngle: -45,
splitNumber: 18,
splitLine: {
show: false,
},
detail: {//显示详情数据
show: true,
offsetCenter: [0, 10],//水平、垂直偏移
fontSize: 18,
formatter: (val) => [`{a|${obj.pointData}%}`].join(''),
rich: {
a: {
fontSize: 88,
lineHeight: 102,
fontFamily: 'DINCond-Bold, DINCond',
fontWeight: 'bold',
color: '#FFFFFF',
},
},
},
// 仪表盘的线，颜色值为一个数组
axisLine: {
show: true,
lineStyle: {
width: 20,
opacity: 1,
color: [
[
obj.pointData / 100,
{
x: 0,
y: 0,
x1: 1,
y1: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 138, 255, 1)',
},
{
offset: 1,
color: 'rgba(146, 250, 255, 1)',
},
],
},
],
[1, '#54565c'],
],
},
},
axisLabel: {
show: false
},
axisTick: {
show: true,
splitNumber: 1,
lineStyle: {
color: 'rgba(7, 24, 40, 1)',
width: 4,
},
length: 20,
}, //刻度样式
},
// 外圆线
{
type: 'pie',
radius: ['80%', '79%'],
center: ['50%', '50%'],
hoverAnimation: false, //鼠标移入变大
startAngle: 225,//起始角度
labelLine: {
show: false,
},
label: {
position: 'center',
},
data: [
{
value: 75,
itemStyle: {
shadowBlur: 0,
shadowColor: '#fff',
color: 'rgba(64, 86, 104, 1)'
},
},
{
value: 25,
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
},
],
},
],
};