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: 5,
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: 50,
opacity: 1,
color: [
[
obj.pointData / 100,
{
x: 0,
y: 0,
x1: 0,
y1: 0,
colorStops: [
{
offset: 0,
color: 'rgba(25,152,246,0)'
},
{
offset: 0.4,
color: 'rgba(25,152,246,1)'
},
{
offset: 1,
color: 'rgba(25,152,246,1)'
}
]
}
],
[1, '#001f3d']
]
}
},
// 仪表盘刻度标签
axisLabel: {
show: false
},
axisTick: {
show: true,
distance: 50,
lineStyle: {
color: '#000',
width: 4
},
length: 60
} //刻度样式
},
// 外圆线
{
type: 'pie',
radius: ['77%', '76%'],
center: ['50%', '50%'],
hoverAnimation: false, //鼠标移入变大
startAngle: 225,//起始角度
labelLine: {
show: false,
},
label: {
position: 'center',
},
data: [
{
value: 75,
itemStyle: {
shadowBlur: 0,
shadowColor: '#fff',
color: 'rgba(0,61,129,1)'
},
},
{
value: 25,
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
},
],
},
// 内圆线
{
type: 'pie',
radius: ['64%', '65%'],
center: ['50%', '50%'],
hoverAnimation: false, //鼠标移入变大
startAngle: 225,//起始角度
labelLine: {
show: false,
},
label: {
position: 'center',
},
data: [
{
value: 75,
itemStyle: {
shadowBlur: 0,
shadowColor: '#fff',
color: 'rgba(61,129,220,0.5)'
},
},
{
value: 25,
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0,0,0,0)',
borderWidth: 0,
},
},
],
},
],
};