效果图：
仪表盘
const data = 6,maxdata = 10;
const radius = ["88%", "94%"];
const splitColor = "#e7edfd";
const innerColor = ["#3c6bfc","#E9EEFF"];
const fontColor = "#3D6CFD";
let title = {
text: data,
subtext: '压力(Mpa)',
x: 'center',
y: '42%',
textStyle: {
color: fontColor,
fontSize: 50,
fontFamily: 'Arial',
fontWeight: 400
},
subtextStyle: {
color: '#999',
fontSize: 20,
fontFamily: 'PingFang-SC-Regular'
}
};
option = {
backgroundColor: "#fff",
toolbox: {
feature: {
}
},
title:title,
animationDuration: 10000,
series: [
// 底色圈
{
type: "pie",
radius: radius,
hoverAnimation: false,
startAngle: 225,
endAngle: 45,
label: {
show: true
},
labelLine: {
show: false
},
animation: false,
data: [{
value: 75,
itemStyle: {
color: innerColor[1]
}
}, {
value: 25,
itemStyle: {
opacity: 0,
color:"#00f"
},
}]
},
// 刻度线
{
name: '刻度2',
type: 'gauge',
center: ['50%', '50%'],
radius: "79%",
startAngle: 200,
endAngle: -18,
splitNumber: 4, //刻度数量
axisLine: {
show: false,
lineStyle: {
width: 1,
color: [
[1, 'rgba(0,0,0,0)']
]
}
}, //分隔线样式。
splitLine: {
show: true,
length: 12,
lineStyle: {
width: 4
}
},
axisLabel: {
show: false,
},
axisTick: {
show: true,
splitNumber: 2,
length: 12,
lineStyle: {
width: 4,
color:splitColor
}
},
detail: {
show: false,
},
title: {
show: false,
}
},
{
name: "",
type: 'gauge',
min: 0,
max: maxdata,
radius: "96%",
splitNumber: 1, //刻度数量
startAngle: 225,
endAngle: 315,
axisLine: {
show: false,
lineStyle: {
width: 1,
color: [
[1, 'rgba(0,200,200,1)']
]
}
},
//分隔线样式。
splitLine: {
show: false,
},
axisLabel:{
distance: -10,
show: true,
formatter: function(value){
if(value === 0 || value === 10){
return value
}
return ''
},
padding: [20, 0, 0, 0],
lineHeight: -40,
fontSize: 26,
color: '#999'
},
axisTick: {
show: false
},
pointer: {
show: true,
width: 4,
length: "100%"
},
itemStyle: {
color: "#fff"
},
detail: {
show: false,
},
title: {
show: false,
}
},
// 仪表盘值得渐变
{
type: "pie",
radius: radius,
hoverAnimation: false,
startAngle: 225,
endAngle: 45,
label: {
show: false
},
labelLine: {
show: false
},
data: [{
name: "",
value: data/maxdata,
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0, [{
offset: 0,
color: innerColor[0]
},
{
offset: 1,
// color: '#7E00FF'
color: innerColor[0]
}
]
)
}
}, {
value: 1.325-(data/maxdata),
itemStyle: {
opacity: 0,
color:"rgba(255,255,255,0)"
},
}]
},
// 值的尾巴
{
"type": "pie",
radius: ['88%', '92%'],
"hoverAnimation": false,
startAngle: 225,
endAngle: 45,
"data": [{
"name": "",
"value": data/maxdata,
"label": {
show:false
},
"labelLine":{
show:false
},
itemStyle:{
color: 'rgba(0,0,0,0)'
}
},
{//画中间的图标
"name": "",
"value": 0,
"label": {
position:'inside',
backgroundColor: '#fff',
borderRadius: 14,
padding: 14,
borderWidth: 6,
// borderColor:'rgba(61, 108, 253, .9)'
borderColor:'rgba(179, 211, 253, .4)'
}
},{
"name": "",
value: 1.325-data/maxdata,
"label": {
show:false
},
"labelLine":{
show:false
}
,
itemStyle:{
color: 'rgba(255,255,255,0)'
}
}]
}
]
};
