echarts绘制多条刻度线仪表盘，文本内容带背景且颜色渐变，echarts绘制复杂仪表盘
option = {
series: [
{
// 最外圈
type: 'gauge',
radius: '80%',
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
progress: {
show: false,
width: 8
},
pointer: {
show: false
},
axisLine: {
show: false,
lineStyle: {
width: 50,
color: [
// axisTick使用的是这里的颜色
[0.3, '#00ffff50'],
[0.7, '#00ffff'],
[1, '#00ffff50']
]
}
},
axisTick: {
distance: -60,
splitNumber: 5,
length: 8, // 刻度线长度
lineStyle: {
color: 'auto',
width: 2 // 刻度线宽度
}
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
// 第二个刻度盘
type: 'gauge',
radius: '75%',
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
progress: {
show: false,
width: 8
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 1,
color: [[1, '#00ffff80']]
}
},
axisTick: {
// 刻度线
distance: -8,
splitNumber: 3,
lineStyle: {
width: 1,
color: '#00ffff80'
}
},
splitLine: {
distance: -12,
length: 5,
lineStyle: {
width: 1,
color: '#00ffff80'
}
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
// 进度条仪表盘
type: 'gauge',
radius: '71.3%',
center: ['50%', '90%'],
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 12,
progress: {
// 进度条
show: true,
roundCap: true,
width: 30,
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: '#00acfc' // 0% 处的颜色
},
{
offset: 0,
color: '#00f8d9' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
pointer: {
//仪表盘指针
show: true,
showAbove: true,
length: '20%',
width: 30,
icon: 'arrow',
offsetCenter: [-20, -20],
itemStyle: {
color: '#19ebff'
}
},
axisLine: {
roundCap: true,
lineStyle: {
width: 30,
color: [[1, '#00ffff30']] // 圆环底色
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
anchor: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
width: '60%',
borderRadius: 8,
offsetCenter: [0, '-25%'],
fontSize: 36,
fontWeight: 'bolder',
formatter: '{value}%', // %文字大小调整
color: '#fff'
},
data: [
{
value: 80
}
]
},
{
// 背景颜色
type: 'pie',
radius: '60%',
center: ['50%', '90%'],
roseType: 'radius',
silent: true,
startAngle: 180,
legendHoverLink: false,
itemStyle: {
borderRadius: 0
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
color: [
new echarts.graphic.RadialGradient(
0.5,
1,
2,
[
{
offset: 0.3,
color: '#19ebff00'
},
{
offset: 0.5,
color: '#19ebff50'
},
{
offset: 1,
color: '#19ebff80'
}
],
false
),
'#FFFFFF00'
], // 第二个元素控制下半圆透明
data: [
{ value: 10, name: 'r' },
{ value: 10, name: 'r0' }
]
}
]
};
效果如下：
