参考他人案例
option = {
backgroundColor: '#1b1b1b',
series: [
{
type: 'gauge',
min: 0,
max: 220,
splitNumber: 10,
radius: '70%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
// color: [[0.01, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
color: [[0.3, 'rgba(42,144,255,0.95)'],
[0.82, 'rgba(245,245,220,0.05)']
],
width: 15,//盘表圆宽度
shadowColor: '#fff', //默认透明
shadowBlur: 15,
},
roundCap:true
},
//capType: 'round',
startAngle: 180,//盘角度起始位置
endAngle:-45,//盘角度截至位置
axisLabel: { // 坐标轴小标记 -刻度数
fontWeight: 'bolder',
// color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 15,
show:false
},
axisTick: { // 坐标轴小标记
length: 9, // 属性length控制线长
// lineStyle: { // 属性lineStyle控制线条样式
// // color:[1,'rgba(255,255,0,0.5)'],
// shadowColor: 'rgba(124,252,0,5)', //默认透明
// shadowBlur: 10
// },
//show:false
},
splitLine: { // 坐标轴大标记
length:25, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width: 5,
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 15
},
show:false
},
pointer: { // 指针
shadowColor: '#fff', //默认透明
shadowBlur: 5,
length: 0,
show:false
},
title: {//data-name 样式,位置
offsetCenter: [0, '-15%'], //改变标题的位置
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 28,
fontStyle: 'normal',
color: '#fff'
}
},
detail: {//data-Value 样式,位置
offsetCenter: [0, -110], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
//fontWeight: 'bolder',
color: '#fff'
},
fontSize: 35,
formatter: '{value}%'
},
data: [{value:45.5,name:'园区温度'}],
//roundCap: true
},
]
};
效果如下:
渐变色
这里的渐变色,还是问题的,如何提取Value 的值,比如45.5%, 在
offset1中 设置为’value’*0.3,
offset2中设置为 ‘value’*0.7,
offset3为空缺 rgba(245,245,220,0.01)
axisLine: {
lineStyle: {
color: [
[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0.1,
color: "#FFC600"
},
{
offset: 0.6,
color: "#30D27C"
},
{
offset: 1,
color: "rgba(245,245,220,0.01)"
}
])
]
]
}
}