option = {
series: [
{
type: 'gauge',
// 仪表盘的外圈 渐变色
axisLine: {
lineStyle: {
width: 130,
color: [
[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "rgba(54, 240, 151, 0.2)"
},
{
offset: 1,
color: "rgba(90, 63, 255, 0.2)"
}
])
]
]
}
},
axisTick: {
distance: -112,
show: true, // 显示小刻度线
length: 15, // 刻度线长度
lineStyle: {
width: 5, // 刻度线宽度
color: 'rgba(255, 255, 255, 0.4)' // 刻度线颜色
}
},
splitLine: { // 长刻度线
distance: -112,
length: 30,
lineStyle: {
width: 5,
color: 'rgba(255, 255, 255, 1)'
}
},
// 刻度数值
axisLabel: {
distance: 140, // 数值与刻度的距离
color: 'rgba(255, 255, 255, 0.6)',
fontSize: 40
},
// 中心圆
anchor: {
show: true,
showAbove: true,
size: 45, // 中心圆的大小
itemStyle: {
borderWidth: 15, //中心圆的边框大小
borderColor:"#fff", // 边框颜色
color:"#000" // 中心圆颜色
}
},
// 指针
pointer: {
width:15,
length: '65%',
// offsetCenter: [0, '5%'], 指针位置 默认圆中心
itemStyle: {
color: '#ADE1FF',
}
},
title: {
show: false
},
// 文字
detail: {
valueAnimation: true,
fontSize: 50,
formatter: '{value} %',
color: '#3DFFDC',
offsetCenter: [0, '70%'] // 文字的位置
},
data: [
{
value: 40
}
]
},
{
type: 'gauge',
// center: ['50%', '60%'], // 仪表盘位置(圆心坐标)
// startAngle: 200, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
// endAngle: -20, // 仪表盘结束角度,默认 -45
// min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
// max: 60, // 最大的数据值,默认 100 。映射到 maxAngle。
// clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
// splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
itemStyle: {
color: '#FD7347',
},
axisLine: {
lineStyle: {
width: 18,
color: [
[0.35, '#36F097'],
[0.75, '#1ED6FF'],
[1, '#5A3FFF']
],
// shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
},
pointer: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
},
data: [
{
value: 20
}
]
}
]
};