option = {
backgroundColor: '#07182e',
grid: {
containLabel: true,
left: 0,
right: 0,
top: 0,
bottom: 0,
},
xAxis: { show: false, min: 0,max:10 },
yAxis: { show: false, min: 0,max:10 },
series: [
{
symbolSize: ['160%', '65%'],
symbol: 'image://http://img.isqqw.com/profile/upload/2023/10/12/5a130bfb-1cf1-45b1-9ab5-40385b096155.png',
data: [
[4.8, 10]
],
z: 0,
symbolPosition: 'center',
type: 'pictorialBar'
},
{
type: 'gauge',
center: ['25%', '50%'],
radius: "35%",
min: 0,
max: 500,
splitNumber: 10,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[1, '#fff']],
width: 3,
},
},
splitLine: {
lineStyle: {
color: '#FFF',
},
},
axisLabel: { show: true, color: "#FFF" },
axisTick: {
length: 5,
lineStyle: {
color: '#FFF',
},
},
pointer: {
show: false
},
anchor: {
show: false,
showAbove: true,
},
detail: {
fontSize: 15,
color: '#FFF', // 数据详情颜色
formatter: '9994939 KM',
offsetCenter: ["0%", "65%"]
},
data: [
{
value: 350
},
],
},
{
type: 'gauge',
center: ['25%', '50%'],
radius: "34%",
min: 0,
max: 500,
axisLine: {
show: true,
lineStyle: {
width: 200,
color: [
[
350 / 500, new echarts.graphic.LinearGradient(
0, 1, 1, 0, [{
offset: 0,
color: 'rgba(33,255,186,0)',
}, {
offset: 0.3,
color: 'rgba(33, 255, 186,0)',
},
{
offset: 1,
color: 'rgba(33, 255, 186,.8)',
}
]
)
],
[
1, 'rgba(255, 36, 74,0)'
]
]
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
show: false
},
itemStyle: {
color: 'rgba(255, 36, 74,.3)',
borderColor: 'rgba(255, 36, 74,1)',
},
data: [{
value: 350
},]
},
{
//内圆
type: 'pie',
radius: '13%',
center: ['25%', '50%'],
z: 2,
animation: false,
itemStyle: {
color: '#07182e',
shadowColor: 'rgba(33, 255, 186,.8)',
shadowBlur: 30
},
hoverAnimation: false,
label: {
show: true,
fontSize: 30,
fontWeight: 600,
color: "#FFF",
position: 'center',
formatter: "{c}\n{a|KM/H}",
rich: {
a: {
color: '#fff',
fontSize: 12,
}
}
},
tooltip: {
show: false,
},
data: [350],
},
{
type: 'gauge',
center: ['75%', '50%'],
radius: "35%",
min: 0,
max: 10,
splitNumber: 10,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[1, '#fff']],
width: 3,
},
},
splitLine: {
lineStyle: {
color: '#FFF',
},
},
axisLabel: { show: true, color: "#FFF" },
axisTick: {
lineStyle: {
color: '#FFF',
},
},
pointer: {
show: false,
},
anchor: {
show: false,
},
detail: {
fontSize: 15,
color: '#FFF', // 数据详情颜色
formatter: '{value} KM/H',
offsetCenter: ["0%", "65%"]
},
data: [
{
value: 4.5
},
],
},
{
type: 'gauge',
center: ['75%', '50%'],
radius: "34%",
min: 0,
max: 10,
axisLine: {
show: true,
lineStyle: {
width: 200,
color: [
[
4.5 / 10, new echarts.graphic.LinearGradient(
0, 1, 1, 0, [{
offset: 0,
color: 'rgba(33,255,186,0)',
}, {
offset: 0.3,
color: 'rgba(33, 255, 186,0)',
},
{
offset: 1,
color: 'rgba(33, 255, 186,.8)',
}
]
)
],
[
1, 'rgba(255, 36, 74,0)'
]
]
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
show: false
},
itemStyle: {
color: 'rgba(255, 36, 74,.3)',
borderColor: 'rgba(255, 36, 74,1)',
},
data: [{
value: 4.5
},]
},
{
//内圆
type: 'pie',
radius: '13%',
center: ['75%', '50%'],
z: 2,
animation: false,
itemStyle: {
color: '#07182e',
shadowColor: 'rgba(33, 255, 186,.8)',
shadowBlur: 30
},
hoverAnimation: false,
label: {
show: true,
fontSize: 30,
fontWeight: 600,
color: "#FFF",
position: 'center',
formatter: "{c}\n{a|KM/H}",
rich: {
a: {
color: '#fff',
fontSize: 12,
}
}
},
tooltip: {
show: false,
},
data: [4.5],
},
],
};