情景:实际值>计划值 仪表盘颜色显示 绿色表示超过预期 相反则表示未达到预期
如图


js 控制 方法
gauge.js
if (factVal >= planVal) {
_curOption.series[1].axisLine.lineStyle.color = [[0.0, 'lime'], [ _curOption.series[1].data[0].value/100, '#55CEA9'], [1, '#efefef']];
} else {
_curOption.series[1].axisLine.lineStyle.color = [[0.0, 'lime'], [ _curOption.series[1].data[0].value/100, '#FA8565'], [1, '#efefef']];
};gauge.js
option = {
tooltip : {
formatter: "{a}: {c}%"
},
series : [
{
startAngle: 180,
endAngle: 0,
name:'计划完成',
type:'gauge',
center : ['50%', '60%'], // 默认全局居中
radius : 220,
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.0, 'lime'],[0, '#FA8565'],[1, '#EFEFEF']],
width: 150
}
},
axisTick: {show:false},
axisLabel: {show:false},
splitLine: {show:false},
pointer: { // 分隔线
color:'#EB7D64',
width: 5,
length: 250
},
detail : {
show : false
},
data:[{value: 60}]
},
{
startAngle: 180,
endAngle: 0,
name:'实际完成',
type:'gauge',
center : ['50%', '60%'], // 默认全局居中
radius : 220,
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 150
}
},
axisTick: {show:false},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
fontSize : 16,
color: '#444'
}
},
splitLine: { // 分隔线
length : 10, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width:1,
color: '#444'
}
},
pointer: { // 分隔线
color:'#666666',
width: 5,
length:220
},
detail : {
show : false
},
data:[{value: 40}]
}
]
}
具体方法就是显示两个仪表盘 只给第二个仪表盘改变颜色
看不懂请自行领悟或者留言
版权声明:本文为sinat_28761919原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。